摘要:返回值為,如果能查找到元素,則將元素以數組的形式返回,否則返回空數組排除不合法的。的第一個字符為,并且為標簽。如果存在,則查找下選擇器為的所有子元素。正則表達式為如果沒有指定標簽名,則獲取標簽名。包裹元素的即為所需要獲取的。
經過前面三章的鋪墊,這篇終于寫到了戲肉。在用 zepto 時,肯定離不開這個神奇的 $ 符號,這篇文章將會看看 zepto 是如何實現 $ 的。
讀Zepto源碼系列文章已經放到了github上,歡迎star: reading-zepto
源碼版本本文閱讀的源碼為 zepto1.2.0
zepto的css選擇器 zepto.qsa我們都知道,很多時候,我們都用$ 來獲取DOM對象,這跟 zepto.qsa 有很大的關系。
源碼zepto.qsa = function(element, selector) { var found, // 已經找的到DOM maybeID = selector[0] == "#", // 是否為ID maybeClass = !maybeID && selector[0] == ".", // 是否為class nameOnly = maybeID || maybeClass ? selector.slice(1) : selector, // 將id或class前面的符號去掉 isSimple = simpleSelectorRE.test(nameOnly) // 是否為單個選擇器 return (element.getElementById && isSimple && maybeID) ? ((found = element.getElementById(nameOnly)) ? [found] : []) : (element.nodeType !== 1 && element.nodeType !== 9 && element.nodeType !== 11) ? [] : slice.call( isSimple && !maybeID && element.getElementsByClassName ? maybeClass ? element.getElementsByClassName(nameOnly) : element.getElementsByTagName(selector) : element.querySelectorAll(selector) ) }
以上是 qsa 的所有代碼,里面有用到一個正則表達式 simpleSelectorRE,先將這個正則消化下。
simpleSelectorRE = /^[w-]*$/,
看到這個正則其實是匹配 a-z、A-Z、0-9、下劃線、連詞符 組合起來的單詞,這其實就是單個 id 和 class 的命名規則。
從 return 中可以看出,qsa 其實是根據不同情況分別調用了原生的 getElementById、getElementsByClassName 、getElementsByTagName 和 querySelectorAll 的方法。
為什么要這么麻煩,不直接調用 querySelectorAll 方法呢?這是出于性能的考慮。這里有個簡單的測試。這個測試里,頁面上只有一個元素,如果比較復雜的時候,差距更加明顯。
好了,開始逐行分析代碼。
參數element 開始查找的元素
selector 選擇器
變量found: 已經找到的元素
maybeID = selector[0] == "#": 判斷選擇器的第一個字符是否為 #, 如果是 # ,則可能是 id 選擇器
maybeClass = !maybeID && selector[0] == "." 如果不是 id 選擇器,并且選擇器的第一個字符為 . ,則可能是 class 選擇器
nameOnly = maybeID || maybeClass ? selector.slice(1) : selector ,如果為 id 選擇器或者 class 選擇器,則將第一個字符去掉
isSimple = simpleSelectorRE.test(nameOnly) 是否為單選擇器,即 .single 的形式,不是 .first .secend 等形式
element.getElementById(element.getElementById && isSimple && maybeID) 這是采用 element.getElementById 的條件。
首先要確保 element 具有 getElementById 的方法。getElementById 的方法是在 document 上的,Chrome等瀏覽器上,element 可能并不具有 geElementById 的方法,具體可以看看這篇文章:各瀏覽器對document.getElementById等方法的實現差異解析
然后要確保選擇器為單選擇器,并且為 id 選擇器。
返回值為 ((found = element.getElementById(nameOnly)) ? [found] : []), 如果能查找到元素,則將元素以數組的形式返回,否則返回空數組
排除不合法的elementelement.nodeType !== 1 && element.nodeType !== 9 && element.nodeType !== 11 。1 對應的是 Node.ELEMENT_NODE ,9 對應的是 Node.DOCUMENT_NODE , 11 對應的是 Node.DOCUMENT_FRAGMENT_NODE ,如果不為以上三種類型,直接返回 []。
終極三元表達式slice.call( isSimple && !maybeID && element.getElementsByClassName ? // 如果為單選擇器并且不為id選擇器并且存在getElementsByClassName方法,進入下一個三元表達式判斷 maybeClass ? element.getElementsByClassName(nameOnly) : // 如果為class選擇器,則采用getElementsByClassName element.getElementsByTagName(selector) : // 否則采用getElementsByTagName方法 element.querySelectorAll(selector) // 以上情況都不是,則用querySelectorAll )
這里用了 slice.call 處理所獲取到的集合,這樣,獲取到的DOM集合就可以直接使用數組的方法了。
zepto.Z 函數從第一篇代碼結構中我們已經知道,其實實現 $ 函數的核心是 zepto.init ,而 zepto.init 最終返回的是 zepto.Z 的結果。那就先來看看 zepto.Z
zepto.Z = function(dom, selector) { return new Z(dom, selector) }
zepto.Z 的代碼很簡單,返回的是 Z 函數的實例。那接下來再看看 Z 函數:
function Z(dom, selector) { var i, len = dom ? dom.length : 0 for (i = 0; i < len; i++) this[i] = dom[i] this.length = len this.selector = selector || "" }
Z 函數做的事情也很簡單,就是將 dom 數組轉化為類數組的形式,并設置對應的 length 屬性和 selector 屬性。
zepto.isZzepto.isZ = function(object) { return object instanceof zepto.Z }
既然看了 Z 函數,就順便也將 isZ 也一起看了吧。isZ 函數用來判斷參數 object 是否為 Z 的實例,這在 init 中會用到。
$的實現 zepto.init 函數 $的實現$ = function(selector, context) { return zepto.init(selector, context) }
可以看到,其實 $ 調用的就是 zepto.init 這個內部方法。
zepto.initzepto.init = function(selector, context) { var dom // dom 集合 if (!selector) return zepto.Z() // 分支1 else if (typeof selector == "string") { // 分支2 selector = selector.trim() if (selector[0] == "<" && fragmentRE.test(selector)) dom = zepto.fragment(selector, RegExp.$1, context), selector = null else if (context !== undefined) return $(context).find(selector) else dom = zepto.qsa(document, selector) } else if (isFunction(selector)) return $(document).ready(selector) // 分支3 else if (zepto.isZ(selector)) return selector // 分支4 else { // 分支5 if (isArray(selector)) dom = compact(selector) else if (isObject(selector)) dom = [selector], selector = null else if (fragmentRE.test(selector)) dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null else if (context !== undefined) return $(context).find(selector) else dom = zepto.qsa(document, selector) } return zepto.Z(dom, selector) }
這個 init 方法代碼量不多,但是有大量的 if else, 希望我可以說得清楚
$的用法$(selector, [context]) ? collection // 用法1 $(不傳參調用) ? same collection // 用法2 $( ) ? collection // 用法3 $(htmlString) ? collection // 用法4 $(htmlString, attributes) ? collection v1.0+ // 用法5 Zepto(function($){ ... }) // 用法6
直接調用 $() 時,對應的是分支1的情況: if (!selector) return zepto.Z() ,返回的是空的 Z 對象
selector 為 String 時當 selector 為 string 時,對應的代碼在分支2,對應的用法是用法1、用法4和用法5
在這個分支里,又有三個子分支。一一來看一下:
第一個的判斷條件為 selector[0] == "<" && fragmentRE.test(selector) 。selector 的第一個字符為 < ,并且為html標簽 。fragmentRE 的定義如下 fragmentRE = /^s*<(w+|!)[^>]*>/ ,這個其實就是用來判斷字符串是否為標簽。 我對正則也不太熟,這里就不再展開。
如果滿足條件,則執行如下代碼:dom = zepto.fragment(selector, RegExp.$1, context), selector = null。 zepto.fragment 其實是通過 htmlString 返回一個dom集合。這個函數稍后會說到,這里先不展開。這里對應的是用法4和用法5。
如果不滿足第一個判斷條件,則再判斷 context !== undefined (上下文是否存在)。如果存在,則查找 context 下選擇器為 selector 的所有子元素: $(context).find(selector) 。這個分支對應的是用法1
否則,調用 zepto.qsa 方法,查找 document 下的所有 selector : dom = zepto.qsa(document, selector)。這里對應的是用法1。
selector 為 Function 時對應的代碼在分支3,對應的用法是用法6
這個分支很簡單,在頁面加載完畢后,再執行回調方法:$(document).ready(selector)
用過 zepto 的應該都熟悉這種用法: $(function() {})。其實走的就是這個分支
selector 為 Z 對象時對應的代碼在分支4,對應的用法是用法2
如果參數已經為 Z 對象(zepto.isZ(selector)),則不需要做任何事情,直接原對象返回就可以了。
selector 為其他情況如果為數組時(isArray(selector)), 將數組展平(dom = compact(selector))
如果為對象時(isObject(selector)),將對象包裹成數組(dom = [selector])。
以上兩種情況對應的是用法3,將dom對象或dom集合轉化為 z 對象
如果為標簽(fragmentRE.test(selector)),執行跟分支1一模一樣的代碼。這里判斷在上面已經做過了,為什么要再來一次呢?我也不太明白,有明白的可以跟我說下。
經過一輪又一輪的判斷和 selector 重置,現在終于可以調用 z 函數了: zepto.Z(dom, selector) ,init 的最后,將收集到的 dom 集合和對應的 selector 傳入 Z 函數,返回 Z 對象。
zepto.fragmentzepto.fragment = function(html, name, properties) { var dom, nodes, container if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1)) if (!dom) { if (html.replace) html = html.replace(tagExpanderRE, "<$1>$2>") if (name === undefined) name = fragmentRE.test(html) && RegExp.$1 if (!(name in containers)) name = "*" container = containers[name] container.innerHTML = "" + html dom = $.each(slice.call(container.childNodes), function() { container.removeChild(this) }) } if (isPlainObject(properties)) { nodes = $(dom) $.each(properties, function(key, value) { if (methodAttributes.indexOf(key) > -1) nodes[key](value) else nodes.attr(key, value) }) } return dom }
fragment 的作用的是將html片斷轉換成dom數組形式。
首先判斷是否為標簽的形式 singleTagRE.test(html) (如), 如果是,則采用該標簽名來創建dom對象 dom = $(document.createElement(RegExp.$1)),不用再作其他處理。singleTagRE = /^<(w+)s*/?>(?:1>|)$/。
如果尚未獲取到 dom,接著進行:
if (html.replace) html = html.replace(tagExpanderRE, "<$1>$2>")
這段是對 html 進行修復,如
修復成 。正則表達式為 tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([w:]+)[^>]*)/>/igif (name === undefined) name = fragmentRE.test(html) && RegExp.$1
如果沒有指定標簽名,則獲取標簽名。如傳入
if (!(name in containers)) name = "*" container = containers[name] container.innerHTML = "" + html dom = $.each(slice.call(container.childNodes), function() { container.removeChild(this) }) } // containers 已經開頭定義,如下 table = document.createElement("table"), tableRow = document.createElement("tr"), containers = { "tr": document.createElement("tbody"), "tbody": table, "thead": table, "tfoot": table, "td": tableRow, "th": tableRow, "*": document.createElement("div") }
檢測 name 是否為特殊的元素,如 tr 要用 tbody 包裹,其他的元素用 div 包裹。包裹元素的 childNodes 即為所需要獲取的 dom 。
if (isPlainObject(properties)) { nodes = $(dom) $.each(properties, function(key, value) { if (methodAttributes.indexOf(key) > -1) nodes[key](value) else nodes.attr(key, value) }) } // methodAttributes 在上面已經定義,定義如下 methodAttributes = ["val", "css", "html", "text", "data", "width", "height", "offset"]
如果屬性值為純對象,則給元素設置屬性。
如果所需設置的屬性,zepto已經定義了相應的方法,則調用zepto對應的方法,否則統一調用zepto的attr 方法設置屬性。
最后將 dom 返回
系列文章讀Zepto源碼之代碼結構
讀 Zepto 源碼之內部方法
讀Zepto源碼之工具函數
參考各瀏覽器對document.getElementById等方法的實現差異解析
Node.nodeType
?
最后,所有文章都會同步發送到微信公眾號上,歡迎關注,歡迎提意見:
作者:對角另一面
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82996.html
摘要:如果偽類的參數不可以用轉換,則參數為字符串,用正則將字符串前后的或去掉,再賦值給最后執行回調,將解釋出來的參數傳入回調函數中,將執行結果返回。重寫的方法,改過的調用的是方法,在回調函數中處理大部分邏輯。 Selector 模塊是對 Zepto 選擇器的擴展,使得 Zepto 選擇器也可以支持部分 CSS3 選擇器和 eq 等 Zepto 定義的選擇器。 在閱讀本篇文章之前,最好先閱讀《...
摘要:調用來獲取符合條件的集合元素,這在上篇文章讀源碼之神奇的已經有詳細的論述。然后調用方法來合并兩個集合,用內部方法來過濾掉重復的項,方法在讀源碼之內部方法已經有論述。最后也是返回一個集合。 接下來幾個篇章,都會解讀 zepto 中的跟 dom 相關的方法,也即源碼 $.fn 對象中的方法。 讀Zepto源碼系列文章已經放到了github上,歡迎star: reading-zepto 源碼...
摘要:讀源碼系列文章已經放到了上,歡迎源碼版本本文閱讀的源碼為改寫原有的方法模塊改寫了以上這些方法,這些方法在調用的時候,會為返回的結果添加的屬性,用來保存原來的集合。方法的分析可以看讀源碼之模塊。 Stack 模塊為 Zepto 添加了 addSelf 和 end 方法。 讀 Zepto 源碼系列文章已經放到了github上,歡迎star: reading-zepto 源碼版本 本文閱讀的...
摘要:模塊是為解決移動版加載圖片過大過多時崩潰的問題。因為沒有處理過這樣的場景,所以這部分的代碼解釋不會太多,為了說明這個問題,我翻譯了這篇文章作為附文怎樣處理移動端對圖片資源的限制,更詳細地解釋了這個模塊的應用場景。 assets 模塊是為解決 Safari 移動版加載圖片過大過多時崩潰的問題。因為沒有處理過這樣的場景,所以這部分的代碼解釋不會太多,為了說明這個問題,我翻譯了《How to...
摘要:模塊基于上的事件的封裝,利用屬性,封裝出系列事件。這個判斷需要引入設備偵測模塊。然后是監測事件,根據這三個事件,可以組合出和事件。其中變量對象和模塊中的對象的作用差不多,可以先看看讀源碼之模塊對模塊的分析。 Gesture 模塊基于 IOS 上的 Gesture 事件的封裝,利用 scale 屬性,封裝出 pinch 系列事件。 讀 Zepto 源碼系列文章已經放到了github上,歡...
閱讀 564·2023-04-25 16:00
閱讀 1598·2019-08-26 13:54
閱讀 2496·2019-08-26 13:47
閱讀 3402·2019-08-26 13:39
閱讀 1037·2019-08-26 13:37
閱讀 2734·2019-08-26 10:21
閱讀 3534·2019-08-23 18:19
閱讀 1601·2019-08-23 18:02