<编写高质量代码--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)一般来说,对象的属性一般定义在构造函数中,无论是公有还是私有属性,对象的行为一般写在原型中,因为如果方法写在构造函数中,那么每次实例化的时候,会在每一个实例中复制一份,如果行为定义在原型中,那么在对象实例化的时候,并不会在实例的内存中再复制一份,而且,定义在原型中的方法都是公有的,并且不能访问私有属性.

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

标签：

原文地址：http://my.oschina.net/sunshinewyf/blog/508741