jQuery原始碼分析隨筆

一次在寫jquery外掛程式的經歷，讓自己發現了js水很深，自己很菜。然後慢慢發現js包括了原型、閉包、作用域等一些很常用的知識點。

首先jquery原始碼的主要結構

下面就是在做分析jquery原始碼時自己的一些備註

1 (function
(window)
78     jquery.test = function()
1112
var privatefunc = function ()
1617     jquery.fn = jquery.prototype =
24             _this.ele =document.documentelement.queryselectorall(select);
25             _this.length =_this.ele.length;
26return
_this;
27},
28         show: function
()32
for(var i=0;i
35             console.log('call show method')
36return
this;37
},38         hide: function
()42
for(var i=0;i
45             console.log('call hide method')
46return
this;47
},48         click: function
(),52         each: function
(fn)
56},
57         morefunc: function
()6061}
6263     jquery.fn.init.prototype = jquery.fn;
6465     window.jquery = jquery; //
將jquery賦值給window.jquery，全域性變數。這樣外部就可以直接訪問jquery函式了
6667 })(window,undefined)

下面我從自己一開始比較疑惑的幾個點進行分析

1、jquery 到底是什麼?

通常$('div')返回的是new jquery.fn.init( selector, context )這個物件，也就是init這個函式物件，這裡面會查詢div標籤的dom物件陣列、length還有jquery的例項方法。

2、jquery.fn和jquery的區別？

jquery.fn是個方法的集合，通過jquery.fn.init.prototype = jquery.fn，這樣jquery.fn.init就包含了jquery的所有例項方法，jquery.fn也就是jquery的所有例項方法。

jquery.fn.init.prototype==jquery.prototype==jquery.fn

3、jquery為什麼要呼叫jquery.fn.init來例項化？

jquery的初始化可以$('div')、new $('div')。為了能通過$('div')方便的進行初始化，就需要在構造方法中返回new jquery.fn.init(select)來巧妙的實現他。

jquery.fn.init剛好具備了jquery的所有的例項方法。

比如在jquery構造方法中直接return this或者new jquery()，很明顯這是沒辦法實現的。

4、存在的疑問

jquery.fn這個變數總是讓人很繞。如果直接換成jqueryfn不知道可不可以，也許是為了寫外掛程式時把jquery.prototype提供出去吧。

jquery.fn.plugin = plugin;

5、總結

首先建立乙個閉包，在裡面申請乙個變數jquery，然後掛載window下，讓閉包外的作用域也能進行訪問；

其次建立乙個jquery別名的jquery.fn=jquery.prototype，並將jquery.fn.init.prototype = jquery.fn;

最後$('.div')的方法返回new jquery.fn.init()的例項。這樣這個例項也擁有了jquery.fn的方法。

1 (function
(window, undefined)5//
方便後續我們初始化jquery物件時$('div')而不用new jquery('div')來初始化
6 jquery.fn.init.prototype =jquery.fn;
78 })(window)

jQuery原始碼分析隨筆

jQuery原始碼分析

jQuery原始碼分析

jQuery 原始碼分析

相關推薦