//匿名立即執(zhí)行函數(shù)
//.防止污染全局空間
//.選擇性保護內(nèi)部變量
(function(window, undefined){
//第二參數(shù)undefined設(shè)置而不傳的原因：
// 外部發(fā)生這種情況:var undefined = 時，undefined會被篡改
// 設(shè)置第二參數(shù)而不傳，則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內(nèi)部使用的是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一開始使用匿名立即執(zhí)行函數(shù)包裹其內(nèi)部，并在第5行對外暴露；

所謂的匿名立即執(zhí)行函數(shù)即這個函數(shù)是匿名的（沒有名字）、定義完后立即調(diào)用的；

當我們在外部調(diào)用$("div")時，其實調(diào)用的就是內(nèi)部的jQuery("div")；

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

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

好，接下來稍復(fù)雜點，下面的代碼主要實現(xiàn)如圖的互相引用：

以$('div')調(diào)用為例：

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

實例化的對象只能訪問到init下的變量，而不能訪問到j(luò)Query.prototype（jQuery對外提供的API綁定在該對象下）。

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

這樣就完成了，使用init來實例化，且可以在init作用域下訪問到j(luò)Query.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內(nèi)部使用的是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函數(shù)呢？

假設(shè)使用jQuery函數(shù)來實例化對象，這樣對象之間的引用的確可以簡化為 jQuery-->jQuery.prototype。

但是調(diào)用會變得繁瑣起來：new $('div')，所以基于這個考慮（猜測(⊙０⊙)），在內(nèi)部使用較為復(fù)雜的實現(xiàn)，來簡化調(diào)用。

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

好，最后，再來看一下init的實現(xiàn)。同樣也簡化了代碼，只實現(xiàn)了最常用的一種情況。

jQuery會把獲取到的nodeList處理成數(shù)組（方便后續(xù)使用），并在其下掛載一些變量，如length,selector。

init: function(sel){
if(typeof sel === 'string'){
var that = this;
//jQuery內(nèi)部使用的是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;
}
}

本文所述到此結(jié)束，下篇文章將給大家介紹jQuery鏈式調(diào)用與show知識淺析，欲了解更多資訊敬請關(guān)注腳本之家網(wǎng)站！

您可能感興趣的文章: