读jQuery源码有感

读之前的预备工作：

1.基础的js知识，以及html和css知识，和正则表达式知识。可以参考妙味课堂的基础js，html和css大纲。

2.JavaScript核心指南的知识http://www.cnblogs.com/cnwebdeveloper/archive/2012/03/28/2421461.html

3.JavaScript设计模式的知识http://www.oschina.net/translate/learning-javascript-design-patterns?lang=chs

4.使用过jQuery

 

 

有了预备工作，阅读源码你会比较顺利。

我阅读的是2.0.3无法压缩版本，源代码有注释。

代码先从整体开始阅读，

1.搞清楚的就是它的封装方式和继承方式，

var $ =jQuery = function(){
    return new jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
    init : function(){
        this.length = 0;
        this.test = function(){
            return this.length;
        }
        return this;
    },
    jquery: "2.0.3",
    length: 1,
    size: function() {
        return this.length;
    }
}
jQuery.fn.init.prototype = jQuery.fn;     //使用jQuery的原型对象覆盖init的原型对象
alert( $().jquery );     //返回"2.0.3"
alert( $().test() );     //返回0
alert( $().size() );     //返回0

jQuery有其自身的静态方法和动态添加方法。所谓静态方法，就是jQuery各个模块都会调用到的公共方法。所谓动态添加方法，就是通过jQuery自己实现的extend函数来扩展的方法，这些方法一般jQuery内部不会使用到。

2.列出它的各个模块

Sizzle选择器，DOM操作，事件操作，样式操作，ajax操作，元素运动操作，回调函数队列操作（一次性调用多个函数，或设定某个函数只能调用一次），延迟函数操作（原先ajax回调函数形式是树状，现在是线状$.ajax("test.html").done(function(){ alert("哈哈，成功了！"); }).fail(function(){ alert("出错啦！"); });），数据缓存操作

3.一行一行阅读源代码

实际阅读过程中，你会遇到的困难大都是，

1. 这个正则表达式什么意思
2. 这么多if else嵌套究竟想表达什么个意思，而且为什么这么写
3. js语言特有的语法所表达的意思，比如双感叹号!!在js里的作用，对null与undefined用!操作符时都会产生true的结果，所以用两个感叹号的作用就在于，如果明确设置了（非null/undefined/0""/等值），自然一样的值；如果没有设置，test就会默认为false，而不是null或undefined或0。还有>>>和~这些操作符，在js里都是特殊用法。

针对这些困难，你能做的就是

1. 看注释
2. 自己写个小Demo，设源码断点，一步步调试来观察代码流程。（对于源码里的各种情况判断，这里要考验你的Demo完整性，间接考研你的思维缜密性）
3. 看第三方人怎么解读源代码，比如http://www.cnblogs.com/aaronjs/p/3279314.html

 

 

最后，发现，读这个源代码，不需要你知道什么算法知识，甚至数据结构也可以不知道，设计模式其实也可以不去知道。

耐下心来，静下心来，有着一般的逻辑，就能看懂jQuery源码。

平凡的逻辑，也能读懂不平凡的jQuery库。