snabbdom 源码分析

import { h, patch } from 'snabbdom'

// 最初始的 dom 容器
const container = document.getElementById('container')
// 替换的容器
function createVNodeframe(list) {
    return h(
        'div',
        {
            id: 'container'
        },
        [
            h(
                'ul',
                {
                    id: 'footer',
                    className: 'hello hi',
                    style: {
                        color: '#666'
                    }
                },
                list
            )
        ]
    )
}
// 动态生成列表
function getList(count) {
    return Array.apply(null, { length: count })
            .map((v, i) => i + 1)
            .map(n => h(
                'li',
                {
                    className: 'item',
                    key: n
                },
                `number is ${n}`
            ))
}

// 生成vnode1
const vnode1 = createVNodeframe(getList(3))
// 生成vnode2
const vnode2 = createVNodeframe(getList(10))

patch(container, vnode1)
setTimeout(() => {
    patch(vnode1, vnode2) // 2秒之后列表从 3 个变成 10 个
}, 2000)

function h(type, config, ...children) {

    // 获取 key，填充 props 对象，此处省略

    // 生成vnode
    return vnode(
        type,
        key,
        props,
        flattenArray(children).map(c => {
            return isPrimitive(c) /* 子节点为数字或者字符串，则映射成文本节点 */
                ? vnode(undefined, undefined, undefined, undefined, c)
                : c
        })
    )
}

export default function init(modules = [], domApi) {

    // 从 modules 初始化 hooks ，并挂载到 cbs 生命周期钩子集合上

    // 为实际 dom 创建 vnode
    function emptyNodeAt(elm) {...}

    // 创建 remove 回调函数
    function createRmCb(childElm, listeners) {...}

    // 为 vnode（tree） 实际创建 dom（未插入文档）
    function createElm(vnode, insertedVnodeQueue) {...}

    // 对 vnode 及其 children 递归执行 destroy hook
    function invokeDestroyHook(vnode) {...}

    // 从 parent dom 删除 vnode 数组对应的 dom
    function removeVnodes(parentElm, vnodes, startIdx, endIdx) {...}

    // 添加 vnode 数组对应的 dom 到 parent dom
    function addVnodes(parentElm, before, vnodes, startIdx, endIdx, insertedVnodeQueue) {...}

    // 比较新旧 children 并更新
    function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) {...}

    // patch oldVnode 和 vnode （它们是相同的 vnode）
    // 1. 更新本身对应 dom 的 textContent/children/其它属性；
    // 2. 根据 children 的变化去决定是否递归 patch children 里的每个 vnode。
    function patchVnode(oldVnode, vnode, insertedVnodeQueue) {...}

    return function patch(oldVnode, vnode) {...}
}

return function patch(oldVnode, vnode) {
    let elm, parent
    const insertedVnodeQueue = []
    let i
    // 调用 pre hook
    for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]()

    // 如果 oldVnode 不是 vnode（即是 dom），创建 vnode
    if (!isVnode(oldVnode)) {
        oldVnode = emptyNodeAt(oldVnode)
    }

    // 如果 oldVnode 和 vnode 是相同的 vnode，执行 patch
    if (isSameVnode(oldVnode, vnode)) {
        patchVnode(oldVnode, vnode, insertedVnodeQueue)
    }
    // 否则，直接把 oldVnode 替换为 vnode
    else {
        elm = oldVnode.elm
        parent = api.parentNode(elm)

        // createElm 接口直接处理 vnode.elm ，但此时 vnode.elm 并没有插入到真实文档片段中
        createElm(vnode, insertedVnodeQueue)

        // 如果原 vnode 有 parent，那么插入新 vnode 对应的 dom，删除原 dom
        if (parent !== null) {
            api.insertBefore(parent, vnode.elm, api.nextSibling(elm))
            removeVnodes(parent, [oldVnode], 0, 0)
        }
    }

    // 调用 insert hook。
    for (i = 0; i < insertedVnodeQueue.length; ++i) {
        // 为什么不用判断 insert 是否存在？
        // 因为填充 insertedVnodeQueue 时已判断
        insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i])
    }
    // 调用 post hook
    for (i = 0; i < cbs.post.length; ++i) cbs.post[i]()
    return vnode
}

// 为 vnode（tree） 实际创建 dom（未插入文档）
function createElm(vnode, insertedVnodeQueue) {
    // 节点属性
    let data = vnode.data
    let i
    if (data) {
        // 调用 init hook
        if (data.hook && (i = data.hook.init)) {
            i(vnode)
            // data 可能在 init hook 中被改变，重新获取。
            data = vnode.data
        }
    } else {
        data = {}
    }

    // 节点子节点
    let children = vnode.children
    // 节点类型
    let type = vnode.type

    // 处理 type 为注释的节点
    if (type === 'comment') {
        if (vnode.text == null) {
            vnode.text = ''
        }
        vnode.elm = api.createComment(vnode.text)
    }
    // 处理其它 type 的节点
    else if (type) {
        const elm = vnode.elm = data.ns
            ? api.createElementNS(data.ns, type)
            : api.createElement(type)

        // 调用 create hook
        for (let i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode)

        // 分别处理 children 和 text
        // 这里隐含一个逻辑：vnode 的 children 和 text 不会／应该同时存在。
        if (isArray(children) /* 此时 vnode.text 应该为 undefined */ ) {
            // 递归 children，保证 vnode tree 中每个 vnode 都有自己对应的 dom；
            // 即构建 vnode tree 对应的 dom tree
            children.forEach(ch => {
                ch && api.appendChild(elm, createElm(ch, insertedVnodeQueue))
            })
        }
        else if (isPrimitive(vnode.text)) {
            api.appendChild(elm, api.createTextNode(vnode.text))
        }
        // 调用 create hook
        // 为 insert hook 填充 insertedVnodeQueue
        i = vnode.data.hook
        if (i) {
            i.create && i.create(emptyNode, vnode)
            i.insert && insertedVnodeQueue.push(vnode)
        }
    }
    // 处理文本节点
    else {
        vnode.elm = api.createTextNode(vnode.text)
    }

    // 最终返回根节点上挂载的真实dom
    return vnode.elm
}

function patchVnode(oldVnode, vnode, insertedVnodeQueue) {
    // 因为 vnode 和 oldVnode 是相同的 vnode，可以复用 oldVnode.elm
    const elm = vnode.elm = oldVnode.elm
    let oldCh = oldVnode.children
    let ch = vnode.children

    // 如果 oldVnode 和 vnode 是同一个，说明无需更新，直接返回。
    if (oldVnode === vnode) return

    // 如果 vnode.text 是 undefined
    if (vnode.text === undefined) {
        // 1. 新旧节点同时存在子节点，比较 old children 和 new children，并更新
        if (oldCh && ch) {
            // ...
        }
        // 2. 旧的VNode不存在子节点，新的VNode存在，添加新 children
        else if (ch) {
            // ...
        }
        // 3. 新的VNode不存在子节点，旧的VNode存在，删除 children。
        else if (oldCh) {
            // ...
        }
        // 4. 新的VNode不存在文本，旧的存在，删除。
        else if (oldVnode.text) {
            // ...
        }
    }
    // 5. 新的VNode的子节点只存在文本，且与旧的VNode的不同，则更新文本
    else if (oldVnode.text !== vnode.text) {
        // ...
    }
}

function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) {
    let oldStartIdx = 0, newStartIdx = 0
    let oldEndIdx = oldCh.length - 1
    let oldStartVnode = oldCh[0]
    let oldEndVnode = oldCh[oldEndIdx]
    let newEndIdx = newCh.length - 1
    let newStartVnode = newCh[0]
    let newEndVnode = newCh[newEndIdx]
    let oldKeyToIdx
    let idxInOld
    let elmToMove
    let before

    // 遍历 oldCh 和 newCh 来比较和更新
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
        // 1⃣️ 首先检查 4 种情况，保证 oldStart/oldEnd/newStart/newEnd
        // 这 4 个 vnode 非空，左侧的 vnode 为空就右移下标，右侧的 vnode 为空就左移 下标。
        if (oldStartVnode == null) {
            oldStartVnode = oldCh[++oldStartIdx]
        } else if (oldEndVnode == null) {
            oldEndVnode = oldCh[--oldEndIdx]
        } else if (newStartVnode == null) {
            newStartVnode = newCh[++newStartIdx]
        } else if (newEndVnode == null) {
            newEndVnode = newCh[--newEndIdx]
        }
        /**
         * 2⃣️ 然后 oldStartVnode/oldEndVnode/newStartVnode/newEndVnode 两两比较，
         * 对有相同 vnode 的 4 种情况执行对应的 patch 逻辑。
         * - 如果同 start 或同 end 的两个 vnode 是相同的（情况 1 和 2），
         *   说明不用移动实际 dom，直接更新 dom 属性／children 即可；
         * - 如果 start 和 end 两个 vnode 相同（情况 3 和 4），
         *   那说明发生了 vnode 的移动，同理我们也要移动 dom。
         */
        // 1. 如果 oldStartVnode 和 newStartVnode 相同（key相同），执行 patch
        else if (isSameVnode(oldStartVnode, newStartVnode)) {
            // 不需要移动 dom
            patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
            oldStartVnode = oldCh[++oldStartIdx]
            newStartVnode = newCh[++newStartIdx]
        }
        // 2. 如果 oldEndVnode 和 newEndVnode 相同，执行 patch
        else if (isSameVnode(oldEndVnode, newEndVnode)) {
            // 不需要移动 dom
            patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
            oldEndVnode = oldCh[--oldEndIdx]
            newEndVnode = newCh[--newEndIdx]
        }
        // 3. 如果 oldStartVnode 和 newEndVnode 相同，执行 patch
        else if (isSameVnode(oldStartVnode, newEndVnode)) {
            patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
            // 把获得更新后的 (oldStartVnode/newEndVnode) 的 dom 右移，移动到
            // oldEndVnode 对应的 dom 的右边。为什么这么右移？
            // （1）oldStartVnode 和 newEndVnode 相同，显然是 vnode 右移了。
            // （2）若 while 循环刚开始，那移到 oldEndVnode.elm 右边就是最右边，是合理的；
            // （3）若循环不是刚开始，因为比较过程是两头向中间，那么两头的 dom 的位置已经是
            //     合理的了，移动到 oldEndVnode.elm 右边是正确的位置；
            // （4）记住，oldVnode 和 vnode 是相同的才 patch，且 oldVnode 自己对应的 dom
            //     总是已经存在的，vnode 的 dom 是不存在的，直接复用 oldVnode 对应的 dom。
            api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm))
            oldStartVnode = oldCh[++oldStartIdx]
            newEndVnode = newCh[--newEndIdx]
        }
        // 4. 如果 oldEndVnode 和 newStartVnode 相同，执行 patch
        else if (isSameVnode(oldEndVnode, newStartVnode)) {
            patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
            // 这里是左移更新后的 dom，原因参考上面的右移。
            api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
            oldEndVnode = oldCh[--oldEndIdx]
            newStartVnode = newCh[++newStartIdx]
        }

        // 3⃣️ 最后一种情况：4 个 vnode 都不相同，那么我们就要
        // 1. 从 oldCh 数组建立 key --> index 的 map。
        // 2. 只处理 newStartVnode （简化逻辑，有循环我们最终还是会处理到所有 vnode），
        //    以它的 key 从上面的 map 里拿到 index；
        // 3. 如果 index 存在，那么说明有对应的 old vnode，patch 就好了；
        // 4. 如果 index 不存在，那么说明 newStartVnode 是全新的 vnode，直接
        //    创建对应的 dom 并插入。
        else {
            // 如果 oldKeyToIdx 不存在，创建 old children 中 vnode 的 key 到 index 的
            // 映射，方便我们之后通过 key 去拿下标。
            if (oldKeyToIdx === undefined) {
                oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
            }
            // 尝试通过 newStartVnode 的 key 去拿下标
            idxInOld = oldKeyToIdx[newStartVnode.key]
            // 下标不存在，说明 newStartVnode 是全新的 vnode。
            if (idxInOld == null) {
                // 那么为 newStartVnode 创建 dom 并插入到 oldStartVnode.elm 的前面。
                api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm)
                newStartVnode = newCh[++newStartIdx]
            }
            // 下标存在，说明 old children 中有相同 key 的 vnode，
            else {
                elmToMove = oldCh[idxInOld]
                // 如果 type 不同，没办法，只能创建新 dom；
                if (elmToMove.type !== newStartVnode.type) {
                    api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm)
                }
                // type 相同（且key相同），那么说明是相同的 vnode，执行 patch。
                else {
                    patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
                    oldCh[idxInOld] = undefined
                    api.insertBefore(parentElm, elmToMove.elm, oldStartVnode.elm)
                }
                newStartVnode = newCh[++newStartIdx]
            }
        }
    }

    // 上面的循环结束后（循环条件有两个），处理可能的未处理到的 vnode。
    // 如果是 new vnodes 里有未处理的（oldStartIdx > oldEndIdx
    // 说明 old vnodes 先处理完毕）
    if (oldStartIdx > oldEndIdx) {
        before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm
        addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
    }
    // 相反，如果 old vnodes 有未处理的，删除 （为处理 vnodes 对应的） 多余的 dom。
    else if (newStartIdx > newEndIdx) {
        removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
    }
}

/**
 * snabbdom 提供的生命周期
 */
const hooks = [
    pre?: PreHook; /*               patch 流程开始 */
    init?: InitHook; /*             一个新的 VNode 被创建 */
    create?: CreateHook; /*         VNode 上一个新的真实DOM被创建 */
    insert?: InsertHook; /*         更新后的DOM节点被挂载到根节点（真实情况是在patch的过程中收集insert回调，待一次更新后统一执行） */
    prepatch?: PrePatchHook; /*     patchVnode 流程开始 */
    update?: UpdateHook; /*         patchVnode 的过程中若 vnode.data 不为空，则触发该钩子更新 data */
    postpatch?: PostPatchHook; /*   patchVnode 流程结束 */
    destroy?: DestroyHook; /*       一个 DOM 被直接或间接移除 */
    remove?: RemoveHook; /*         一个 DOM 被直接移除 */
    post?: PostHook; /*             patch 流程结束 */
];

modules: [
    {
        create: updateClassName,
        update: updateClassName
    },
    {
        create: updateStyle,
        update: updateStyle
    },
    ...
]
🔽🔽🔽🔽 聚合 🔽🔽🔽🔽
cbs: {
    create: [
        updateClassName, updateStyle
    ],
    update: [
        updateClassName, updateStyle
    ]
}