简易 Vue 构建--篇二

最新推荐文章于 2022-04-05 22:30:45 发布

怠惰Zsj

最新推荐文章于 2022-04-05 22:30:45 发布

阅读量89

点赞数

分类专栏：简易Vue 文章标签： vue

本文链接：https://blog.csdn.net/classOurself/article/details/115188909

版权

简易Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、将 HTML DOM 转换成 js 对象
2、将 js 对象转换成 HTML DOM

<!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>
    <div id="root">
      <div class="c1">
        <div title="tt1" id="id">hello1</div>
        <div title="tt2">hello2</div>
        <div title="tt3">hello3</div>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </div>
    <script>
      // 如何得到虚拟dom
      // 即：将真实的DOM元素转换成js对象
      // 构建虚拟dom对象
	
	  // 1、将 HTML DOM 转换成 js 对象
      class VNode {
        constructor(tag, data, value, type) {
          this.tag = tag && tag.toLowerCase() // 标签名
          this.data = data // 属性
          this.value = value // 标签内容
          this.type = type // 节点类型
          this.children = [] // 子节点
        }
        // 添加虚拟dom子节点
        appendChild(vnode) {
          this.children.push(vnode)
        }
      }
      // 将真实dom转换成虚拟dom
      function createElement(node) {
        const type = node.nodeType
        let _vnode = null
        if (type === 1) {
          // 标签节点
          const tag = node.nodeName // 标签名
          const attrs = node.attributes // attributes 真实dom里存放标签属性 数组对象
          const data = {} // 虚拟dom中 属性就只是对象
          for (let i = 0; i < attrs.length; i++) {
            data[attrs[i].nodeName] = attrs[i].nodeValue // 数组每一项
          }
          const value = undefined
          _vnode = new VNode(tag, data, value, type)
          const children = node.childNodes
          // 子节点
          for (let i = 0; i < children.length; i++) {
            _vnode.appendChild(createElement(children[i]))
          }
        } else if (type === 3) {
          // 文本节点
          _vnode = new VNode(undefined, undefined, node.nodeValue, type)
        }
        // 将每一个虚拟节点返回
        return _vnode
      }
      const r = createElement(document.querySelector('#root'))
      console.log(r)

	  // 2、将 js 对象转换成 HTML DOM 
      // 将 vNode 转换为真正的 DOM ( 作业 )
      function parseVNode(vnode) {
        let oDom = null
        // 标签节点
        if (vnode.type === 1) {
          oDom = document.createElement(vnode.tag)
          const data = vnode.data
          // 属性节点
          for (let k in data) {
            oDom.setAttribute(k, data[k])
          }
          // 子节点
          for (let i = 0; i < vnode.children.length; i++) {
            oDom.appendChild(parseVNode(vnode.children[i]))
          }
        } else if (vnode.type === 3) {
          // 创建文本节点
          oDom = document.createTextNode(vnode.value)
        }
        return oDom
      }
      const dom = parseVNode(r)
      console.log(dom)
    </script>
  </body>
</html>

怠惰Zsj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易 Vue 构建--篇二

1、将 HTML DOM 转换成 js 对象2、将 js 对象转换成 HTML DOM<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=devi.
复制链接

扫一扫

专栏目录