讀jQuery源碼有感 - samwu－IT工程師數位筆記本

文章出處

讀之前的預備工作：

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.一行一行閱讀源代碼

實際閱讀過程中，你會遇到的困難大都是，

這個正則表達式什么意思
這么多if else嵌套究竟想表達什么個意思，而且為什么這么寫
js語言特有的語法所表達的意思，比如雙感嘆號!!在js里的作用，對null與undefined用!操作符時都會產生true的結果，所以用兩個感嘆號的作用就在于，如果明確設置了（非null/undefined/0""/等值），自然一樣的值；如果沒有設置，test就會默認為false，而不是null或undefined或0。還有>>>和~這些操作符，在js里都是特殊用法。

針對這些困難，你能做的就是