把vue掰碎了写一写 - -compiler

最新推荐文章于 2024-07-06 09:03:33 发布

Zachary_zlc

最新推荐文章于 2024-07-06 09:03:33 发布

阅读量97

点赞数

分类专栏：前端-框架源码解析

申请开通js

本文链接：https://blog.csdn.net/MrZachary_zlc/article/details/110874249

版权

前端-框架源码解析专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>create vue</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div><div>{{name}}</div></div>
    </div>
    <script>
      var tmp = document.querySelector("#root");
      var data = {
        name: "咬人的汪",
        age: 18,
      };
      // vue源码也是用递归写的，不过此处我们仅考虑一个简单的compiler模板解析函数的实现，让我们一步一步来，我会持续更新的
      const compiler = (template, data) => {
        let childNodes = template.childNodes; 
        const bracketsReg = /\{\{.+?\}\}/g; // 使用正则表达式的懒惰模式把模板内容挑出来，考虑一个文本内容里面放多个{{xxx}}内容；如果对正则不太熟悉，动动小手 百度一下
        for (let i = 0; i < childNodes.length; i++) {
          let type = childNodes[i].nodeType;
          if (type === 1) {
            compiler(childNodes[i], data);
          } else if (type === 3) {
            let txt = childNodes[i].nodeValue;
            txt = txt.replace(bracketsReg, function (val) {
              let key = val.replace(/(\{|\})/g, "").trim();
              let value = data[key];
              return value;
            });
            childNodes[i].nodeValue = txt;
          }
        }
      };
      let generateNodes = tmp.cloneNode(true); // 这里copy一下，免得把原本的元素整没喽
      compiler(tmp, data); // ，vue会自动帮我们把解析后的元素替换掉原来的内容，包括原来的元素；
      console.log(generateNodes);
    </script>
  </body>
</html>