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整體...