zoukankan      html  css  js  c++  java
  • Js极客之路

    1.对字符串使用单引号(避免动态添加元素时html会出现的双引号"引起的冲突,方便操作 - 单引号一个键,双引号两个键)

        // bad
        var name = "Barrior";
    
        // good
        var name = 'Barrior';

     

    2.使用一个 var 声明多个变量,用逗号隔开。

        // bad
        var items = getItems();
        var goSportsTeam = true;
        var dragonball = 'z';
    
        // good
        var  items = getItems(),
             goSportsTeam = true,
             dragonball = 'z';

    然后,一个 var 声明多个变量,可能会在修改时造成逗号和分号的混淆。如果压缩,压缩工具会自动减少var的声明,变成【good】的这种形式,所以,为了后期维护,就都加上var吧,像【bad】这样,注意适当,美观和可读性最重要,var满天飞也不好。

    3.以后赋值的变量不需要赋初始值。

        // bad
        var timer=null;
        clearInterval(timer);
        timer=setInterval(function(){
            ...code
        },1000);
        
        // good
        var timer;
        clearInterval(timer);
        timer=setInterval(function(){
            ...code
        },1000);

     

    4.值为基本类型的相等变量写在一起(更新:不能写在一起)。

        // bad
        var a=4,
            b=4;
        b=5;
        console.log(b) //5
        console.log(a) //4
        
        // good
        var a=b=4;
        b=5;
        console.log(b) //5
        console.log(a) //4

    2015.08.27更新:其实不能写在一起,后面的变量的作用域改变了,示例:

    function fn(){
      var a=b=4;
      b=5;
      console.log(b) //5
      console.log(a) //4
    }

    fn();

    console.log( b ) //5
    console.log( a ) //Uncaught ReferenceError: a is not defined

    如上,虽然输出没有影响,但是变量的作用域却改变了,a的作用域还是原本的作用域fn,而b的作用域却上升到了window

     

    如果是引用类型的就不要写一起,写一起容易导致修改一个变量的值牵连另一个变量跟着改变。以下引用变量被重新赋值,不会影响其他变量①,但是对变量通过引用类型的方法改变变量的值,就会影响其他变量②。

        ①、
        var a=b=[];
            b=5;
        console.log(b) //5
        console.log(a) //[]
        
        ②、
        var a=b=[];
            b.push(5);
        console.log(b) //[5]
        console.log(a) //[5]

     

    5.语句结束的分号。

        //bad?
        (function() {
          var name = 'Barrior';
          return name;
        })()
        
        //good
        (function() {
          var name = 'Barrior';
          return name
        })()
        //最后不加分号;其实每行都不加分号都没问题,浏览器会自动给换行加上分号(每行能够形成独立的逻辑语义),即便压缩,好像压缩也会自动给换行加上分号,而且最后一行是没有分号的。

     

    6.使用字面量创建对象

        //bad
        var arr=new Array(),
            obj=new Object();
        
        //good
        var arr=[],
            obj={};

     

    7.条件表达式和等号的快捷操作。

      条件表达式的强制类型转换遵循以下规则:

         对象 被计算为 true

         Undefined 被计算为 false

         Null 被计算为 false

         布尔值 被计算为 布尔的值

         数字 如果是 +0-0, or NaN 被计算为 false , 否则为 true

         字符串 如果是空字符串 '' 则被计算为 false, 否则为 true

        // bad
        if (name !== '') {
            ...code
        }
        
        // good
        if (name) {
            ...code
        }
    
    
        // bad
        if (oTest != false) {
            ...code
        }
        
        // good
        if (!oTest) {
            ...code
        } 
        
        
        // bad
        if (arr.length > 0) {
            ...code
        }
        
        // good
        if (arr.length) {
            ...code
        }

     

    8.使用1替代true,0替代false(因为在javascript语言中 true等于1,false等于0。因此,脚本包含的字面变量true都可以用1来替换,而false可以用0来替换。 )。

        //bad
        var  b=true;
        if( b ){
            ...code
        }
        
        //good
        var  b=1;
        if( b ){
            ...code
        }

    9、对有序集合进行顺序无关的遍历时,使用逆序遍历。逆序遍历可以节省变量,代码比较优化。

        var len = elements.length;
        while (len--) {
            var element = elements[len];
            // ......
        }

    10.运算符优先级及简写。

      Js运算符优先级:

      JavaScript在计算表达式时具有较高优先级的运算符先于较低优先级的运算符执行;例如,乘法的执行先于加法;下表按从最高到最低的优先级列出JavaScript运算符,具有相同优先级的运算符按从左至右的顺序计算。

    优先级

    运算符

    说明

    最高

    .  []  ()

    字段访问、数组索引、函数调用和表达式分组

    由高到低

    依次排列

    ++  --  ~  !  delete  new  typeof  void

    一元运算符、对象创建、

    返回数据类型、未定义的值

    *  /  %

    乘法、除法、取模

    +  -  +

    加法、减法、字符串连接

    <<  >>  >>>

    移位

    <  <=  >  >=  instanceof

    小于、小于或等于、大于、大于或等于、

    是否为特定类的实例

    ==  !=  ===  !==

    相等、不相等、全等、不全等

    &

    按位“与”

    ^

    按位“异或”

    |

    按位“或”

    &&

    逻辑“与”

    ||

    逻辑“或”

    ?:

    条件运算

    =  +=  -=  *=  /=  %=  &=  |=  ^=  <<=  >>=

    赋值、赋值运算

    最低

    ,

    多重求值

     

    ● if语句转用&&符号。

        //bad?
        var a=true,
            b;
        if(a){
            b=5
        }
        
        //good?
        var a=true,
            b;
        if(a) b=5
        
        //good?
        var a=true,
            b;
        a && (b=5)

     

    ● if...else语句转用三目运算。

        //bad?
        var a=1,
            b;
            
        if( a ){
            b=5
        }else{
            b=4
        }
        
        //good?
        var a=1,
            b;
        b = a ? 5 : 4

    ● 多个运算符一起操作,示例[1]

        //bad?
        lineBox.on('click','a',function(){
            if( $(this).text()=='添加分组' ){
                addCon.val('').focus();
                hint.removeClass('red-text')
            }
        });
        
        //good?
        lineBox.on('click','a',function(){
            
             $(this).text()=='添加分组' && addCon.val('').focus() && hint.removeClass('red-text')
             
        });

    ● 多个运算符一起操作,表单验证;DOM操作使用jQuery。

        <form action="#" method="post">
        
            <input type="text" />
        
            <input type="password" />
        
            <input type="submit" value="提交" />
        
        </form>
    
    
        $('form').submit(function(){
        
            return check( $('input[type=text]'),'请输入用户名' ) && check( $('input[type=password]'),'请输入密码' )
        
        });
        //【&&】运算规则:先执行左侧(文本的返回值),如果是false,那么停止执行,直接返回false,如果为true,那么执行后面一个值(密码的返回值)②;如果②为false,整个表达式直接返回false,如果为true,依次类推继续执行后面的值。
    
     
    
        function check(obj,text){
        
            return obj.val() ? true : (alert(text),false)
        
        }
        //表达式运算流程:如果传进来的obj有val()值,那么返回【?】后面的true,如果没有值则执行【:】后面的小括号(小括号的优先级最高,所以里面的内容被独立成了一个)里面的内容,里面内容除了逗号没有其他运算符,所以执行顺序从左至右。
        //如果改成这样:return obj.val() ? true : alert(text) , false
        //运算流程:根据运算符优先级,表达式被分为三目运算(三目运算里再被分为true,和alert(text)两块),和false两块;这里的【,】运算符的作用是返回【,】右侧的值。所以,return 后面如果有多个表达式,且表达式之间由【,】隔开,整个return返回的是最后一个【,】右侧的值。所以这个表达式不管传进来的obj是否有值都返回了false。

     

    附:

    【|=】运算规则:对变量值与表达式值执行按位“或”运算,并将结果赋给该变量(https://msdn.microsoft.com/library/81bads72(v=vs.94).aspx)。

    示例解释:

    i = 1;   //二进制为0001
    
    i | 2;   //2的二进制为0010 两个按位或为0011也就是3
    
    i |= 2 等价于 i = i | 2;
    
    所以 i 为 3

    参考:

    http://www.codeceo.com/article/javascript-guide.html

    http://www.cnblogs.com/jclser/archive/2010/02/17/1668922.html

    http://www.tashan10.com/kan-liao-zhe-ge-cai-fa-xian-jqueryyuan-dai-ma-bu-shi-na-yao-hui-se/

    https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md

     

    最后修改时间:2015-08-07

  • 相关阅读:
    1052 Linked List Sorting (25 分)
    1051 Pop Sequence (25 分)
    1050 String Subtraction (20 分)
    1049 Counting Ones (30 分)
    1048 Find Coins (25 分)
    1047 Student List for Course (25 分)
    1046 Shortest Distance (20 分)
    1045 Favorite Color Stripe (30 分)
    1044 Shopping in Mars (25 分)
    1055 The World's Richest (25 分)
  • 原文地址:https://www.cnblogs.com/barrior/p/4515035.html
Copyright © 2011-2022 走看看