jquery原始碼之整體架構分析

2021-09-19 11:23:31 字數 1962 閱讀 8778

jquery的整體**架構簡化如下:

(function( window, undefined ) ,

jquery.fn = jquery.prototype = ,

...};

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

if ( typeof window === "object" && typeof window.document === "object" )

})( window );

這裡有幾點需要整明白的:

1、使用乙個閉包定義jquery,建立乙個私有空間,這樣內外部的命名空間就不會相互干擾了。為了在外部能夠使用jquery,將jquery($)提公升到window作用域下,即:

window.jquery = window.$ = jquery;
2、為什麼要將window作為引數傳入:

有兩個好處,一是便於**壓縮,jquery每個版本都有壓縮版,如將傳入的window引數命名為w,則可減少大量的**量;二是將window全域性變數變成區域性變數,可加快訪問速度。

3、為什麼要增加undefined引數:

undefined在某些瀏覽器(如chrome、ie等)是可以被修改的,如:

undefined = "hello";
為了保證在jquery內部,使用到的undefined真的是undefined而沒有被修改過,將它作為引數傳入。

ok,上面幾點都比較好理解,下面開始分析jquery的構建方式。

jquery相當於乙個類,在jquery中,我們使用$()或jquery()來得到jquery例項,按此思路定義jquery類如下:

var jquery = function()
啊噢,死迴圈了~

想拿到例項,即this,原方法拿不到,就去原型那裡拿咯:

var jquery = function() 

jquery.prototype =

}

但這樣還是會有問題,因為這樣相當於單例了,建立出來的物件相互共享作用域,必然導致很多問題,如

var jquery = function() 

jquery.prototype = ,

age:18

}var jq1 = new jquery();

var jq2 = new jquery();

jq1.age = 20;

console.log(jq1.age); //20

console.log(jq2.age); //20

所以需要讓他們的作用域分離,互不干擾,故每次建立新物件即可解決:

var jquery = function() 

jquery.prototype =

}

但是這樣仍然是有問題的,如:

var jquery = function() 

jquery.prototype = ,

age:18

}var jq = new jquery();

console.log(jq.age); //undefined

原因是這裡init和外部的jquery.prototype分離了,init物件中並沒有age屬性。

改改改:

var jquery = function() 

jquery.prototype = ,

age:18

}jquery.prototype.init.prototype = jquery.prototype;

好了,到此為止基本沒啥問題了,jquery也是這樣實現的,只是多了個jquery.fn作為jquery.prototype的引用而已,沒多少特別意義。

jquery原始碼 整體架構

對外提供了jquery。可以通過jquery或者 來找到jquery function window,undefined window.jquery window.jquery 對外介面 window jquery本身是乙個建構函式,包括了很多靜態方法 工具方法 和例項方法。靜態方法更底層。func...

jQuery原始碼學習(版本1 11) 整體架構

如下,首先整個 結構看上去就是乙個閉包自執行,閉包執行的好處在於閉包擁有私有的作用域,不會汙染全域性作用域,最終再將jquery作為乙個命名空間匯出到window下,這樣 管理起來非常方便,相容性好。jquery整個閉包執行,實際是執行了factory 方法,而factory 是作為引數傳進去的,因...

underscore原始碼剖析之整體架構

最近打算好好看看underscore原始碼,乙個是因為自己確實水平不夠,另乙個是underscore原始碼比較簡單,比較易讀。本系列打算對underscore1.8.3中關鍵函式原始碼進行分析,希望做到最詳細的原始碼分析。今天是underscore原始碼剖析系列第一篇,主要對underscore整體...