WEEX H5 Render 解读（12）之vdom续2

1.insertBefore

我们看一下Element的insertBefore方法。
Element.prototype.insertBefore = function (node, before) {}方法有两个参数

if (node.parentNode && node.parentNode !== this) {
  return
}

这句话说明参数的node节点，若不是新节点（没有父元素）且node的父节点不等于调用这个函数的节点，则返回。

if (node === before || node.nextSibling === before) {
  return
}

这是判断node与 before节点是否相等或者node节点本来就在before之前。

if (!node.parentNode) {
    linkParent(node, this)
    insertIndex(node, this.children, this.children.indexOf(before), true)
    if (this.docId) {
      registerNode(this.docId, node)
    }
    if (node.nodeType === 1) {
      const pureBefore = nextElement(before)
      const index = insertIndex(
        node,
        this.pureChildren,
        pureBefore
          ? this.pureChildren.indexOf(pureBefore)
          : this.pureChildren.length
      )
      if (this.docId) {
        const listener = instanceMap[this.docId].listener
        return listener.addElement(node, this.ref, index)
      }
    }
  }

如果node为新节点，则为node节点绑定父节点。并且注册docid，
然后把node插入到pureChildren集合中，并触发增加元素事件。

在这个函数里，如果node已经在父节点中存在，则调整在元素子节点集合的索引值
下面我们看代码：

else {
    moveIndex(node, this.children, this.children.indexOf(before), true)
    if (node.nodeType === 1) {
      const pureBefore = nextElement(before)
      const index = moveIndex(
        node,
        this.pureChildren,
        pureBefore
          ? this.pureChildren.indexOf(pureBefore)
          : this.pureChildren.length
      )
      if (this.docId && index >= 0) {
        const listener = instanceMap[this.docId].listener
        return listener.moveElement(node.ref, this.ref, index)
      }
    }
  }

但是如果node节点不是调用此方法的节点的子节点，则不会被调整。

2.insertAfter

这个函数与insertBefore函数区别不大，只是改变了下插入的位置

if (node === after || node.previousSibling === after) {
    return
  }
...
insertIndex(node, this.children, this.children.indexOf(after) + 1, true)
...
 const index = insertIndex(
        node,
        this.pureChildren,
        this.pureChildren.indexOf(previousElement(after)) + 1
      )

3.moveIndex

主要是用来调整集合中的原素的位置，及左右相邻节点的关系。

function moveIndex (target, list, newIndex, changeSibling) {
  const index = list.indexOf(target)
  if (index < 0) {
    return -1
  }
  if (changeSibling) {
    const before = list[index - 1]
    const after = list[index + 1]
    before && (before.nextSibling = after)
    after && (after.previousSibling = before)
  }
  list.splice(index, 1)
  let newIndexAfter = newIndex
  if (index <= newIndex) {
    newIndexAfter = newIndex - 1
  }
  const beforeNew = list[newIndexAfter - 1]
  const afterNew = list[newIndexAfter]
  list.splice(newIndexAfter, 0, target)
  if (changeSibling) {
    beforeNew && (beforeNew.nextSibling = target)
    target.previousSibling = beforeNew
    target.nextSibling = afterNew
    afterNew && (afterNew.previousSibling = target)
  }
  if (index === newIndexAfter) {
    return -1
  }
  return newIndex
}

上面我们可以看到，首先调整node旧的邻居关系，并且从集合中删除。接下来就是构造新的邻邻居关系，并且重新插入到集合中。

4.removeIndex

function removeIndex (target, list, changeSibling) {
  const index = list.indexOf(target)
  if (index < 0) {
    return
  }
  if (changeSibling) {
    const before = list[index - 1]
    const after = list[index + 1]
    before && (before.nextSibling = after)
    after && (after.previousSibling = before)
  }
  list.splice(index, 1)
}

我们可以看到，他仍然是先调整邻居关系，然后从集合中删除。

5.linkParent

用来连接子节点和父节点之间关系的函数

function linkParent (node, parent) {
  node.parentNode = parent
  if (parent.docId) {
    node.docId = parent.docId
    node.ownerDocument = parent.ownerDocument
    node.ownerDocument.nodeMap[node.nodeId] = node
    node.depth = parent.depth + 1
  }
  node.children.forEach(child => {
    linkParent(child, node)
  })
}

首先 把node的节点的相关参数设为与父节点一致，然后再设置node的子节点与node一致。

---

下次我们将利用图进行演示vdom的相关理论，以加深理解。