1.insertBefore
我們看一下Element的insertBefore方法。
<code>Element.prototype.insertBefore = function (node, before) {}</code>方法有兩個(gè)參數(shù)
if (node.parentNode && node.parentNode !== this) {
return
}
這句話說(shuō)明參數(shù)的node節(jié)點(diǎn)，若不是新節(jié)點(diǎn)（沒(méi)有父元素）且node的父節(jié)點(diǎn)不等于調(diào)用這個(gè)函數(shù)的節(jié)點(diǎn)，則返回。
if (node === before || node.nextSibling === before) {
return
}
這是判斷node與 before節(jié)點(diǎn)是否相等或者node節(jié)點(diǎn)本來(lái)就在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為新節(jié)點(diǎn)，則為node節(jié)點(diǎn)綁定父節(jié)點(diǎn)。并且注冊(cè)docid，
然后把node插入到pureChildren集合中，并觸發(fā)增加元素事件。
在這個(gè)函數(shù)里，如果node已經(jīng)在父節(jié)點(diǎn)中存在，則調(diào)整在元素子節(jié)點(diǎn)集合的索引值
下面我們看代碼：
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節(jié)點(diǎn)不是調(diào)用此方法的節(jié)點(diǎn)的子節(jié)點(diǎn)，則不會(huì)被調(diào)整。
2.insertAfter
這個(gè)函數(shù)與insertBefore函數(shù)區(qū)別不大，只是改變了下插入的位置
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
主要是用來(lái)調(diào)整集合中的原素的位置，及左右相鄰節(jié)點(diǎn)的關(guān)系。
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
}
上面我們可以看到，首先調(diào)整node舊的鄰居關(guān)系，并且從集合中刪除。接下來(lái)就是構(gòu)造新的鄰鄰居關(guān)系，并且重新插入到集合中。
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)
}
我們可以看到，他仍然是先調(diào)整鄰居關(guān)系，然后從集合中刪除。
5.linkParent
用來(lái)連接子節(jié)點(diǎn)和父節(jié)點(diǎn)之間關(guān)系的函數(shù)
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的節(jié)點(diǎn)的相關(guān)參數(shù)設(shè)為與父節(jié)點(diǎn)一致，然后再設(shè)置node的子節(jié)點(diǎn)與node一致。
下次我們將利用圖進(jìn)行演示vdom的相關(guān)理論，以加深理解。
