zepto 源碼分析1

GeekQiaQia 發(fā)布于2019-08-22 11:13 / 2046人閱讀

摘要：核心類似選擇器，選擇元素組成對(duì)象集合將字符串轉(zhuǎn)化成對(duì)象集合根據(jù)給定標(biāo)簽和屬性生成對(duì)象集合給定函數(shù)，在頁(yè)面加載完成后觸發(fā)函數(shù)參數(shù)沒(méi)內(nèi)容，則返回空集合如果是標(biāo)簽，則生成元素先行檢查是否為開頭，提高正則檢測(cè)效率如果有，則生成的對(duì)象集合，再檢索以規(guī)

核心 $() / zepto.init()

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

將 HTML 字符串轉(zhuǎn)化成 zepto 對(duì)象集合

根據(jù)給定標(biāo)簽和屬性生成 zepto 對(duì)象集合

給定函數(shù)，在頁(yè)面加載完成后觸發(fā)函數(shù)

zepto.init = function(selector, context) {
  var dom
  // 參數(shù)沒(méi)內(nèi)容，則返回空集合
  if (!selector) return zepto.Z()
  else if (typeof selector == "string") {
    selector = selector.trim()
    // 如果是 html 標(biāo)簽，則生成 dom 元素
    // 先行檢查是否為 < 開頭，提高正則檢測(cè)效率
    if (selector[0] == "<" && fragmentRE.test(selector))
      dom = zepto.fragment(selector, RegExp.$1, context), selector = null
    // 如果有 context，則生成 context 的對(duì)象集合，再檢索
    else if (context !== undefined) return $(context).find(selector)
    // 以 css 規(guī)則檢索元素
    else dom = zepto.qsa(document, selector)
  }
  // 如果傳參是函數(shù)，則在頁(yè)面加載完成時(shí)觸發(fā)執(zhí)行 
  else if (isFunction(selector)) return $(document).ready(selector)
  // 如果給定的是 zepto 集合，直接返回
  else if (zepto.isZ(selector)) return selector
  else {
    // 是數(shù)組，則過(guò)濾 null 元素
    if (isArray(selector)) dom = compact(selector)
    // 是對(duì)象，則包在數(shù)組中
    else if (isObject(selector))
      dom = [selector], selector = null
    // If it"s a html fragment, create nodes from it
    // 什么情況下邏輯會(huì)走到下面？此時(shí) 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 元素組成的數(shù)組

zepto.fragment = function(html, name, properties) {
  var dom, nodes, container

  // 判斷是否空標(biāo)簽，如： 
  if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1))

  if (!dom) {
    if (html.replace) html = html.replace(tagExpanderRE, "<$1>") // 補(bǔ)全雙標(biāo)簽
    if (name === undefined) name = fragmentRE.test(html) && RegExp.$1
    if (!(name in containers)) name = "*"

    container = containers[name]
    container.innerHTML = "" + html // 使 html 字符串轉(zhuǎn)換成 dom 元素
    // 將 container 內(nèi)的元素集合轉(zhuǎn)換成數(shù)組，賦值給dom，并清空 container
    // slice.call 兩個(gè)好處：1. 轉(zhuǎn)換成數(shù)組 2. 數(shù)組拷貝
    // 這里為什么不直接將 container 置空，而是一個(gè)個(gè)移除呢？？
    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 和選項(xiàng)實(shí)現(xiàn)類似 css 選擇器，如“#id”

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

規(guī)則

selector 以 # 開頭，則用 getElementById

selector 以 . 開頭，則用 getElementsByClassName

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

isSimple & 非# & 非.，用 getElementsByTagName

非 Simple，用 querySelectorAll

zepto.Z

生成 zepto 對(duì)象集合

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 || ""
}