<编写高质量代码--web前端开发修炼之道>之javascript总结

(一) 避免js冲突
   eg: 代码1:
   <script type="text/javascript">
                      var a = 123,
                            b = ‘sunshiine‘;

</script>
    <script type="text/javascript">
                     var a = 345,
                           b = ‘shining‘;
    </script>

如若上面的两段javascript代码是由两个人写的,那这样的代码就会发生冲突,为了避免冲突,可以使用匿名函数
    如下:
      <script type="text/javascript">
        (function(){
             var a = 123,
             b = ‘sunshiine‘;
        })();
       </script>
       <script type="text/javascript">
             (function(){
                      var a = 345,
                      b = ‘shining‘;
             })();
       </script>
       这样的话,在不同的匿名函数中,各自有各自的变量,不会相互产生冲突,但是这样会切断了各个函数之间的相互通信,也就是缺少了接口,于是可以向下面这样定义全局变量进行函数之间的通信,
         <script type="text/javascript">
          var GLOBAL = {};
        </script>
        <script type="text/javascript">
        (function(){
             var a = 123,
             b = ‘sunshiine‘;
             GLOBAL.str1 = a;
             GLOBAL.str2 = b;
        })();
                     
             </script>
             <script type="text/javascript">
             (function(){
                      var a = GLOBAL.str1,
                      b = GLOBAL.str2;
             })();
             </script>
     (二):javascript中经常会用到的处理页面的函数,或者解决浏览器兼容的函数
     (1) 去掉字符串首尾的空白符
       function trim(str){
          return str.replace(/^\s+|\s+$/g,"");
       }
 
     (2)关于遍历数组时索引值始终等于遍历结果的情况,解决办法有如下两种:

方法一:匿名函数解决办法
        for(var i = 0;i<li.length;i++){
            (function(_i){
                   li[_i] .onclick = function(){
                         for(var j = 0;j<a.length;i++){
                                 a[j].style.display = ‘none‘;
                         }
                        a[_i].style.display = ‘block‘;
                   }
            })(i);
        }

方法二:添加索引属性
            for(var i = 0;i<li.length;i++){
                 li[i].index = i;
                 li[_i] .onclick = function(){
                 for(var j = 0;j<a.length;i++){
                         a[j].style.display = ‘none‘;
                 }
                a[this.index].style.display = ‘block‘;
           }
          }
        
        (3) 自定义的addClass函数
        var addClass  = function(node,str){
            if(!new RegExp("(^|\\s+)"+str).test(node.className)){
               node.className = node.className + "" + str;
            }
        };

(4)自定义的removeClass函数
       var removeClass = function(node,class){
           node.className = node.className.replace(new RegExp("(^|\\s+)"+str),"");
       };
      
      (5) 使用node.xxx的方式获取html标签的属性值,跨浏览器兼容性比node.getAttribute(‘xxx‘);但是和常规属性不同,firefox无法通过node.xxx获取自定义属性,只能使用node.getAttribute("xxx")获取,所以给出的建议是:
      统一使用node.xxx的方式读取常规属性,对于自定义属性,统一使用node.getAttribute(‘xxx‘)读取
   (三)面向对象编程的那些事
   (1)实例中的属性和方法是结合构造函数中定义的属性.行为和原型中定义的属性,行为,构造函数中定义的属性和行为的优先级比原型中定义的属性和行为的优先级要高,如果构造函数和原型函数定义了同名的属性和行为,构造函数中的属性和行为会覆盖原型中同名的属性和方法.

(2)用this定义的属性是公有的,例如在构造函数中定义的属性,而用var定义的属性则是私有的
   例如:
    function dog = function(name){
            this.name = name;
            var age = 24;
    }
在这个例子中,name即为公有属性,age为私有属性

(3)一般来说,对象的属性一般定义在构造函数中,无论是公有还是私有属性,对象的行为一般写在原型中,因为如果方法写在构造函数中,那么每次实例化的时候,会在每一个实例中复制一份,如果行为定义在原型中,那么在对象实例化的时候,并不会在实例的内存中再复制一份,而且,定义在原型中的方法都是公有的,并且不能访问私有属性.

时间: 2024-10-28 12:50:02

<编写高质量代码--web前端开发修炼之道>之javascript总结的相关文章

编写高质量代码:Web前端开发修炼之道(一)

最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的<编写高质量代码web前端开发修炼之道>,看完觉得不错,它从一个整体架构上来说明如何编写高质量代码,而细处也着重说明一些比较重要的技术点,给人一种从高处俯瞰web开发.很完整的感觉,在这感谢老大,谢谢他让我们不停的进步着.下面是我看书过程中的笔记. 第一章:从网站重构说起 没什么好说的,从一个糟糕的老网页实例说明需要将web的结构,样式和行

《编写高质量代码-web前端开发修炼之道》 读书笔记 (转)

正文 欲精一行,必先通十行. 在前端开发这个领域,一专多能更是非常必要的. table布局缺点: 代码量大,结构混乱: 标签语义不明确,对搜索引擎不友好. css布局:div+css,或者(x)html+css. 代码量少.结构精简.语义清新. 代码量少,浏览器端下载时间就会更短: 语义清晰就会对搜索引擎更友好. 先确定html,确定语义的标签,再来选用合适的CSS. 浏览器会根据标签的语义给定一个默认定样式. 判断网页标签语义是否良好的一个简单方法就是:去掉样式,看网页结构是否组织良好有序,是

编写高质量代码:Web前端开发修炼之道(三)

第五章:高质量的Javascript 这章的内容我看的最久,这是跟我js基础没打好有着莫大的关系,但是还是耐着性子看完了, 不懂的东西都是百度上搜索,理解后再继续.下面是记录下来的笔记. 1)如何避免JS冲突 A:匿名函数 在多人合作一个网站时,每个人都会写自己的JS代码,定义变量的时候有可能会引起命名冲突,如何避免这种冲突隐患呢? 一种最简单有效的办法是“匿名函数”将脚本包起来,让变量的作用域控制在匿名函数之内. 匿名函数:(function (){})() 前面的括号内是函数体,后面的()表

编写高质量代码:Web前端开发修炼之道(二)

第四章:高质量的css 1)怪异模式和标准模式 在标准模式中,浏览器根据规范表现页面:而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作. 他们两者之间的差异比较典型的表现在IE对盒模型的解析:在标准模式中,网页元素的宽度=padding+border+width;而在怪异模式中,width本身就包括了padding和border. 在怪异模式中:设定width,然后margin:0 auto;是无法居中的.标准模式中可以正常工作. 于是我们尽量避免怪异模式,而选用标准模式,这样就出现了DT

读《编写高质量代码-Web前端开发修炼之道》笔记

第一章 1.Web标准由一系列标准组合而成,核心理念是将网页的结构,样式和行为分离,所以分为三大部分:结构标准,样式标准和行为标准.结构标准包括XML标准,XHTML标准,HTML标准:样式标准指CSS标准:行为标准主要包括DOM标准和ECMAScript标准. 第二章 1.注释增加代码的可读性:提高重用性--公共组件和私有组件的维护:冗余or精简:前期的构思:制定规范:团队合作 第三章 1.语义化标签 2.table布局的缺点:代码量大,结构混乱:标签语义不明确,对搜索引擎不友好. 3.CSS

&lt;编写高质量代码--web前端开发修炼之道&gt;之css总结

(一)标准模式和怪异模式的一些不同 (1)IE对盒模型的解析    在标准模式下,页面的宽度为:width+border+padding    在怪异模式下,width就包括了padding 和border (2)在怪异模式下,如下的样式不能正常表现    width:200px;margin-left:auto;margin-right:auto;在一些高级浏览器中,如果没有声明DTD类型,页面将会以标准模式进行解析,而在IE(IE6,IE7,IE8)中则会触发怪异模式 (二)关于*{marg

[已读]编写高质量代码--Web前端开发修炼之道

我觉得还蛮实用的一本,推荐看看,主要涉及到这些: 标签语义化.css模块化. css的一些东西,比如haslayout 文档流,还有如何实现水平.垂直居中. js代码组织与js分层.js压缩 编码规范.注释规范.命名规范

&lt;编写高质量代码--web前端开发修炼之道&gt;之html总结

最近在看一本书,觉得讲得特别精辟,把一些重要的地方记录下来   使用语义化的标签   (1)好处:能够很好地自我解释,方便搜索引擎理解网页的机构,抓取重要内容,去样式后也会根据浏览器的默认样式很好地组织网页内容,具有很好的可读性,从而实现对特殊终端的兼容   (2)常见模块:   demo 1: 常见的标签   <h1>title</h1>   <a href="#">更多</a>   <p>段落</p>    

『编写高质量代码Web前端开发修炼手册』读书笔记--高质量的CSS

1.怪异模式和DTD 标准模式:浏览器根据规范表现页面 怪异模式:模拟老浏览器行为防止老站点无法工作(为了兼容老式浏览器的代码),如果漏写DTD(Document Type Definition文档定义类型)声明,firefox会按照标准模式来解析网页,但在IE中就会触发怪异模式. 两种模式的差异比较大,比较典型的是IE对盒模型的解析:在标准模式中,网页元素的宽度是由padding.border.width三者的宽度相加决定的,而在怪异模式中,width本身就包括了padding和border的