手写实现Vue模板语法-优快云博客

该文章展示了一个使用JavaScript处理HTML模板字符串的例子，通过创建文档碎片、正则表达式解析和数据对象映射，实现在DOM元素中动态绑定数据。文章主要讨论了如何更新文本节点的内容，以及对子元素进行递归处理的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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="app">
    <p>{{ name }}-{{ describe }}
    <div>高启盛{{info.describe}}</div>
    </p>
    <p>{{ describe }}</p>
    <p>{{ info.describe }}</p>
    <p>div</p>
  </div>
</body>
<!-- <script src="./test.js"></script> -->
<script>
  const objData = {
    name: '高启强',
    describe: '黑帮大佬',
    info: {
      describe: '喜欢吃鱼'
    }
  }

  const app = document.getElementById('app')

  const fragment = document.createDocumentFragment()

  while (child = app.firstChild) { // 通过获取app节点下子节点赋值给虚拟节点
    fragment.appendChild(child)  // appendChild 特性 如果要添加的子元素节点已经存在于 DOM 树中，那么该节点会被从原来的位置移动到新的位置，而不是创建一个新的节点；
  }

  const regex = /\{\{\s*(\S+)\s*\}\}/

  function parseStr(vnode) {

    if (vnode.nodeType == 3) { // nodeType 是 DOM 中的一个属性，它表示节点的类型，其值是一个整数。不同类型的节点有不同的 nodeType 值，常见的值包括：1: 元素节点 2: 属性节点 3: 文本节点 8: 注释节点
      const text = vnode.textContent
      const regRes = text.split(regex) //切分
      if (regRes) {
         const newContent = regRes.map((i)=> i.split('.').reduce((data, key) => data[key] || key, objData)).join('') //匹配所有内容
        vnode.textContent = newContent
      }
    }

    vnode.childNodes.forEach(element => parseStr(element)); //递归循环所有子元素
  }

  parseStr(fragment)

  app.appendChild(fragment)

</script>

</html>