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