怎么读js插件代码？

看js代码总有很多迷惑，看了 原文链接 这篇文章学到了很多，在此分享给大家，也十分感谢博主！

很多人觉得jquery、ext等一些开源js源代码 十分的晦涩，读不懂，遇到问题需要调试也很费劲。其实我个人感觉主要是有几个方面的原因：

• 对一些js不常用的语法、操作符不熟悉

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

• js中允许变量先使用后定义，会造成我们看代码时候忽然冒出来一个变量、function，却找不到是在哪里定义的。

一些晦涩的操作符：

(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);

令人迷惑的",

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

()广义上的代码包装

我们遇到复杂的逻辑表达式时，我们通常会把需要一起运算的表达式用“()”包起来：(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在里面。这些表达式在执行过程中，有可以进行某些附加操作。比如我们希望这个表达式为真值的时候我们做什么，假值的时候做什么，把这些操作用()、,串起来作为一个整体运算。于是就有了上面的复杂代码。另外：

if(a){
    b
}

可简写为a&&(b); b可以是一个function调用表达式，或者是多个语句用","串起来。但前提是a已定义，否则会报错。我们来看个实例吧。是上面例子的升级版。我们加入一个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输入框或者输入框没有值！”字符串。

以后个人学到了更多的知识会分享给大家