菜鳥的jQuery源碼學習筆記(一)


整個jQuery是一個自調用的匿名函數:

 1 (function(global, factory) {
 2     if (typeof module === "object" && typeof module.exports === "object") {
 3         module.exports = global.document ?
 4             factory(global, true) :
 5             function(w) {
 6                 if (!w.document) {
 7                     throw new Error("jQuery requires a window with a document");
 8                 }
 9                 return factory(w);
10             };
11     } else {
12         factory(global);
13     }
14 }(typeof window !== "undefined" ? window : this, function(window, noGlobal) {
15                            /* jQuery主體代碼 */
16 }));

自調用函數大家都不陌生,前面的function(){}是函數定義,然后緊接着的()表示立即執行,這樣構建了一個命名空間,其中的變量都是局部變量,不管起什么名字,都不會覆蓋全局變量。這樣就不會污染全局的命名空間。如果有不熟悉的同學,可以去看看作用域鏈和閉包的基礎知識就明白啦。

這個子調用函數的函數體我們暫時可以不用管,貌似是處理jQuery與CommonJS、Node.js等的沖突和協調關系,這個我覺得不是重點,重點是這個自調用函數的參數。

整個參數列表有兩個參數,第一個參數是傳入Global對象,所有的全局變量都是Global對象的成員。傳入這個變量,我們就將Global對象變成了這個自調用匿名函數的局部變量了,這樣當我們訪問它時,在自調用匿名函數的作用域中就能找到它,而不用將作用域鏈會退到Global,這樣就更快啦。

第二個參數就是我們的jQuery啦,其中定義了jQuery的所有的內容,咱們的重點就在這里,那么現在開始,我們往下看。

1 jQuery = function(selector, context) {
2             // The jQuery object is actually just the init constructor 'enhanced'
3             // Need init if jQuery is called (just allow error to be thrown if not included)
4             return new jQuery.fn.init(selector, context);
5         }

在自調用的匿名函數里面,定義了一個jQuery變量,它是一個方法,執行后返回一個新jQuery對象,不過這個對象實際上是由jQuery.fn.init函數構建。在整個jQuery主體代碼的最后會讓window.jQuery和window.$兩個全局變量引用這個jQuery方法:

1 if (typeof noGlobal === strundefined) {
2         window.jQuery = window.$ = jQuery;
3     }

這樣當我們使用$(...)或者jQuery(...)的時候就能創建jQuery對象啦!

下期預告:

我們都知道,在javascript中構建對象的方法有很多種,什么工廠模式、構造函數模式、原型模式等等,jQuery使用的是構造函數和原型相結合的方式。下期我們來看看jQuery的原型是怎么樣的。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM