zepto 源碼分析1

GeekQiaQia 發布于2019-08-22 11:13 / 2035人閱讀

摘要：核心類似選擇器，選擇元素組成對象集合將字符串轉化成對象集合根據給定標簽和屬性生成對象集合給定函數，在頁面加載完成后觸發函數參數沒內容，則返回空集合如果是標簽，則生成元素先行檢查是否為開頭，提高正則檢測效率如果有，則生成的對象集合，再檢索以規

核心 $() / zepto.init()

類似 CSS 選擇器，選擇元素組成 zepto 對象集合

將 HTML 字符串轉化成 zepto 對象集合

根據給定標簽和屬性生成 zepto 對象集合

給定函數，在頁面加載完成后觸發函數

zepto.init = function(selector, context) {
  var dom
  // 參數沒內容，則返回空集合
  if (!selector) return zepto.Z()
  else if (typeof selector == "string") {
    selector = selector.trim()
    // 如果是 html 標簽，則生成 dom 元素
    // 先行檢查是否為 < 開頭，提高正則檢測效率
    if (selector[0] == "<" && fragmentRE.test(selector))
      dom = zepto.fragment(selector, RegExp.$1, context), selector = null
    // 如果有 context，則生成 context 的對象集合，再檢索
    else if (context !== undefined) return $(context).find(selector)
    // 以 css 規則檢索元素
    else dom = zepto.qsa(document, selector)
  }
  // 如果傳參是函數，則在頁面加載完成時觸發執行 
  else if (isFunction(selector)) return $(document).ready(selector)
  // 如果給定的是 zepto 集合，直接返回
  else if (zepto.isZ(selector)) return selector
  else {
    // 是數組，則過濾 null 元素
    if (isArray(selector)) dom = compact(selector)
    // 是對象，則包在數組中
    else if (isObject(selector))
      dom = [selector], selector = null
    // If it"s a html fragment, create nodes from it
    // 什么情況下邏輯會走到下面？此時 html fragment 是什么？？
    else if (fragmentRE.test(selector)) 
      dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null
    // If there"s a context, create a collection on that context first, and select
    // nodes from there
    else if (context !== undefined) return $(context).find(selector)
    // And last but no least, if it"s a CSS selector, use it to select nodes.
    else dom = zepto.qsa(document, selector)
  }
  // create a new Zepto collection from the nodes found
  return zepto.Z(dom, selector)
}

zepto.fragment

由給定的 html 字符串生成 DOM 元素

返回由 DOM 元素組成的數組

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>") // 補全雙標簽
    if (name === undefined) name = fragmentRE.test(html) && RegExp.$1
    if (!(name in containers)) name = "*"

    container = containers[name]
    container.innerHTML = "" + html // 使 html 字符串轉換成 dom 元素
    // 將 container 內的元素集合轉換成數組，賦值給dom，并清空 container
    // slice.call 兩個好處：1. 轉換成數組 2. 數組拷貝
    // 這里為什么不直接將 container 置空，而是一個個移除呢？？
    dom = $.each(slice.call(container.childNodes), function(){
      container.removeChild(this)
    })
  }

  // properties 屬性賦值
  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
}

zepto.qsa(element, selector)

zepto 下的元素選擇器

使用 querySelectorAll 和選項實現類似 css 選擇器，如“#id”

不直接用 querySelector 或 querySelectorAll，只為更好的性能

規則

selector 以 # 開頭，則用 getElementById

selector 以 . 開頭，則用 getElementsByClassName

isSimple=/^[/w-]*$/

isSimple & 非# & 非.，用 getElementsByTagName

非 Simple，用 querySelectorAll

zepto.Z

生成 zepto 對象集合

zepto.Z = function(dom, selector) {
  return new Z(dom, selector)
}
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 || ""
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91999.html

zepto源碼分析-代碼結構

摘要：本來想學習一下的源碼，但由于的源碼有多行，設計相當復雜，所以決定從開始，分析一個成熟的框架的代碼結構及執行步驟。同時發表在我的博客源碼分析代碼結構本來想學習一下jQuery的源碼，但由于jQuery的源碼有10000多行，設計相當復雜，所以決定從zepto開始，分析一個成熟的框架的代碼結構及執行步驟。網上也有很多zepto的源碼分析，有的給源碼添加注釋，有的談與jQuery的不同，...

sherlock221 2019-08-20 12:20 評論0 收藏0
Zepto 源碼分析 1 - 進入 Zepto

摘要：選擇的理由是一個用于現代瀏覽器的與大體兼容的庫。環境搭建分析環境的搭建僅需要一個常規頁面和原始代碼一個常規頁面打開的首頁即可，在開發人員工具中即可使用原始代碼本篇分析的代碼參照，進入該代碼分支中即可。選擇 Zepto 的理由 Zepto is a minimalist JavaScript library for modern browsers with a largely jQue...

Aklman 2019-08-26 13:21 評論0 收藏0
Zepto源碼分析（一）核心代碼分析

摘要：源碼分析一核心代碼分析源碼分析二奇淫技巧總結本文只分析核心的部分代碼，并且在這部分代碼有刪減，但是不影響代碼的正常運行。當長度為則不添加內容，否則逐個將逐個到當前實例新增直接返回一個新的構造函數添加初始化方法。 Zepto源碼分析（一）核心代碼分析Zepto源碼分析（二）奇淫技巧總結本文只分析核心的部分代碼，并且在這部分代碼有刪減，但是不影響代碼的正常運行。目錄 * 用閉包封裝Z...

BicycleWarrior 2019-08-20 18:57 評論0 收藏0
讀Zepto源碼之Touch模塊

摘要：在觸發事件前，先將保存定時器的變量釋放，如果對象中存在，則觸發事件，保存的是最后觸摸的時間。如果有觸發的定時器，清除定時器即可阻止事件的觸發。其實就是清除所有相關的定時器，最后將對象設置為。進入時，立刻清除定時器的執行。大家都知道，因為歷史原因，移動端上的點擊事件會有 300ms 左右的延遲，Zepto 的 touch 模塊解決的就是移動端點擊延遲的問題，同時也提供了滑動的 swip...

Prasanta 2019-08-22 11:11 評論0 收藏0
讀 Zepto 源碼之操作 DOM

摘要：輔助方法這個方法遞歸遍歷的子節點，將節點交由回調函數處理。對集合進行遍歷，調用方法，如果為函數，則將回調函數返回的結果作為參數傳給否則，如果為，則將也即包裹元素的副本傳給，否則直接將傳給。這篇依然是跟 dom 相關的方法，側重點是操作 dom 的方法。讀Zepto源碼系列文章已經放到了github上，歡迎star: reading-zepto 源碼版本本文閱讀的源碼為 zepto...

beita 2019-08-20 17:00 評論0 收藏0
讀Zepto源碼之代碼結構

摘要：源碼結構整體結構如果在編輯器中將的源碼折疊起來，看到的就跟上面的代碼一樣。參考源碼分析代碼結構對象思想與源碼分析設計和源碼分析源碼中關于的問題最后，所有文章都會同步發送到微信公眾號上，歡迎關注歡迎提意見雖然最近工作中沒有怎么用 zepto ，但是據說 zepto 的源碼比較簡單，而且網上的資料也比較多，所以我就挑了 zepto 下手，希望能為以后閱讀其他框架的源碼打下基礎吧。源碼版...

warkiz 2019-08-20 15:35 評論0 收藏0