最簡版的jQuery原理解析

鐵腕阿童木發表於2018-03-02
jQuery

網上很多jQuery的分析文章，雖然很詳細，但是對我這種小白，只想瞭解一下大概原理，而不想花太多時間研究細節，於是我就抽出jQuery繫結元素及方法的核心思想，沒有圖，但是相信你一定能看懂。

我們想要$(`selector`)時就獲得一個元素，且裡面有一些方法。
這些方法要繫結在原型prototype上。

所以jQuery必須是個建構函式

var $ = new fucntion jQuery(){}

假設裡面有個方法是繫結元素的，叫做init，我們首先要在prototype繫結這個方法。

jQuery.prototype.init = function(){}

當然jQuery裡還有其他例項方法，比如each方法，那我們需要這樣寫。

jQuery.prototype = {
    init: function(){},
    each: function(callback, args) {},
    其他方法...
}

然後我們需要返回這個元素，因此返回的是init方法的執行結果.

var $ = new fucntion jQuery(){ 
    return  jQuery.prototy.init(selector)
}

但是我們返回的是init創造的dom，因此我們也要在init裡獲取到jquery的原型上的方法，因此最好的辦法是把init函式也當成一個建構函式。裡面的prototype就繫結jQuery的原型方法。

因此

init.prototype = jQuery.prototype

即

jQuery.prototype.init.prototype = jQuery.fn;

這樣我們就不需要new jQuery，而直接通過new init()方法，就可以獲取到jQuery上的原型方法。

所以

var $ = fucntion jQuery(selector){
    return new jQuery.prototype.init(selector)
}

由於prototype太長，也不利於理解，我們用一個fn表示這些所有的方法，也就是這個原型。
因此

jQuery.fn.init.prototype = jQuery.fn;

所以就變成下面這樣了。

var $ = fucntion jQuery(){ 
    return  new jQuery.fn.init(selector)
}

jQuery.prototype = {
    init:function(){}//建構函式,
    其他方法
}

jQuery.fn = jQuery.prototype

jQuery.fn.init.prototype = jQuery.fn;

$(selector)

以上，轉載請說明來源，謝謝。

相關文章