学会读JQuery等JS插件源码

不少人以为jquery、ext等一些开源js源代码 十分的晦涩，读不懂，遇到问题须要调试也很费劲。其实我我的感受主要是有几个方面的缘由：

一、对一些js不经常使用的语法、操做符不熟悉

二、某个function中又嵌套了一些内部的function，使得整个代码的层次结构不像java代码那么清晰。

三、js中容许变量先使用后定义，会形成咱们看代码时候突然冒出来一个变量、function，却找不到是在哪里定义的。

 

那么今天给你们分享一下个人经验，扫清你的障碍。

1、一些晦涩的操做符：

一、(function(){})();

几乎全部的开源js代码开篇都是这样(function(……){……})(……);

下面是Jquery的部分源码：

(function( window, undefined ) {
    var jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context );
    },

    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,

    // Map over the $ in case of overwrite
    _$ = window.$,
    ……
    indexOf = Array.prototype.indexOf;

    // Expose jQuery to the global object
    window.jQuery = window.$ = jQuery;
})(window);

那么这个操做符(function(){})();究竟是什么意思呢？

(function(){})中的定义了一个function，紧接着的()表示当即执行这个function。

咱们看到Jquery源码第一个()中是定义了一个匿名function( window, undefined ) {}；接着末尾有个(window)，就表示执行这个匿名function，并传入参数window 。

 

在匿名function( window, undefined ) {}中，定义了一个局部变量jQuery；而后在末尾咱们看到Jquery末尾有一句window.jQuery = window.$ = jQuery; 这句代码就表示，将此前定义的jQuery导出到window对象 。这也是为何咱们能够在代码任何地方直接使用$、jQuery对象，由于在这里已经将$、jQuery对象挂载到window下去了，而window.$、window.jQuery与直接使用$、jQuery是没有区别的。

（注意，这个window对象是传入的参数window，而不是浏览器window对象！！一个形参、一个实参。咱们能够在定义function的时候，将参数window取名为其余字符。因此咱们看到jquery.min.js中这个匿名function变成了(function(E,B){})(window);）

 

一般(function(){})()用来封装一些私有成员或者公共成员的导出。

 

二、使人迷惑的","

咱们知道“,”通常用于一次定义多个变量、定义多个参数等。像上面的jQuery源码中在var jQuery后面，使用“,”一次定义了不少个变量。

可是，像下面的代码，可能你们就不必定看得懂了：

//html：<input type="hidden" value="king" id="nameHide"/>
jQuery(document).ready(function() {
    var showName=function(){
        var value,nameInput=$("#nameHide");
        return nameInput.show(),value=nameInput.val();
    };
    alert(showName());
});
//结果：弹出king

这里的“nameInput.show(),value=nameInput.val()”中的“,”运算符的做用是返回","右侧表达式的值。因此，return 后面若是有多个表达式，且表达式之间由","隔开，整个return表达式返回的是最后一个","右侧的表达式的值。

 

“,”在开源代码中经常被用于return表达式中，以及跟下面咱们要讲到的"()"运算符一块儿使用。

 

三、“()”广义上的代码包装

咱们遇到复杂的逻辑表达式时，咱们一般会把须要一块儿运算的表达式用“()”包起来：(a||b)&&(c||d)

其实，咱们能够这样理解："()"运算符将一个表达式包裹起来做为一个总体进行运算，而后返回这个总体的值。

那么上面的(function(){})()中左侧定义function的()也是这个做用，将这个function给包裹起来，而后返回这个function。咱们调用方法通常是a();那么(function(){})的做用就是返回这个function对象，而后(function(){})()右侧的()表示调用这个function。

 

咱们再来看其余的用法：

//html：<input value="kings" id="name"/><div id="nameErrorTip">输入错误！</div>
jQuery(document).ready(function() {
    var nameValidate=function(){
        var value,nameInput=$("#name"),nameErrorTip=$("#nameErrorTip");
        return (value=nameInput.val(),value=="king")?(nameErrorTip.hide(),"对了，输入为king！"):(nameErrorTip.show(),"请输入king!");
    };
    alert(nameValidate());
});

//结果 nameErrorTip显示，弹出"请输入king!"



//html：<input value="king" id="name"/><div id="nameErrorTip">输入错误！</div>
//结果 nameErrorTip隐藏，弹出"对了，输入为king！"

这里“ (value=nameInput.val(),value=="king")”中"()"将里面的表达式做为一个总体进行运算，而里面的表达式又是由","构成的多个表达式组，因此执行的时候会把这多个表达式都执行一次 ，而且返回最后一个表达式的值！

因此 (value=nameInput.val(),value=="king")执行时，先运算value的值，再判断是否为"king"。若是为king，会执行(nameErrorTip.hide(),"对了，输入为king！")。这个表达式又先将nameErrorTip隐藏，再返回一个"对了，输入为king！"字符串做为 整个return的值。

 

四、||、&&、if()逻辑让人头晕

 

||、&&两侧参与运算的是逻辑表达式，if()中也是。可是咱们在不少开源代码中看到的||、&&参与运算的表达式看起来却好像不是逻辑表达式……

 

下面节选一段jQuery.tool中的一段源码：

e.circular || (f.onBeforeSeek(function(a, b) {
                    setTimeout(function() {
                                a.isDefaultPrevented()
                                        || (n.toggleClass(e.disabledClass,
                                                b <= 0), o.toggleClass(
                                                e.disabledClass, b >= f
                                                        .getSize()
                                                        - 1))
                            }, 1)
                }), e.initialIndex || n.addClass(e.disabledClass)), f.getSize() < 2
                && n.add(o).addClass(e.disabledClass), e.mousewheel
                && a.fn.mousewheel && b.mousewheel(function(a, b) {
                            if (e.mousewheel) {
                                f.move(b < 0 ? 1 : -1, e.wheelSpeed || 50);
                                return !1
                            }
                        });

这里有多处||、&&。但与运算的表达式倒是调用某个函数的返回值。

 

其实，js中的逻辑表达式是按照真值、假值来分的。true是真值；1是真值；一个对象也是真值；false是假值；""、0是假值。

 

在js中&&、||不必定都是用来判断一个表达式的逻辑值是true、false，更多的是用来依据真值或者假值执行相应操做！

 

咱们知道，||运算的时候，会先运算左侧的表达式的值，若是为真值，那么真个表达式就为真值，而同时右侧表达式是真值、假值都不重要，由于右侧表达式都再也不继续参与运算了。又若是左侧为假值，则继续运算右侧表达式。

&&则先运算左侧表达式，两侧表达式，一个为假值，则整个表达式为假值。

 

这里关键是这个真值或者假值的运算过程当中，咱们可使用上面介绍的","、"()"将一组表达式串起来执行。也就是说，这个表达式可能会很长很长，我甚至能够定义一个function在里面。这些表达式在执行过程当中，有能够进行某些附加操做。好比咱们但愿这个表达式为真值的时候咱们作什么，假值的时候作什么，把这些操做用"()"、","串起来做为一个总体运算。

因而就有了上面的复杂代码。

 

咱们来看个实例吧。是上面例子的升级版。咱们加入一个nameInput是否存在的判断:

jQuery(document).ready(function() {
    var nameValidate=function(){
        var value,nameInput=$("#name"),nameErrorTip=$("#nameErrorTip"),msg;
        msg=(value=nameInput.val(),value=="king")?(nameErrorTip.hide(),"对了，输入为king！"):(nameErrorTip.show(),"请输入king!");
        return (nameInput.length&&nameInput.val()&&nameErrorTip.length&&msg)||"没有找到name输入框或者输入框没有值！";
    };
    alert(nameValidate());
});

测试：

//html:<input value="king" id="myName"/>
//结果：弹出“没有找到name输入框或者输入框没有值！”

//<input value="king" id="name"/><div id="nameErrorTip">输入错误！</div>
//结果：弹出“对了，输入为king！”，nameErrorTip被隐藏

return表示中 nameInput.length&&nameInput.val()&&nameErrorTip.length&&msg会先运算 nameInput.length的值，若是length为0则表达式为假值，若是为1则为真值。val()操做也是如此，若是val()结果为""则表达式也是假值。几个表达式之间为&&运算，则表示依次运算几个表达式的值，若是都未真值则返回最后一个表达式的值 ，因为整个表达式与

"没有找到name输入框或者输入框没有值！"

表达式之间是||运算，因此前面的表达式其中一个表达式为假值则返回||右侧的表达式的值，也就是整个“没有找到name输入框或者输入框没有值！”字符串。

 

这个javascript为何要搞这些晦涩的运算符呢？

由于javascript一般在客户端运行，那么从服务器端将js代码传输到客户端确定须要耗时。上面的这些运算符都是为了减小代码量。再加上使用压缩工具去掉空格，替换变量名，就可使用压缩率达到最好。