jQuery原始碼學習2 初始化篇

2022-01-28 23:59:38 字數 3980 閱讀 4920

這一篇主要總結一下jquery這個js在引入的時候做的一些初始化工作

第一句window.undefined=window.undefined;

是為了相容低版本的ie而寫的

因為在低版本的ie中undefined不是window物件下的屬性

因此window.undefined就是undefined

根據=運算子右結核性的特徵,=右邊的window.undefined就是undefined

既然window沒有undefined屬性

因此左邊其實可以理解為在window下面擴充套件乙個undefined屬性

這個值就是undefined

接下來

if

( $ )

這個是為了防衝突處理

如果在引入jquery之前先引入了其他的庫

而其他的庫裡面已經將$作為全域性變數

這樣就先將其他庫中的$存在_$屬性下

接下來再將jquery賦值給$

此後再呼叫$的時候調的就是jquery的$

如果想要用其它庫

就可以通過jquery._$來獲取

接下來將已經定義好的jquery建構函式賦值給$

var $ = jquery;

再往下給jquery新增了一些例項方法

我個人感覺這些例項方法處於乙個比較頂層的位置

也就是說在這些方法裡面會呼叫很多其他的方法,尤其是呼叫其他靜態方法

所以我想學習完一些最基本的靜態方法之後再回過頭來看這部分

接下來就是extend方法了

extend是jquery內部擴充套件例項化方法和靜態方法的乙個基礎方法

也是jquery對外擴充套件外掛程式的乙個方法

jquery.extend = jquery.fn.extend = function

(obj,prop)

for ( var i in prop ) obj[i] =prop[i];

return

obj;

};

v1.0.0的extend邏輯很簡單

從函式的定義上來看,作者希望給extend傳入兩個引數:obj和prop

功能自然就是把prop裡面的成員擴充套件給obj

但是如果只傳入了乙個引數,就代表給jquery或jquery.fn本身擴充套件

也就是說obj就是jquery或jquery.fn

方法裡面的第一句也就是這個作用了

值得一提的是這個地方巧妙的利用了this

如果通過如下方式呼叫

jquery.extend()

那麼裡面的this指向就是jquery,這樣就會把aaa擴充套件成jquery的靜態成員

而如果通過下面這種方式呼叫

jquery.fn.extend();

那麼裡面的this指向的就是jquery.fn,即jquery.prototype,這樣就會把bbb擴充套件成jquery的例項化成員

再往下就又擴充套件了一些靜態成員

這些靜態屬性或方法涵蓋了初始化、屬性操作、樣式操作、dom操作、選擇器、事件系統等等

初始化:init

屬性操作:classname.add classname.remove classname.has attr

樣式操作:swap css curcss

dom操作:clean getall parents sibling

選擇器:expr token find parse filter

事件系統:event.add event.remove event.trigger event.handle event.fix

工具方法:each trim merge grep map

這些方法等遇到了再具體去看

再往下來了乙個初始化**塊,這個**塊又給jquery增加了兩個靜態成員:

jquery.browser和jquery.boxmodel

jquery.browser用於判斷瀏覽器,jquery.boxmodel用於判斷是否是標準盒模型

這兩個屬性都很簡單

再往下就出現了jquery.macros這個靜態成員

macros裡面其實儲存了若干方法的"公共資訊"

這些方法在接下來的jquery.init()會逐個實現

jquery.extend();

jquery.each(jquery.macros.to,

function

(i,n));

jquery.each(jquery.macros.each,

function

(i,n));

jquery.each(jquery.macros.filter,

function

(i,n));

jquery.each(jquery.macros.attr,

function

(i,n));

jquery.each(jquery.macros.css,

function

(i,n));

},each:

function

(obj,fn,args)

}else

}return

obj;

}});

jquery.macros =,    

css: "width,height,top,left,position,float,overflow,color,background".split(","),

filter: [ "eq", "lt", "gt", "contains"],

attr: ,

axis: ,

each: ,

show:

function

(), hide:

function

(), toggle:

function

(), addclass:

function

(c),

removeclass:

function

(c),

toggleclass:

function

( c ),

remove:

function

(a),

empty:

function

(), bind:

function

( type, fn ) ,

unbind:

function

( type, fn ) ,

trigger:

function

( type, data )

}};

jquery.init();

jquery初始化的過程中呼叫了init方法

init方法通過each遍歷了macros裡面列舉的方法

each方法內部會做判斷,判斷傳入的obj是陣列還是物件從而確定是用foreach遍歷還是for迴圈

最後會將這些方法實現、擴充套件到jquery.prototype上

再往下,又擴充套件了原型方法toggle hover ready和靜態方法ready

再往下又來了乙個new function(){}自執行**塊

這個**塊的前半部分是為例項化物件擴充套件一些事件方法及其事件擴充套件方法

所謂事件擴充套件方法,舉例來說click事件

相對應的,就有unclick oneclick這兩個擴充套件方法

後半部分是做load的功能

**的最後擴充套件了動畫和ajax的一些成員

總的來說,jquery原始碼包含了以下幾個模組:

1、基本的工具方法

2、事件系統

3、domready——等待dom結構載入完成後再執行相應函式

4、dom操作

5、屬性及樣式操作

6、選擇器

7、動畫

8、ajax

jquery原始碼筆記2 初始化函式

for in的時候,它會把物件的屬性 包括原型的屬性 遍歷一遍,例如 有這麼一段 var array array.push 1 array.push 2 array.push 3 for var i in array 此時會輸出什麼呢?當然是0 1 1 2 2 3 但是如果在for in之前加上ar...

Tomcat原始碼之 初始化

1.首先設定catalina 的路徑和初始化classloader 2.利用反射模式啟動catalila catalila.load 的時候 初始化相應的容器 img catalila.start 啟動的時候,把相應的容器同事啟動 按從大到小依次啟動 先啟動server,在service,然後eng...

SpringIOC 初始化原始碼解析

springioc容器的關鍵兩個主要的容器系列 寫了段簡單的 ioc容器的具體的過程都在這一句話上 後台很硬的 下面咱們就來看看ioc的後台是多麼的硬,加了斷點除錯了下,跳進去的第一步是 public throws bean ception 上面 的refresh 是ioc容器啟動的入口,後邊會牽扯...