原生JS模拟虚拟dom,虚拟dom转真实dom

HaoOuBa
2021-06-28 / 4 评论 / 399 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年06月30日,已超过516天没有更新,若内容或图片失效,请留言反馈。
<div id="root" class="aaa">
    <div class="title">11</div>
    <div class="title">222</div>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</div>

<script type="text/javascript">
    class VNode {
        constructor(name, attrs, value, type) {
            this.name = name
            this.attrs = attrs
            this.value = value
            this.type = type
            this.children = []
        }
        addChildren(node) {
            this.children.push(node)
        }
    }

    function create(node) {
        let _vnode = null
        if (node.nodeType === 1) {
            const attributes = [...node.attributes]
            const attrs = attributes.reduce((prev, curr) => {
                prev[curr.name] = curr.value
                return prev
            }, {});
            _vnode = new VNode(node.nodeName.toLowerCase(), attrs, null, node.nodeType)
            for (let item of node.childNodes) {
                _vnode.addChildren(create(item))
            }
        } else if (node.nodeType === 3) {
            _vnode = new VNode(node.nodeName.toLowerCase(), null, node.nodeValue, node.nodeType)
        }
        return _vnode
    }

    let vnode = create(document.querySelector("#root"))
    console.log(vnode);

    function parse(node) {
        let nodeEl = null
        if (node.type === 1) {
            nodeEl = document.createElement(node.name)
            for (let key in node.attrs) nodeEl.setAttribute(key, node.attrs[key])
            node.children.forEach(item => {
                nodeEl.appendChild(parse(item))
            });
        } else {
            nodeEl = document.createTextNode(node.value)
        }
        return nodeEl
    }

    let dom = parse(vnode)
    console.log(dom);
</script>
3

评论 (4)

取消
  1. 头像
    1
    Windows 10 · Google Chrome

    1

    回复
  2. 头像
    叶默
    Windows 10 · QQ Browser

    请问大佬,js点击事件中如何写
    点击伸缩显示后,再点击其他事件或者其他区域,就自动关闭上一个js点击事件。

    回复
    1. 头像
      HaoOuBa 作者
      Windows 10 · Google Chrome
      @ 叶默

      你好,给document 绑定一个点击事件,然后给你伸缩的地方加上 e.stopPropagation. 可以参考下方代码:

      伸缩.on click = e => {
      e.stopPropagation()
      ...
      }
      document.on click = () => {
      关闭弹窗。。。
      }

      回复
  3. 头像
    fsa
    Windows 7 · Google Chrome

    fsdfsdfdsf

    回复