hexiaokang / blog Goto Github PK

// 定义解析状态
const PARSE_STATUS = {
    INITIAL: 1,
    TAG_OPEN: 2,
    TAG_NAME: 3,
    TEXT: 4,
    TAG_END: 5,
    TAG_END_NAME: 6
}
// 判断是否字母
function isAlpha(str) {
    return str >= 'a' && str <= 'z' || str >= 'A' && str <= 'Z'
}
function tmpTokenize(tmpStr) {
    let currentState = PARSE_STATUS.INITIAL
    let chars = []
    const tokens = []
    function handleStr(str) {
        chars.push(str) // 拼接标签或文本
        tmpStr = tmpStr.slice(str.length) // 模板字符串中去除已处理的字符
    }
    while (tmpStr) {
        const char = tmpStr[0]
        switch (currentState) {
            case PARSE_STATUS.INITIAL:
                if (char === '<') {
                    currentState = PARSE_STATUS.TAG_OPEN
                    tmpStr = tmpStr.slice(1)
                } else if (isAlpha(char)) {
                    currentState = PARSE_STATUS.TEXT
                    handleStr(char)
                }
                break
            case PARSE_STATUS.TAG_OPEN:
                if (isAlpha(char)) {
                    currentState = PARSE_STATUS.TAG_NAME
                    handleStr(char)
                } else if (char === '/') {
                    currentState = PARSE_STATUS.TAG_END
                    tmpStr = tmpStr.slice(1)
                }
                break
            case PARSE_STATUS.TAG_NAME:
                if (isAlpha(char)) {
                    handleStr(char)
                } else if (char === '>') {
                    currentState = PARSE_STATUS.INITIAL
                    tokens.push({
                        type: 'tag',
                        name: chars.join('')
                    })
                    chars = []
                    tmpStr = tmpStr.slice(1)
                }
                break
            case PARSE_STATUS.TEXT:
                if (isAlpha(char)) {
                    handleStr(char)
                } else if (char === '<') {
                    currentState = PARSE_STATUS.TAG_OPEN
                    tokens.push({
                        type: 'text',
                        content: chars.join('')
                    })
                    chars = []
                    tmpStr = tmpStr.slice(1)
                }
                break
            case PARSE_STATUS.TAG_END:
                if (isAlpha(char)) {
                    currentState = PARSE_STATUS.TAG_END_NAME
                    handleStr(char)
                }
                break
            case PARSE_STATUS.TAG_END_NAME:
                if (isAlpha(char)) {
                    handleStr(char)
                } else if (char === '>') {
                    currentState = PARSE_STATUS.INITIAL
                    tokens.push({
                        type: 'tagEnd',
                        name: chars.join('')
                    })
                    chars = []
                    tmpStr = tmpStr.slice(1)
                }
                break
        }
    }
    return tokens
}

function parse(tmpStr) {
    const tokens = tmpTokenize(tmpStr)
    const root = {
        type: 'Root',
        children: []
    }
    const elementStack = [root] // 暂时存储父节点
    while (tokens.length) {
        const parent = elementStack[elementStack.length - 1]
        const token = tokens[0]
        switch (token.type) {
            case 'tag':
                const elementNode = {
                    type: 'Element',
                    tag: token.name,
                    children: []
                }
                parent.children.push(elementNode) // 设置节点位置
                elementStack.push(elementNode) // 父节点推入栈顶
                break
            case 'text':
                const textNode = {
                    type: 'Text',
                    content: token.content
                }
                parent.children.push(textNode)
                break
            case 'tagEnd':
                elementStack.pop()
                break
        }
        tokens.shift() // 移除已处理的token
    }
    return root
}

const TextModes = {
    DATA: 'DATA',
    RCDATA: 'RCDATA',
    RAWTEXT: 'RAWTEXT',
    CDATA: 'CDATA'
}
function parse(tmpStr) {
    // 上下文对象
    const context = {
        source: tmpStr,
        mode: TextModes.DATA
    }
    // parseChildren用于解析子节点，第一个参数传入上下文对象
    // 第二个参数是一个数组，用于存储父节点，后续会有重要作用
    const nodes = parseChildren(context, [])
    return {
        // 设置最外层为根节点
        type: 'Root',
        children: nodes
    }
}

function parseChildren(context = {}, ancestors = []) {
    let nodes = []
    const { source, mode } = context
    while (!isEnd(context, ancestors)) {
        let node = null
        if(mode === TextModes.DATA || mode === TextModes.RCDATA) {
            if(mode === TextModes.DATA && source[0] === '<') {
                if(source[1] === '!') {
                    if(source.startWith('<!--')) {
                        // 解析注释
                        node = parseComment(context)
                    } else if(source.startsWith('<!DOCTYPE')) {
                        // 解析文档声明
                        node = parseBogusComment(context)
                    } else if(source.startsWith('<![CDATA[')) {
                        // CDATA
                        node = parseCDATA(context, ancestors)
                    } else {
                        node = parseBogusComment(context)
                    }
                } else if(source[1] === '/') {
                    // 抛出错误，因为</这种为结束标签，不可能先遇到</
                } else if(/[a-z]/i.test(source[1])) {
                    // 解析标签
                    node = parseElement(context, ancestors)
                }
            } else if(source.startsWith('{{')) {
                // 解析动态插值
                node = parseInterpolation(context)
            }
        }
        if(!node) {
            // 解析文本
            node = parseText(context)
        }
        nodes.push(node)
    }
    return nodes
}

function parseElement(context, ancestors = []) {
    // 解析开始标签
    const element = parseTag(context)
    if(element.isSelfClosing) {
        return element
    }
    // 依据不同标签设置不同解析模式
    if(['textarea', 'title'].includes(element.tag)) {
        context.mode = TextModes.RCDATA
    } else if (/style|xmp|iframe|noembed|noframes|noscript/.test(element.tag)) {
        context.mode = TextModes.RAWTEXT
    } else {
        context.mode = TextModes.DATA
    }
    // 将开始标签推入栈顶
    ancestors.push(element)
    // 递归调用parseChildren解析子节点
    element.children = parseChildren(context, ancestors)
    if(context.source.startsWith(`</${element.tag}`)) {
        // 解析结束标签
        parseTag(context, 'end')
    } else {
        // 抛出错误
        throw `${element.tag}缺少闭合标签`
    }
}

function parseTag(context, type = 'start') {
    const { advanceBy, advanceSpaces } = context
    const match = type === 'start' ? /^<([a-z][^\t\r\n\f />]*)/i.exec(context.source) : /^<\/([a-z][^\t\r\n\f />]*)/i.exec(context.source)
    const tag = match[1]
    // 在原模板字符串上移除已处理的字符,比如 <div
    advanceBy(match[0].length)
    // 移除标签中可能存在的空格 比如<div   >
    advanceSpaces()
    // 解析属性
    let props = parseAttributes(context, type)
    const isSelfClosing = context.source.startsWith('/>')
    advanceBy(isSelfClosing ? 2 : 1)
    // 返回标签节点
    return {
        type: 'Element',
        tag,
        props,
        children: [],
        isSelfClosing
    }
}

function parseAttributes(context) {
    const { advanceBy, advanceSpaces } = context
    const props = []
    while (
        context.source.length > 0 &&
        !context.source.startsWith('>') &&
        !context.source.startsWith('/>')
    ) {
        // 匹配属性名
        const match = /^[^\t\r\n\f />][^\t\r\n\f />=]*/.exec(context.source)
        const name = match[0]
        advanceBy(name.length)
        advanceSpaces()
        advanceBy(1)
        advanceSpaces()
        let value = ''
        const quote = context.source[0]
        // 考虑属性值是单引号、双引号、无引号三种情况
        const isQuote = quote === "'" || quote === '"'
        if(isQuote) {
            advanceBy(1)
            const endQuoteEndIndex = context.source.indexOf(quote)
            if(endQuoteEndIndex > -1) {
                // 属性值获取
                value = context.source.slice(0, endQuoteEndIndex)
                advanceBy(value.length + 1)
            } else {
                // 抛出错误，缺少引号
            }
        } else {
            // 无引号包裹属性值，则一直到下一个空白字符位置都是属性值
            const match = /^[^\t\r\n\f >]+/.exec(context.source)
            value = match[0]
            advanceBy(value.length)
        }
        advanceSpaces()
        props.push({
            type: 'Attribute',
            name,
            value
        })
    }
    return props
}

function parseInterpolation(context = {}) {
    context.advanceBy(2)
    const closeIndex = context.source.indexOf('}}')
    if(closeIndex === -1) {
        // 抛出错误，缺少闭合定界符'}}'
    }
    const content = context.source.splice(0, closeIndex)
    context.advanceBy(content.length + 2)
    return {
        type: 'Interpolation',
        content: {
            type: 'Expression',
            // content需要经过解码
            content: decodeHtml(content)
        }
    }
}

const tmpAst = {
  type: 'Root',
  children: [
    {
       type: 'Element',
       tag: 'div',
       children: [
         { type: 'Text', content: 'Hi' }
       ]
    }
  ]
}

const jsAst = {
    type: 'FunctionDecl',
    id: {
        type: 'Identifier',
        name: 'render'
    },
    params: [],
    body: [
        {
            type: 'ReturnStatement',
            return: {
                type: 'CallExpression',
                callee: { type: 'Identifier', name: 'h' }
            },
            arguments: [
                { type: 'StringLiteral', value: 'div' },
                { type: 'StringLiteral', value: 'Hi' }
            ]
        }
    ]
}

const FunctionDeclNode = {
    type: 'FunctionDecl',
    id: { type: 'Identifier', name: 'render' },
    params: [],
    body: [{
         // body中可能含有多条语句，所以也是一个数组
        type: 'ResultStatement',
        return: null
    }]
}

function transform(tmpAst) {
    const context = {
        currentNode: '',
        childIndex: '',
        parent: '',
        nodeTransforms: [
            transformElement,
            transformText
        ]
    }
    traverseNode(tmpAst, context);
}

function traverseNode(node, context) {
    context.currentNode = node
    const { nodeTransforms } = context
    const exitFns = []
    for(let i = 0; i < nodeTransforms.length; i++) {
        // nodeTransforms中的转换函数可以返回一个回调函数，供处理父节点的退出阶段调用
        const onExit = nodeTransforms[i](node, context)
        if(onExit) {
            exitFns.push(onExit)
        }
    }
    const children = context.currentNode.children
    if(children && children.length > 0) {
        for(let i = 0; i < children.length; i++) {
            context.parent = context.currentNode
            context.childIndex = i
            traverseNode(children[i], context)
        }
    }
    let i = exitFns.length
    // 执行退出阶段的回调
    while (i--) {
        exitFns[i]()
    }
}

function transformElement(node) {
    return () => {
        // createCallExpression函数用来创建`h('div', [])`语句
        const callExp = createCallExpression('h', [
            createStringLiteral(node.tag)
        ])
        node.children.length === 1 ? callExp.arguments.push(node.children[0].codegenNode) :
            callExp.arguments.push(
                // 当前父节点存在多个子节点
                createArrayExpression(node.children.map(ch => ch.codegenNode))
            )
        // 模板AST 节点对应的JavaScript AST存放在codegenNode属性中
        node.codegenNode = callExp
    }
}

function createCallExpression(callee, args) {
    return {
        type: 'CallExpression',
        callee: createIdentifier(callee),
        arguments: args
    }
}

function transformRoot(node) {
    return () => {
        if(node.type !== 'Root') { return }
        const codegenNode = node.children[0].codegenNode
        node.codegenNode = {
            type: 'FunctionDecl',
            id: { type: 'Identifier', name: 'render' },
            params: [],
            body: [
                { type: 'ReturnStatement', return: codegenNode }
            ]
        }
    }
}

function generate(node) {
    const context = {
        code: '', // 存储最终生成的JS代码
        push(code) {
            // 拼接代码
            context.code += code
        },
        currentIndent: 0, // 控制缩进
        newLine() {
            context.code += '\n' + ` `.repeat(context.currentIndent)
        },
        indent() {
            context.currentIndent++
            context.newLine()
        },
        deIndent() {
            context.currentIndent--
            context.newLine()
        }
    }
    // 递归调用，生成JS代码
    genNode(node, context)
    return context.code
}

function genNode(node, context) {
    switch (node.type) {
        case 'FunctionDecl':
            genFunctionDecl(node, context)
            break
        case 'ReturnStatement':
            genReturnStatement(node, context)
            break
        case 'CallExpression':
            genCallExpression(node, context)
            break
        case 'StringLiteral':
            genStringLiteral(node, context)
            break
        case 'ArrayExpression':
            genArrayExpression(node, context)
            break
    }
}

const vNode = {
    type: 'div',
    props: {},
    children: ['Hi']
}

function createRenderer(options = {}) {
    const { createElement, insert, setElementText, patchProps } = options
    // 渲染入口
    function render(vnode, container) {
        if(vnode) {
            // 挂载 或 更新
            patch(container._vnode, vnode, container)
        } else {
            // 卸载
            unmount(container._vnode)
        }
        // 绑定vnode
        container._vnode = vnode
    }
    // 比较新旧node, n1为旧node，n2为新node
    function patch(n1, n2, container) {
        if(n1 && n1.type !== n2.type) {
            // 优先比较节点类型是否一致，不同则卸载旧node
            unmount(n1)
            n1 = null
        }
        if(!n1) {
            // 挂载
            mountedElement(n2, container)
        } else {
            // 更新
            patchElement(n1, n2)
        }
    }
    // 挂载节点
    function mountedElement(vnode, container) {
        const el = vnode.el = createElement(vnode.type)
        if(vnode.props) {
            for(let key in vnode.props) {
                // 设置属性
                patchProps(el, key, null, vnode.props[key])
            }
        }
        if(typeof vnode.children === 'string') {
            setElementText(el, vnode.children)
        } else if (Array.isArray(vnode.children)) {
            vnode.children.forEach(c => patch(null, c, container))
        } else {
            // 其他节点情况
        }
        insert(el, container)
    }
    return {
        render
    }
}

function patchChildren(n1, n2, container) {
    const { children } = n2
    if(typeof children === 'string') {
        if(Array.isArray(n1.children)) {
            n1.children.forEach(ch => unmount(ch))
        }
        setElementText(container, children)
    } else if (Array.isArray(children)) {
        if(Array.isArray(n1.children)) {
            n1.children.forEach(ch => unmount(ch))
            // 新旧子节点都是list，DIff算法优化
        } else {
            if(typeof n1.children === 'string') {
                setElementText(container, '')           
            }
            n2.children.forEach(ch => patch(null, ch, container))
        }
    } else {
        if(Array.isArray(n1.children)) {
            n1.children.forEach(ch => unmount(ch))
        } else if(typeof n1.children === 'string') {
            setElementText(container, '')
        }
    }
}

function patchProps(el, key, prevValue, nextValue) {
    function shouldSetAsProps(el, key, value) {
        if(key === 'form' && el.tagName === 'INPUT') return false
        return key in el
    }
    if(shouldSetAsProps(el, key, nextValue)) {
        const type = typeof el[key]
        if(key === 'class') {
            el.className = nextValue || ''
        } else if(type === 'boolean' && nextValue === '') {
            el[key] === true
        } else {
            el[key] = nextValue
        }
    } else {
        el.setAttribute(key, nextValue)
    }
}

function patchProps(el, key, prevValue, nextValue) {
    // 省略上面已讲解过的代码
    if(/^on/.test(key)) {
        const invokers = el._vei || (el._vei = {})
        let invoker = invokers[key]
        const name = key.slice(2).toLowerCase()
        if(nextValue) {
            if(!invoker) {
                invoker = el._vei[key] = (e) => {
                    // 判断当前函数执行时间必须大于绑定时间点
                    // 以防父元素事件在子元素事件冒泡阶段绑定而触发的异常情况
                    if(e.timeStamp < invoker.attached) return
                    // 一个事件可绑定多个函数，props中传入数组即可
                    if(Array.isArray(invoker.value)) {
                        invoker.value.forEach(fn => fn(e))
                    } else {
                        invoker.value(e)
                    }
                }
                invoker.value = nextValue
                invoker.attached = performance.now()
                el.addEventListener(name, invoker)
            } else {
                invoker.value = nextValue
            }
        } else {
            el.removeEventListener(name, invoker)
        }
    }
}

function patchChildren(n1, n2, container) {
    if(typeof n2.children === 'string') {
        // 处理文本节点
    } else if(Array.isArray(n2.children)) {
        const oldChildren = n1.children
        const newChildren = n2.children
       // 记录最大索引值
       // 原理: 遍历新旧列表时，如果节点在旧列表中对应的索引值是呈递增趋势，则位置不变，反之则需要移动位置来保证跟新列表顺序一致
        let lastIndex = 0
        for(let i = 0; i < newChildren.length; i++) {
            const newVNode = newChildren[i]
            let findSameKey = false
            for(let j = 0; j < oldChildren.length; j++) {
                const oldVNode = oldChildren[j]
                // 通过key判断是否有可复用的DOM节点，移动即可
                if(newVNode.key === oldVNode.key) {
                    findSameKey = true
                    patch(oldVNode, newVNode, container)
                    if(j < lastIndex) {
                        const prevVNode = newChildren[i - 1]
                        if(prevVNode) {
                            const anchor = prevVNode.el.nextSibling
                            // 移动节点
                            insert(newVNode.el, container, anchor)
                        }
                    } else {
                        lastIndex = j
                    }
                    break
                }
            }
            if(!findSameKey) {
                // 说明未找到可复用节点
                const prevVNode = newChildren[i - 1]
                let anchor = null
                if(prevVNode) {
                    anchor = prevVNode.el.nextSibling
                } else {
                    anchor = container.firstChild
                }
                // 挂载新节点
                patch(null, newVNode, container, anchor)
            }
        }
        for(let j = 0; j < oldChildren.length; j++) {
            const has = newChildren.find(n => n.key === oldChildren[j].key)
            // 判断旧节点list中是否有未处理的节点，执行卸载
            if(!has) {
                unmount(oldChildren[j])
            }
        }
    } else {
        // 其他情况
    }
}

function updateChildren(n1, n2, container) {
    const newChildren = n2.children
    const oldChildren = n1.children
    let oldStartIndex = 0
    let oldEndIndex = oldChildren.length - 1
    let newStartIndex = 0
    let newEndIndex = newChildren.length - 1
    let oldStartVNode = oldChildren[0]
    let oldEndVNode = oldChildren[oldEndIndex]
    let newStartVNode = newChildren[0]
    let newEndVNode = newChildren[newEndIndex]
    while(newStartIndex <= newEndIndex && oldStartIndex <= oldEndIndex) {
        if(!oldStartVNode) {
            // 说明oldStartVNode对应的节点已被处理
            oldStartVNode = oldChildren[++oldStartIndex]
        } else if (!oldEndVNode) {
            // 说明oldEndVNode对应的节点已被处理
            oldEndVNode = oldChildren[--oldEndIndex]
        } else if(oldStartVNode.key === newStartVNode.key) {
            // 比较新旧子节点列表的第一个节点
            patch(oldStartVNode, newStartVNode, container)
            oldStartVNode = oldChildren[++oldStartIndex]
            newStartVNode = newChildren[++newStartIndex]
        } else if (oldEndVNode.key === newEndVNode.key) {
            // 比较新旧子节点列表的最后一个节点
            patch(oldEndVNode, newEndVNode, container)
            oldEndVNode = oldChildren[--oldEndIndex]
            newEndVNode = newChildren[--newEndIndex]
        } else if (oldStartVNode.key === newEndVNode.key) {
            // 比较旧节点列表的第一个与新节点列表的最后一个
            patch(oldStartVNode, newEndVNode, container)
            insert(oldStartVNode.el, container, oldEndVNode.el.nextSibling)
            oldStartVNode = oldChildren[++oldStartIndex]
            newEndVNode = newChildren[--newEndIndex]
        } else if (oldEndVNode.key === newStartVNode.key) {
            // 比较旧节点列表的最后一个与新节点列表的第一个
            patch(oldEndVNode, newStartVNode, container)
            insert(oldEndVNode.el, container, oldStartVNode.el)
            oldEndVNode = oldChildren[--oldEndIndex]
            newStartVNode = newChildren[++newStartIndex]
        } else {
            // 四个端点都未找到相同key值的节点
            // 则判断当前新列表的第一个节点是否在旧列表中出现过
            const indexInOld = oldChildren.find(
                node => node.key === newStartVNode.key
            )
            if(indexInOld => -1) {
                // 出现过则移动此节点
                const vNodeToMove = oldChildren[indexInOld]
                patch(vNodeToMove, newStartVNode, container)
                insert(vNodeToMove.el, container, oldStartVNode.el)
                // 在旧列表中原位置设置节点为空，后面循环时可直接跳过
                oldChildren[indexInOld] = undefined
            } else {
                // 未出现则新增此节点
                patch(null, newStartVNode, container, oldStartVNode.el)
            }
            newStartVNode = newChildren[++newStartIndex]
        }
    }
    // 双端diff处理完之后判断新旧列表是否有未处理的节点
    if(oldEndIndex < oldStartIndex && newStartIndex <= newEndIndex) {
        // 新列表中存在未处理的节点，需要挂载
        for(let i = newStartIndex; i <= newEndIndex; i++) {
            const anchor = newChildren[newEndIndex + 1] ? newChildren[newEndIndex + 1] : null
            patch(null, newChildren[i], container, anchor)
        }
    } else if (newEndIndex < newStartIndex && oldStartIndex <= oldEndIndex) {
        // 旧列表中存在未处理的节点，则需要卸载
        for(let i = oldStartIndex; i <= oldEndIndex; i++) {
            if(!oldChildren[i]) continue
            unmount(oldChildren[i])
        }
    }
}

function patchKeyedChildren(n1, n2, container) {
    const newChildren = n2.children
    const oldChildren = n1.children
    let j = 0
    let newVNode = newChildren[j]
    let oldVNode = oldChildren[j]
    // 处理相同的前置节点
    while(oldVNode.key === newVNode.key) {
        patch(oldVNode, newVNode, container)
        j++
        newVNode = newChildren[j]
        oldVNode = oldChildren[j]
    }
    let oldEndIndex = oldChildren.length - 1
    let newEndIndex = newChildren.length - 1
    newVNode = newChildren[newEndIndex]
    oldVNode = oldChildren[oldEndIndex]
    // 处理相同的后置节点
    while(oldVNode.key === newVNode.key) {
        patch(oldVNode, newVNode, container)
        newVNode = newChildren[--newEndIndex]
        oldVNode = oldChildren[--oldEndIndex]
    }
    if(j > oldEndIndex && j <= newEndIndex) {
        // 新节点列表中存在未处理的节点
        const anchorIndex = newEndIndex + 1
        const anchor = anchorIndex < newChildren.length ? newChildren[anchorIndex].el : null
        while(j <= newEndIndex) {
            // 新节点挂载
            patch(null, newChildren[j++], container, anchor)
        }
    } else if (j > newEndIndex && j <= oldEndIndex) {
        // 旧节点列表中存在未处理的节点
        while(j <= oldEndIndex) {
            // 旧节点卸载
            unmount(oldChildren[j++])
        }
    } else {
        // 创建source数组，存储新节点在旧列表中所处索引位置，旧列表中无则存储-1
        const count = newEndIndex - j + 1
        const source = new Array(count)
        source.fill(-1)
        const newStartIndex = j
        const oldStartIndex = j
        const keyIndex = {}
        // 记录节点是否需要移动
        let moved = false
        // 最大索引值
        let maxNewIndexSoFar = 0
        let patched = 0
        for(let i = newStartIndex; i <= newEndIndex; i++) {
            keyIndex[newChildren[i].key] = i
        }
        for(let i = oldStartIndex; i <= oldEndIndex; i++) {
            oldVNode = oldChildren[i]
            // 已更新节点数量不可超过source总长度
            if (patched <= count) {
                const k = keyIndex[oldVNode.key]
                if(typeof k !== 'undefined') {
                    // 此节点在旧列表中存在
                    newVNode = newChildren[k]
                    patch(oldVNode, newVNode, container)
                    patched++
                    source[k - newStartIndex] = i
                    if(k < maxNewIndexSoFar) {
                        moved = true
                    } else {
                        maxNewIndexSoFar = k
                    }
                } else {
                    unmount(oldVNode)
                }
            } else {
                unmount(oldVNode)
            }
        }
        // 有节点需要移动，构建最长递增子序列
        if(moved) {
            // getSequence工具函数获取一个数组的最长递增子序列
            // [2,1,8,3,5] => [1,3,5]、[2,3,5]都是最长递增子序列
            // 注意: getSequence函数返回的是索引值，比如上面例子[1,3,5]对应的是[1,3,4]
            const seq = getSequence(source)
            // s指向最长递增子序列的末尾索引值
            let s = seq.length - 1
            // i指向新节点列表的末尾索引值
            let i = count - 1
            for(i; i >= 0; i--) {
                if(source[i] === -1) {
                    // 挂载新节点
                    const pos = i + newStartIndex
                    const newVNode = newChildren[pos]
                    const nextPos = pos + 1
                    const anchor = nextPos < newChildren.length ? newChildren[nextPos].el : null
                    patch(null, newVNode, container, anchor)
                } else if(seq[s] !== i) {
                    // 最长递增子序列末尾索引值与source数组末尾索引值不一致代表需移动节点
                    const pos = i + newStartIndex
                    const newVNode = newChildren[pos]
                    const nextPos = pos + 1
                    const anchor = nextPos < newChildren.length ? newChildren[nextPos].el : null
                    insert(newVNode.el, container, anchor)
                } else {
                    // 一致则代表无需移动节点，将s递减即可
                    s--
                }
            }
        }
    }
}