摘要：輔助方法這個(gè)方法遞歸遍歷的子節(jié)點(diǎn)，將節(jié)點(diǎn)交由回調(diào)函數(shù)處理。對集合進(jìn)行遍歷，調(diào)用方法，如果為函數(shù)，則將回調(diào)函數(shù)返回的結(jié)果作為參數(shù)傳給否則，如果為，則將也即包裹元素的副本傳給，否則直接將傳給。

這篇依然是跟 dom 相關(guān)的方法，側(cè)重點(diǎn)是操作 dom 的方法。

讀Zepto源碼系列文章已經(jīng)放到了github上，歡迎star: reading-zepto

本文閱讀的源碼為 zepto1.2.0

remove: function() {
  return this.each(function() {
    if (this.parentNode != null)
      this.parentNode.removeChild(this)
    })
},

刪除當(dāng)前集合中的元素。

如果父節(jié)點(diǎn)存在時(shí)，則用父節(jié)點(diǎn)的 removeChild 方法來刪掉當(dāng)前的元素。

zepto 中 after、 prepend、 before、 append、insertAfter、 insertBefore、 appendTo 和 prependTo 都是通過這個(gè)相似方法生成器生成的。

adjacencyOperators = ["after", "prepend", "before", "append"]

首先，定義了一個(gè)相似操作的數(shù)組，注意數(shù)組里面只有 after、 prepend、 before、 append 這幾個(gè)方法名，后面會看到，在生成這幾個(gè)方法后，insertAfter、 insertBefore、 appendTo 和 prependTo 會分別調(diào)用前面生成的幾個(gè)方法。

function traverseNode(node, fun) {
  fun(node)
  for (var i = 0, len = node.childNodes.length; i < len; i++)
    traverseNode(node.childNodes[i], fun)
}

這個(gè)方法遞歸遍歷 node 的子節(jié)點(diǎn)，將節(jié)點(diǎn)交由回調(diào)函數(shù) fun 處理。這個(gè)輔助方法在后面會用到。

adjacencyOperators.forEach(function(operator, operatorIndex) {
  var inside = operatorIndex % 2 //=> prepend, append

  $.fn[operator] = function() {
    // arguments can be nodes, arrays of nodes, Zepto objects and HTML strings
    var argType, nodes = $.map(arguments, function(arg) {
      var arr = []
      argType = type(arg)
      if (argType == "array") {
        arg.forEach(function(el) {
          if (el.nodeType !== undefined) return arr.push(el)
          else if ($.zepto.isZ(el)) return arr = arr.concat(el.get())
          arr = arr.concat(zepto.fragment(el))
        })
        return arr
      }
      return argType == "object" || arg == null ?
        arg : zepto.fragment(arg)
    }),
        parent, copyByClone = this.length > 1
    if (nodes.length < 1) return this

    return this.each(function(_, target) {
      parent = inside ? target : target.parentNode

      // convert all methods to a "before" operation
      target = operatorIndex == 0 ? target.nextSibling :
      operatorIndex == 1 ? target.firstChild :
      operatorIndex == 2 ? target :
      null

      var parentInDocument = $.contains(document.documentElement, parent)

      nodes.forEach(function(node) {
        if (copyByClone) node = node.cloneNode(true)
        else if (!parent) return $(node).remove()

        parent.insertBefore(node, target)
        if (parentInDocument) traverseNode(node, function(el) {
          if (el.nodeName != null && el.nodeName.toUpperCase() === "SCRIPT" &&
              (!el.type || el.type === "text/javascript") && !el.src) {
            var target = el.ownerDocument ? el.ownerDocument.defaultView : window
            target["eval"].call(target, el.innerHTML)
          }
        })
          })
    })
  }

在分析之前，先看看這幾個(gè)方法的用法：

after(content)
prepend(content)
before(content)
append(content)

參數(shù) content 可以為 html 字符串，dom 節(jié)點(diǎn)，或者節(jié)點(diǎn)組成的數(shù)組。after 是在每個(gè)集合元素后插入 content ， before 正好相反，在每個(gè)集合元素前插入 content，prepend 是在每個(gè)集合元素的初始位置插入 content， append 是在每個(gè)集合元素的末尾插入 content。before 和 after 插入的 content 在元素的外部，而 prepend 和 append 插入的 content 在元素的內(nèi)部，這是需要注意的。

var inside = operatorIndex % 2 //=> prepend, append

遍歷 adjacencyOperators，得到對應(yīng)的方法名 operator 和方法名在數(shù)組中的索引 operatorIndex。

定義了一個(gè) inside 變量，當(dāng) operatorIndex 為偶數(shù)時(shí)，inside 的值為 true，也就是 operator 的值為 prepend 或 append 時(shí)，inside 的值為 true 。這個(gè)可以用來區(qū)分 content 是插入到元素內(nèi)部還是外部的方法。

$.fn[operator] 即為 $.fn 對象設(shè)置對應(yīng)的屬性值（方法名）。

var argType, nodes = $.map(arguments, function(arg) {
  var arr = []
  argType = type(arg)
  if (argType == "array") {
    arg.forEach(function(el) {
      if (el.nodeType !== undefined) return arr.push(el)
      else if ($.zepto.isZ(el)) return arr = arr.concat(el.get())
      arr = arr.concat(zepto.fragment(el))
    })
    return arr
  }
  return argType == "object" || arg == null ?
    arg : zepto.fragment(arg)
}),

變量 argType 用來保存變量變量的類型，也即 content 的類型。nodes 是根據(jù) content 轉(zhuǎn)換后的 node 節(jié)點(diǎn)數(shù)組。

這里用了 $.map arguments 的方式來獲取參數(shù) content ，這里只有一個(gè)參數(shù)，這什么不用 arguments[0] 來獲取呢？這是因?yàn)?$.map 可以將數(shù)組進(jìn)行展平，具體的實(shí)現(xiàn)看這里《讀zepto源碼之工具函數(shù)》。

首先用內(nèi)部函數(shù) type 來獲取參數(shù)的類型，關(guān)于 type 的實(shí)現(xiàn)，在《讀Zepto源碼之內(nèi)部方法》 已經(jīng)作過分析。

如果參數(shù) content ，也即 arg 的類型為數(shù)組時(shí)，遍歷 arg ，如果數(shù)組中的元素存在 nodeType 屬性，則斷定為 node 節(jié)點(diǎn)，就將其 push 進(jìn)容器 arr 中；如果數(shù)組中的元素為 zepto 對象（用 $.zepto.isZ 判斷，該方法已經(jīng)在《讀Zepto源碼之神奇的$》有過分析），不傳參調(diào)用 get 方法，返回的是一個(gè)數(shù)組，然后調(diào)用數(shù)組的 concat 方法合并數(shù)組，get 方法在《讀Zepto源碼之集合操作》有過分析；否則，為 html 字符串，調(diào)用 zepto.fragment 處理，并將返回的數(shù)組合并，`zepto.fragment 在《讀Zepto源碼之神奇的$》中有過分析。

如果參數(shù)類型為 object （即為 zepto 對象）或者 null ，則直接返回。

否則為 html 字符串，調(diào)用 zepto.fragment 處理。

parent, copyByClone = this.length > 1
if (nodes.length < 1) return this

這里還定義了 parent 變量，用來保存 content 插入的父節(jié)點(diǎn)；當(dāng)集合中元素的數(shù)量大于 1 時(shí)，變量 copyByClone 的值為 true ，這個(gè)變量的作用后面再說。

如果 nodes 的數(shù)量比 1 小，也即需要插入的節(jié)點(diǎn)為空時(shí)，不再作后續(xù)的處理，返回 this ，以便可以進(jìn)行鏈?zhǔn)讲僮鳌?/p> 用 insertBefore 來模擬所有操作

return this.each(function(_, target) {
  parent = inside ? target : target.parentNode

  // convert all methods to a "before" operation
  target = operatorIndex == 0 ? target.nextSibling :
  operatorIndex == 1 ? target.firstChild :
  operatorIndex == 2 ? target :
  null

  var parentInDocument = $.contains(document.documentElement, parent)
  ...
})

對集合進(jìn)行 each 遍歷

parent = inside ? target : target.parentNode

如果 node 節(jié)點(diǎn)需要插入目標(biāo)元素 target 的內(nèi)部，則 parent 設(shè)置為目標(biāo)元素 target，否則設(shè)置為當(dāng)前元素的父元素。

target = operatorIndex == 0 ? target.nextSibling :
  operatorIndex == 1 ? target.firstChild :
  operatorIndex == 2 ? target :
  null

這段是將所有的操作都用 dom 原生方法 insertBefore 來模擬。 如果 operatorIndex == 0 即為 after 時(shí)，node 節(jié)點(diǎn)應(yīng)該插入到目標(biāo)元素 target 的后面，即 target 的下一個(gè)兄弟元素的前面；當(dāng) operatorIndex == 1 即為 prepend 時(shí)，node 節(jié)點(diǎn)應(yīng)該插入到目標(biāo)元素的開頭，即 target 的第一個(gè)子元素的前面；當(dāng) operatorIndex == 2 即為 before 時(shí)，insertBefore 剛好與之對應(yīng)，即為元素本身。當(dāng) insertBefore 的第二個(gè)參數(shù)為 null 時(shí)，insertBefore 會將 node 插入到子節(jié)點(diǎn)的末尾，剛好與 append 對應(yīng)。具體見文檔：Node.insertBefore()

var parentInDocument = $.contains(document.documentElement, parent)

調(diào)用 $.contains 方法，檢測父節(jié)點(diǎn) parent 是否在 document 中。$.contains 方法在《讀zepto源碼之工具函數(shù)》中已有過分析。

nodes.forEach(function(node) {
  if (copyByClone) node = node.cloneNode(true)
  else if (!parent) return $(node).remove()

  parent.insertBefore(node, target)
  ...
})

如果需要復(fù)制節(jié)點(diǎn)時(shí)（即集合元素的數(shù)量大于 1 時(shí)），用 node 節(jié)點(diǎn)方法 cloneNode 來復(fù)制節(jié)點(diǎn)，參數(shù) true 表示要將節(jié)點(diǎn)的子節(jié)點(diǎn)和屬性等信息也一起復(fù)制。為什么集合元素大于 1 時(shí)需要復(fù)制節(jié)點(diǎn)呢？因?yàn)?insertBefore 插入的是節(jié)點(diǎn)的引用，對集合中所有元素的遍歷操作，如果不克隆節(jié)點(diǎn)，每個(gè)元素所插入的引用都是一樣的，最后只會將節(jié)點(diǎn)插入到最后一個(gè)元素中。

如果父節(jié)點(diǎn)不存在，則將 node 刪除，不再進(jìn)行后續(xù)操作。

將節(jié)點(diǎn)用 insertBefore 方法插入到元素中。

if (parentInDocument) traverseNode(node, function(el) {
  if (el.nodeName != null && el.nodeName.toUpperCase() === "SCRIPT" &&
      (!el.type || el.type === "text/javascript") && !el.src) {
    var target = el.ownerDocument ? el.ownerDocument.defaultView : window
    target["eval"].call(target, el.innerHTML)
  }
})

如果父元素在 document 內(nèi)，則調(diào)用 traverseNode 來處理 node 節(jié)點(diǎn)及 node 節(jié)點(diǎn)的所有子節(jié)點(diǎn)。主要是檢測 node 節(jié)點(diǎn)或其子節(jié)點(diǎn)是否為不指向外部腳本的 script 標(biāo)簽。

el.nodeName != null && el.nodeName.toUpperCase() === "SCRIPT"

這段用來判斷是否為 script 標(biāo)簽，通過 node 的 nodeName 屬性是否為 script 來判斷。

!el.type || el.type === "text/javascript"

不存在 type 屬性，或者 type 屬性為 "text/javascript"。這里表示只處理 javascript，因?yàn)?type 屬性不一定指定為 text/javascript ，只有指定為 test/javascript 或者為空時(shí)，才會按照 javascript 來處理。見MDN文檔

最后，所有文章都會同步發(fā)送到微信公眾號上，歡迎關(guān)注,歡迎提意見：

作者：對角另一面