保留上一節(jié)分割出2個(gè)構(gòu)造器的疑問(wèn),我們先看看jQuery在接口的設(shè)計(jì):
遍歷方法:
$(".aaron").each() //作為實(shí)例方法存在 $.each() //作為靜態(tài)方法存在
這是最常見(jiàn)的遍歷方法,第一條語(yǔ)句是給有指定的上下文調(diào)用的,就是(".aaron")獲取的DOM合集,第二條語(yǔ)句$.each()函數(shù)可用于迭代任何集合,無(wú)論是“名/值”對(duì)象(JavaScript對(duì)象)或數(shù)組。在迭代數(shù)組的情況下,回調(diào)函數(shù)每次都會(huì)傳遞一個(gè)數(shù)組索引和相應(yīng)的數(shù)組值作為參數(shù)。本質(zhì)上來(lái)說(shuō)2個(gè)都是遍歷,那么我們是不是要寫(xiě)2個(gè)方法呢?
我們來(lái)看看jQuery的源碼:
jQuery.prototype = { each: function( callback, args ) { return jQuery.each( this, callback, args ); } }
實(shí)例方法取于靜態(tài)方法,換句話(huà)來(lái)說(shuō)這是靜態(tài)與實(shí)例方法共享設(shè)計(jì),靜態(tài)方法掛在jQuery構(gòu)造器上,原型方法掛在哪里呢?
我們上節(jié)不是講了內(nèi)部會(huì)劃分一個(gè)新的構(gòu)造器init嗎?jQuery通過(guò)new原型prototype上的init方法當(dāng)作構(gòu)造器,那么init的原型鏈方法就是實(shí)例的方法了,所以jQuery通過(guò)2個(gè)構(gòu)造器劃分2種不同的調(diào)用方式一種是靜態(tài),一種是原型。
方法是共享的,并且實(shí)例方法取于靜態(tài)方法,2個(gè)構(gòu)造器是完全隔離的 ,這個(gè)要如何處理?
看看jQuery給的方案:
畫(huà)龍點(diǎn)睛的一處init.prototype = jQuery.fn
,把jQuery.prototype原型的引用賦給jQuery.fn.init.prototype的原型,這樣就把2個(gè)構(gòu)造器的原型給關(guān)聯(lián)起來(lái)了。
ajQuery.fn = ajQuery.prototype = {
name: 'aaron',
init: function(selector) {
this.selector = selector;
return this;
},
constructor: ajQuery
}
ajQuery.fn.init.prototype = ajQuery.fn
這段代碼就是整個(gè)結(jié)構(gòu)設(shè)計(jì)的最核心的東西了,有這樣的一個(gè)處理,整個(gè)結(jié)構(gòu)就活了!不得不佩服作者的設(shè)計(jì)思路,別具匠心。
看看init的的構(gòu)造圖:
(單擊圖片查看大圖)
通過(guò)原型傳遞解決問(wèn)題,把jQuery的原型傳遞給jQuery.prototype.init.prototype。換句話(huà)說(shuō)jQuery的原型對(duì)象覆蓋了init構(gòu)造器的原型對(duì)象,因?yàn)槭且脗鬟f所以不需要擔(dān)心這個(gè)循環(huán)引用的性能問(wèn)題。
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)