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) //

    console.log(a) //

    // good

    var a=b=4;

    b=5;

    console.log(b) //

    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) //

    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

巴特西

Js极客之路 - 简化操作

最新文章

热门文章