example/block主逻辑梳理.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>
        block主逻辑梳理
    </h1>
    <div>主要思想就是巧妙的利用栈的结构将动态节点放入dynamicChildren中</div>
    <div>
        具体代码实现请看js例子
    </div>
    <script>
        /**
         * 主要思想就是巧妙的利用栈的结构将动态节点放入dynamicChildren中
         **/
        let blockStack = []
        let currentBlock = null
        //初始化将快放入栈中利用栈的结构放入block 的子动态元素
        function _openBlock(disableTracking = false) {
            blockStack.push((currentBlock = disableTracking ? null : []))
        }
        function closeBlock() {
            blockStack.pop()
            currentBlock = blockStack[blockStack.length - 1] || null
        }
        function setupBlock(vnode) {
            vnode.dynamicChildren = currentBlock
            closeBlock()
            return vnode
        }
        function createVnode(type, porps, children, isBlockNode = false,
        ) {
            const vnode = {
                type,
                porps,
                children,
                isBlockNode,
                dynamicChildren: null
            }
            if (!isBlockNode && currentBlock) {
                currentBlock.push(vnode)
            }
            return vnode
        }
        function _createElementBlock(type, porps, children) {
            // 传入true直接表示当前vnode是一个当前block 的开始
            return setupBlock(createVnode(type, porps, children, true))
        }
        // 我们假设source是一个number 
        function _renderList(source, renderItem,) {
            ret = new Array(source)
            for (let i = 0; i < source; i++) {
                ret[i] = renderItem(i + 1)
            }
            return ret
        }
        // 生成vnode 
        function render(ctx) {
            return (_openBlock(), _createElementBlock('Fragment', null, [
                createVnode("div", null, " 11111 ", true/* CLASS */),
                createVnode("div", null, ctx.currentBranch, /* TEXT */),
                (_openBlock(true), _createElementBlock('Fragment', null, _renderList(5, (i) => {
                    return (_openBlock(), _createElementBlock("div", null, i, /* TEXT */))
                })))
            ]))
        }
        console.log(render({ currentBranch: "老骥伏枥" }))
    </script>
</body>

</html>