讀Zepto源碼之神奇的$

時間  2019-11-16
標籤 zepto 源碼 神奇 简体版
原文   原文鏈接

通過前面三章的鋪墊，這篇終於寫到了戲肉。在用 zepto 時，確定離不開這個神奇的 $ 符號，這篇文章將會看看 zepto 是如何實現 $ 的。javascript

讀Zepto源碼系列文章已經放到了github上，歡迎star: reading-zeptocss

源碼版本

本文閱讀的源碼爲 zepto1.2.0html

zepto的css選擇器 zepto.qsa

咱們都知道，不少時候，咱們都用$ 來獲取DOM對象，這跟 zepto.qsa 有很大的關係。java

源碼

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，先將這個正則消化下。node

simpleSelectorRE = /^[\w-]*$/,
複製代碼

看到這個正則實際上是匹配 a-z、A-Z、0-九、下劃線、連詞符 組合起來的單詞，這其實就是單個 id 和 class 的命名規則。git

從 return 中能夠看出，qsa 實際上是根據不一樣狀況分別調用了原生的 getElementById、getElementsByClassName 、getElementsByTagName 和 querySelectorAll 的方法。github

爲何要這麼麻煩，不直接調用 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 ，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.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源碼之工具函數

參考

最後，全部文章都會同步發送到微信公衆號上，歡迎關注,歡迎提意見：

做者：對角另外一面

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程