JQuery原始碼學習筆記(一)

2021-08-15 07:48:04 字數 1261 閱讀 4920

最近打算學習各種前端框架的寫法,吸取經驗充實自己,第乙個選中的就是jquery。

jquery作為最流行的前端框架,早有無數前輩高人寫了各種各樣的原始碼解讀和剖析,不過他人的東西終究是他人的東西,只有自己去閱讀體會到的東西才能確實變成經驗,又說好記性不如爛筆頭,因此我把自己的學習體會寫在這裡,方便以後複習。

這篇文章使用的jquery是3.3.1版本,沒有特別的原因,當前是最新版而已。今後的文章也會基於這個版本。

進入正題。

jquery的主體**如下:

( function( global, factory ) 

return factory( w );

};} else

// pass this if window is not defined yet

} )( typeof window !== "undefined" ? window : this, function( window, noglobal ) );

可以看出,jq的主體是乙個

匿名函式

那麼這裡為什麼要用匿名函式呢?我想應該是因為匿名函式內部宣告的變數不會影響到外部,避免了我們自己宣告的一些變數跟jq起了衝突,導致各種莫名其妙的bug。

把這個匿名函式簡化一下,就是如下的形式:

(function(global, factory))(引數1,引數2);
相容其他框架的寫法暫且不表。引數1就是獲取window,引數2就是jq的功能函式。

當不需要相容其他框架時,下面這條語句才得以執行。

window.jquery = window.$ = jquery;
這條語句是把$(即jquery)設定為全域性變數,方便我們使用。

jquey本身指向了乙個函式:

// define a local copy of jquery

jquery = function( selector, context ) ,

可以看到我們每次使用$,其實都是new了乙個例項出來,只不過這部分工作jq替我們做了,不需要再自己建立。

令我百思不得其解的是,new乙個例項的時候用的是jquery.fn.init,看了原始碼jq是通過jquery.fn = jquery.prototype來使jquery.fn直接指向jquery.prototype的。直接使用jquery.prototype不就好了,何必多此一舉使用jquery.fn呢?

jQuery原始碼學習筆記

整個jquery是乙個自呼叫的匿名函式 1 function global,factory 9return factory w 10 11 else 14 typeof window undefined window this,function window,noglobal 自呼叫函式大家都不陌生...

jquery原始碼學習筆記二 jQuery工廠

筆記一裡記錄,jquery的總體結構如下 function global,factory typeof window undefined window this,function window,noglobal 那麼這個生成jquery的工廠是咋樣的?醬紫的 function window,nogl...

jquery原始碼學習筆記 01

jquery原始碼分析 文章的順序並不是按照特定的邏輯來編排的,只是自己看原始碼的時候碰到自己希望記錄的地方,就隨便寫點。merge 將第二個類陣列新增到第乙個類陣列的末尾 返回新的物件 我寫的陣列 但是jquery物件是乙個類陣列的物件 merge function first,second fi...