jquery原始碼解析

2021-07-10 06:13:32 字數 1815 閱讀 4039

jquery 原始碼解析,參看**是jquery 3.0版本

入口jquery.js包含core.js,以及jquery的各類功能的組合,包括selector,ajax等等

然後將jquery物件匯出到全域性的jquery符號,以及$符號

確定jquery物件是個函式,這個函式生成出來的資料是物件

建立jquery的prototype的函式中,包括each,map的對映操作,first,last,eq等的陣列操作,end這類的操作棧功能

建立extend函式,這個函式可以組合兩個物件,可以設定為深組合,或淺組合的方式。如果函式只有乙個引數時,則將extend引數組合到當前物件上。

建立jquery的函式,包括一堆型別判斷:iswindow,isnumeric,isplainobject,isemptyobject,type,以及一堆集合操作:each,makearray,inarray,merge,grep,map,還有一些常用的操作:trim,proxy,guid

總結:core.js的目的是,建立jquery的根本屬性,它是乙個函式,呼叫後返回乙個元素陣列。以及這兩部分的常用操作,集合操作,字串操作,函式操作等等。

一堆關於型別判斷,和獲取資料的方法,封裝是為了更好的相容性。

動態執行某段js的**,執行方式是在document的head建立一段script標籤,而且script標籤的內容為js**,執行完畢後,將script標籤刪掉。

為啥要這麼做?因為這樣做動態執行的js**是保證在全域性作用域上執行的,而eval執行的動態**是跟執行位置有關,是在區域性作用域上執行的。

這裡是從html字串建立乙個dom元素的實現,方法是,然後這個字串是簡單字串,就用context.createelement實現,如果這個字串是巢狀字串,就用createdocumentfragment建立臨時元素,然後將字串設定到它的innerhtml下。再返回fragements的childnodes即可。

這個是用來相容safari 8 下不能直接createelement的問題

這裡是確定jquery的ready執行時機,主要是通過原生的document.addeventlistener(«domcontentloaded», *** );和window.addeventlistener(«load», completed );來確定ready的載入時機的。這裡還用了允許改變ready時機的方法holdready。

這裡是jquery函式的核心,$(),這個函式執行的內容

如果第乙個引數是個原生node,那麼將它變成jquery元素。

如果第乙個引數是個函式,那麼根據document.isready的狀態,來確定是否執行這個函式,還是說等待isready後才執行這個函式。

如果第乙個函式是個字串,則繼續分情況

1. 如果這個字串前後帶有尖括號,那麼是要建立乙個jquery元素,例如,這種$(』

213』)。建立jquery元素的主要方法是用parsehtml.js建立原生dom元素,然後再合併到當前的jquery物件上。

2. 其他情況是走selector.js,將context下根據這個字串查詢對應的dom元素,例如,這種$(『#id .mm』)

很明顯,這個檔案是做dom查詢操作的。selector的操作操作,有兩個辦法,乙個是走jquery的sizzle引擎,乙個是走瀏覽器的原生介面queryselectorall的方法。

這裡就是直接將sizzle引擎包含進來了,然後將sizzle引擎的介面暴露為jquery物件的find,expr,uniquesort,text,contains這些方法上了。這裡就不多說了,需要另起乙個談sizzle引擎的實現。

這個檔案的作用是定義了一堆jquery元素的遍歷方法這些

還有這些

jquery原始碼解析1

學了很久的js也寫了很長時間的jquery了,這裡來以學習的態度來看大牛的思想和架構。使用的是當前最新版本 3.1.1 就不考慮煩人的ie 6 7 8了,輕鬆愉快。其實一上來不知所措,這都是啥?function global,factory return factory w else typeof ...

JQuery原始碼解析(一)

寫在前面 本 第一眼看jq的源 或許會感到混亂和沒頭緒,特別是會卡在36行的 那裡遲遲找不到 function window,noglobal typeof window undefined window this,function window,noglobal return factory w ...

JQuery原始碼解析 目錄

1.a.查詢符號就是放在沙盒裡面的 window.jquery window.jquery b.乙個jquery物件無 new 構造 eg text text myjquery 等價於 var text new text text.text myjquery c.例項化方法存在這麼乙個關係鏈 jqu...