讀 Zepto 源碼之神奇的 $

来源:http://www.cnblogs.com/hefty/archive/2017/05/14/6851644.html
-Advertisement-
Play Games

無論是jquery還是zepto，都離不開$，這個符號似乎是萬能的，這篇文章通過zepto源碼來探究的就是$實現的原理。 ...


經過前面三章的鋪墊，這篇終於寫到了戲肉。在用 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] : [])， 如果能查找到元素，則將元素以數組的形式返回，否則返回空數組

排除不合法的element

element.nodeType !== 1 && element.nodeType !== 9 && element.nodeType !== 11 。1 對應的是 Node.ELEMENT_NODE ，10 對應的是 Node.DOCUMENT_TYPE_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.isZ

zepto.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.init

zepto.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
$(<Zepto collection>)   ⇒ same collection // 用法2
$(<DOM nodes>)   ⇒ 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.fragment

zepto.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) （如<div></div>）, 如果是，則採用該標簽名來創建dom對象 dom = $(document.createElement(RegExp.$1))，不用再作其他處理。singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/。

如果尚未獲取到 dom，接著進行：

if (html.replace) html = html.replace(tagExpanderRE, "<$1></$2>")

這段是對 html 進行修複，如<p class="test" /> 修複成 <p class="test" /></p> 。正則表達式為 tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig

if (name === undefined) name = fragmentRE.test(html) && RegExp.$1

如果沒有指定標簽名，則獲取標簽名。如傳入 <div>test</div> ，獲取到的 name 為 div

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 返回

系列文章

  1. 讀Zepto源碼之代碼結構
  2. 讀 Zepto 源碼之內部方法
  3. 讀Zepto源碼之工具函數

參考

作者：對角另一面


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • P3366 【模板】最小生成樹
    題目描述 如題，給出一個無向圖，求出最小生成樹，如果該圖不連通，則輸出orz 輸入輸出格式 輸入格式： 第一行包含兩個整數N、M，表示該圖共有N個結點和M條無向邊。（N<=5000，M<=200000） 接下來M行每行包含三個整數Xi、Yi、Zi，表示有一條長度為Zi的無向邊連接結點Xi、Yi 輸出 ...
  • 詳解HashMap數據結構實現
    HashMap的設計是由數組加鏈表的符合數據結構，在這裡用自己的語言以及結合源碼去總結一下，如果有不對的地方希望評論指正，先拱手謝謝。 HashMap是日常中非常常用的一種數據結構，我們要想深入瞭解學習任何一門技術，都是要先應用，再深入。深入就要瞭解實現的原理，在java語言中，最基本的結構是數組以 ...
  • Lock
    之前對於synchronized的實現和運用有所瞭解，但是也發現了一些缺陷，由於synchronized是在JVM層面上實現同步互斥，是以關鍵字形式加鎖，導致其顆粒度過大，有的時候不需要這麼大範圍的加鎖，在中斷和線程阻塞處理上也有所欠缺，在JDK1.5之後，Java引入了Lock，作為對於synch ...
  • Django入門筆記
    Django入門筆記 **文檔包含Django安裝包、學習的筆記、代碼等 安裝 Django參考附件，只需要把附件拷貝到你需要的目錄就行。Django是1.8.16版本 Python：在附件中，其中有Django需要的依賴包 編輯器：Aptana，一個強大的IDE工具，可以在上邊新建模板，支持各種語 ...
  • python基礎--異常，對象和迭代器
    異常處理 面向對象 迭代器和生成器 python異常處理 下麵代碼觸發了一個FileNotFoundError 拋出異常 異常類型 捕獲異常使用try,except,finally,else python面向對象 python是完全面向對象的，python中一切都是對象，包括變數，函數等。 定義一個 ...
  • 逆向工程
    1.概念 ①正向工程：Java類→資料庫表 MyBatis不支持 ②逆向工程：資料庫表→Java類 總結：通過MyBatis的jar包自動的生成資料庫所對應的Javabean。 步驟： 1.①創建一個專門的工程用於生成Java文件 先導包： 2.②pom.xml配置 3. ③創建generatorC ...
  • 前端迷思與React.js
    前端迷思與React.js 前端技術這幾年蓬勃發展, 這是當時某幾個項目需要做前端技術選型時, 相關資料整理, 部分評論引用自社區。 開始吧: 目前， Web 開發技術框架選型為兩種的占 80% 。這種戲劇性的變化持續了近 6 年。 自 2013 年 5 月推出以來，ReactJS 在過去三年中已成... ...
  • 十億級視頻播放技術優化揭密
    本文為轉載文章，文章來自：王輝|十億級視頻播放技術優化揭密 QCon是由InfoQ主辦的全球頂級技術盛會，每年在倫敦、北京、東京、紐約、聖保羅、上海、舊金山召開。自 2007年 3月份首次舉辦以來，已經有超萬名高級技術人員參加過QCon大會。QCon內容源於實踐並面向社區，演講嘉賓依據熱點話題，面向 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類