jQuery的架構介紹_jquery

jQuery使用有一段時間了，但是有一些API的實現實在想不通。小編參考相關資料源碼，現在把我的學習過程和收穫分享給大家。

下面將使用簡化的代碼來介紹，主要關注jQuery的實現思想~>_<~

//匿名立即執行函數//.防止汙染全域空間//.選擇性保護內部變數(function(window, undefined){//第二參數undefined設定而不傳的原因：// 外部發生這種情況:var undefined = 時，undefined會被篡改// 設定第二參數而不傳，則undefined就會被重設回原來值function jQuery(sel){return new jQuery.prototype.init(sel);}jQuery.prototype = {constructor: jQuery,init: function(sel){if(typeof sel === 'string'){var that = this;//jQuery內部使用的是Sizzle，這裡使用querySelectorAll替代var nodeList = document.querySelectorAll(sel);Array.prototype.forEach.call(nodeList, function(val, i){that[i] = val;})this.selector = sel;this.length = nodeList.length;}}}jQuery.prototype.init.prototype = jQuery.prototype;//對外暴露jQuery：將jQuery綁定在window上面window.$ = jQuery;})(window); 

--------------------------

jQuery一開始使用匿名立即執行函數包裹其內部，並在第5行對外暴露；

所謂的匿名立即執行函數即這個函數是匿名的（沒有名字）、定義完後立即調用的；

當我們在外部調用$("div")時，其實調用的就是內部的jQuery("div")；

(function(window, undefined){//內部變數//對外暴露jQuery：將jQuery綁定在window上面window.$ = jQuery;})(window);$("div")

--------------------------

好，接下來稍複雜點，下面的代碼主要實現如圖的互相引用：

以$('div')調用為例：

從第2行代碼可以看出，jQuery使用jQuery.prototype.init來執行個體化jQuery對象，但這會帶來一個問題：

執行個體化的對象只能訪問到init下的變數，而不能訪問到jQuery.prototype（jQuery對外提供的API綁定在該對象下）。

於是乎，補寫第21行代碼，將init.prototype指向jQuery.prototype即可。

這樣就完成了，使用init來執行個體化，且可以在init範圍下訪問到jQuery.prototype。

function jQuery(sel){return new jQuery.prototype.init(sel);}jQuery.prototype = {constructor: jQuery,init: function(sel){if(typeof sel === 'string'){var that = this;//jQuery內部使用的是Sizzle，這裡使用querySelectorAll替代var nodeList = document.querySelectorAll(sel);Array.prototype.forEach.call(nodeList, function(val, i){that[i] = val;})this.selector = sel;this.length = nodeList.length;}}}jQuery.prototype.init.prototype = jQuery.prototype; 

為什麼使用jQuery.prototype.init來執行個體化對象，而不直接使用jQuery函數呢？

假設使用jQuery函數來執行個體化對象，這樣對象之間的引用的確可以簡化為 jQuery-->jQuery.prototype。

但是調用會變得繁瑣起來：new $('div')，所以基於這個考慮（猜測(⊙０⊙)），在內部使用較為複雜的實現，來簡化調用。

--------------------------

好，最後，再來看一下init的實現。同樣也簡化了代碼，只實現了最常用的一種情況。

jQuery會把擷取到的nodeList處理成數組（方便後續使用），並在其下掛載一些變數，如length,selector。

init: function(sel){if(typeof sel === 'string'){var that = this;//jQuery內部使用的是Sizzle，這裡使用querySelectorAll替代var nodeList = document.querySelectorAll(sel);Array.prototype.forEach.call(nodeList, function(val, i){that[i] = val;})this.selector = sel;this.length = nodeList.length;}} 

本文所述到此結束，下篇文章將給大家介紹jQuery鏈式調用與show知識淺析，欲瞭解更多資訊敬請關注云棲社區網站！