简易 Vue 构建--篇一

最新推荐文章于 2023-12-13 17:54:42 发布

怠惰Zsj

最新推荐文章于 2023-12-13 17:54:42 发布

阅读量93

点赞数 1

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

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

版权

简易Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

真实 DOM 中的模板数据替换

<!DOCTYPE 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>
    <div id="root">
      <div>111{{name.firstName}}-{{age}}</div>
      <p>
        <span>{{name.lastName}}</span>
      </p>
    </div>
    <script>
      // #4.2 对象解析函数 a.b.c.d这种格式
      function getValueByKey(obj, str) {
        const arr = str.split('.')
        let prop = null
        while ((prop = arr.shift())) {
          obj = obj[prop]
        }
        return obj
      }

      const reg = /\{\{(.+?)\}\}/g
      function compiler(template, data) {
        // 拿到根节点下的所有子节点
        const childNodes = template.childNodes || []
        // #4.1循环子节点
        for (let i = 0; i < childNodes.length; i++) {
          // 拿到子节点标签 类型
          const nodeType = childNodes[i].nodeType
          if (nodeType === 1) {
            // 标签节点 静态模板
            // 递归
            compiler(childNodes[i], data)
          } else if (nodeType === 3) {
            // 文本节点
            // 文本值
            const txt = childNodes[i].nodeValue
            // 正则替换
            const value = txt.replace(reg, function (_, g) {
              const key = g.trim()
              // return data[key]
              return getValueByKey(data, key)
            })
            childNodes[i].nodeValue = value
          }
        }
      }

      function OVue(obj) {
        // 习惯: 内部的数据使用下划线 开头, 只读数据使用 $ 开头

        // 根元素
        this._el = obj.el
        // 数据
        this._data = obj.data

        // 根模板
        this._template = document.querySelector(this._el)
        // ? 为什么要拿父节点
        this._parent = this._template.parentNode

        // #2 调用render函数更新视图
        this.render()
      }

      // 渲染函数
      OVue.prototype.render = function () {
        this.compiler()
      }
      
      // 编译解析{{}} 模板与数据结合 得到 真正的 DOM 元素
      OVue.prototype.compiler = function () {
        // #3 拷贝原HTML DOM 节点
        const tmpRootCln = this._template.cloneNode(true)
        // #4 使用拷贝的 DOM 节点 进行数据替换
        compiler(tmpRootCln, this._data)
        // #5 更新 DOM
        this.update(tmpRootCln)
      }
      
      // 更新视图
      OVue.prototype.update = function (tmpRootCln) {
        this._parent.replaceChild(tmpRootCln, this._template)
      }

      // #1 创建实例
      new OVue({
        el: '#root',
        data: {
          name: { firstName: 'wang', lastName: 'wu' },
          age: 18
        }
      })
    </script>
  </body>
</html>

怠惰Zsj

关注

1
点赞
踩
0

收藏

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

真实 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" /&
复制链接

扫一扫

专栏目录