jQuery的框架介紹

2019-11-20 10:06:24

字體：大中小

供稿：網(wǎng)友

jQuery使用有一段時(shí)間了，但是有一些API的實(shí)現(xiàn)實(shí)在想不通。小編參考相關(guān)資料源碼，現(xiàn)在把我的學(xué)習(xí)過(guò)程和收獲分享給大家。

下面將使用簡(jiǎn)化的代碼來(lái)介紹，主要關(guān)注jQuery的實(shí)現(xiàn)思想~>_<~

//匿名立即執(zhí)行函數(shù)//.防止污染全局空間//.選擇性保護(hù)內(nèi)部變量(function(window, undefined){//第二參數(shù)undefined設(shè)置而不傳的原因：// 外部發(fā)生這種情況:var undefined = 時(shí)，undefined會(huì)被篡改// 設(shè)置第二參數(shù)而不傳，則undefined就會(huì)被重置回原來(lái)值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;//對(duì)外暴露jQuery：將jQuery綁定在window上面window.$ = jQuery;})(window);

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

jQuery一開(kāi)始使用匿名立即執(zhí)行函數(shù)包裹其內(nèi)部，并在第5行對(duì)外暴露；

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

當(dāng)我們?cè)谕獠空{(diào)用$("div")時(shí)，其實(shí)調(diào)用的就是內(nèi)部的jQuery("div")；

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

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

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

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

從第2行代碼可以看出，jQuery使用jQuery.prototype.init來(lái)實(shí)例化jQuery對(duì)象，但這會(huì)帶來(lái)一個(gè)問(wèn)題：

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

于是乎，補(bǔ)寫(xiě)第21行代碼，將init.prototype指向jQuery.prototype即可。

這樣就完成了，使用init來(lái)實(shí)例化，且可以在init作用域下訪問(wèn)到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來(lái)實(shí)例化對(duì)象，而不直接使用jQuery函數(shù)呢？

假設(shè)使用jQuery函數(shù)來(lái)實(shí)例化對(duì)象，這樣對(duì)象之間的引用的確可以簡(jiǎn)化為 jQuery-->jQuery.prototype。

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

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

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

jQuery會(huì)把獲取到的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鏈?zhǔn)秸{(diào)用與show知識(shí)淺析，欲了解更多資訊敬請(qǐng)關(guān)注武林網(wǎng)網(wǎng)站！

上一篇：使用JavaScript實(shí)現(xiàn)ajax的實(shí)例代碼

下一篇：jQuery鏈?zhǔn)秸{(diào)用與show知識(shí)淺析