js书写技巧


短路表达式 与 多重短路表达式

示例1 示例2 示例3 注意
// ||短路表达式
var foo = a || b;
// 相当于
if(a){
    foo = a;
}else{
    foo = b;
}
 
// &&短路表达式
var bar = a && b;
// 相当于
if(a){
    bar = b;
}else{
    bar = a;
}
						
var a = 1, b = 0, c = 3;
 
var foo = a && b && c, // 0 ,相当于 a && (b && c)
  bar = a || b || c;  // 1
						
// 可读性低
function siblingCheck(a, b) {
    var cur = b && a,
        diff = cur && a.nodeType === 1 && b.nodeType === 1 &&
        (~b.sourceIndex || MAX_NEGATIVE) -
        (~a.sourceIndex || MAX_NEGATIVE);
 
    // other code ...  
}
						
- 在 Javascript 的逻辑运算中,0、""、null、false、undefined、NaN 都会判定为 false ,而其他都为 true ;
建议如下:
if(foo){ ... }     //不够严谨
if(!!foo){ ... }   //更为严谨,!!可将其他类型的值转换为boolean类型

						

预定义常用方法的入口

示例 说明
(function(window, undefined) {
    var
        // 定义了一个对象变量,一个字符串变量,一个数组变量
        class2type = {},
        core_version = "1.10.2",
        core_deletedIds = [],
 
        // 保存了对象、字符串、数组的一些常用方法 concat push 等等...
        core_concat = core_deletedIds.concat,
        core_push = core_deletedIds.push,
        core_slice = core_deletedIds.slice,
        core_indexOf = core_deletedIds.indexOf,
        core_toString = class2type.toString,
        core_hasOwn = class2type.hasOwnProperty,
        core_trim = core_version.trim;
         
})(window);
						
- 首先定义了一个对象变量、一个字符串变量、数组变量,要注意这 3 个变量本身在下文是有自己的用途的
- 借用这三个变量,再定义些常用的核心方法,从上往下是数组的 concat、push 、slice 、indexOf 方法,
对象的 toString 、hasOwnProperty 方法以及字符串的 trim 方法,
core_xxxx 这几个变量事先存储好了这些常用方法的入口,
如果下文行文当中需要调用这些方法,将会:
jQuery.fn = jQuery.prototype = {
    // ...
     
    // 将 jQuery 对象转换成数组类型
    toArray: function() {
        // 调用数组的 slice 方法,使用预先定义好了的 core_slice ,节省查找内存地址时间,提高效率
        // 相当于 return Array.prototype.slice.call(this)
        return core_slice.call(this);
    }
}
可以看到,当需要使用这些预先定义好的方法,只需要借助 call 或者 apply进行调用。
那么 jQuery 为什么要这样做呢,我觉得:

1、以数组对象的 concat 方法为例,如果不预先定义好 core_concat = core_deletedIds.concat 
而是调用实例 arr 的方法 concat 时,首先需要辨别当前实例 arr 的类型是 Array,
在内存空间中寻找 Array 的 concat 内存入口,把当前对象 arr 的指针和其他参数压入栈,
跳转到 concat 地址开始执行,而当保存了 concat 方法的入口 core_concat 时,
完全就可以省去前面两个步骤,从而提升一些性能;

2、另外一点,借助 call 或者 apply 的方式调用,让一些类数组可以直接调用数组的方法。
就如上面是示例,jQuery 对象是类数组类型,可以直接调用数组的 slice 方法转换为数组类型。

又譬如,将参数 arguments 转换为数组类型:

function test(a,b,c){
    // 将参数 arguments 转换为数组
    // 使之可以调用数组成员方法
    var arr = Array.prototype.slice.call(arguments);
 
    ...
}
						

短路表达式 与 多重短路表达式

示例 示例 示例

						

						

					

短路表达式 与 多重短路表达式

示例