vue源码分析之模版解析的大括号表达式

一、模版解析之大括号表达式的分析

大括号表达式：在vue中是比较常见的，通过双大括号{{}}可以进行插值表达式的读取。
模版解析之大括号表达式的实现过程：

根据正则对象得到匹配出的表达式字符串: 子匹配/RegExp.$1 name
从 data 中取出表达式对应的属性值
将属性值设置为文本节点的 textContent

对于大括号表达式的解析过程，简单来说，将大括号表达式中的值取出来，比如{{ name }}，将name的值取出来，根据name的值找到对应的value的值，将value的值插入到文本节点的textContent中。
模版解析之大括号表达式的关键过程：

compileElement: function (el) {
    // 得到所有子节点
    var childNodes = el.childNodes,
      // 保存compile对象
      me = this;
    // 遍历所有子节点
    [].slice.call(childNodes).forEach(function (node) {
      // 得到节点的文本内容
      var text = node.textContent;
      // 正则对象(匹配大括号表达式)
      var reg = /\{\{(.*)\}\}/;  // {{name}}
      // 如果是元素节点
      if (me.isElementNode(node)) {
        // 编译元素节点的指令属性
        me.compile(node);
        // 如果是一个大括号表达式格式的文本节点
      } else if (me.isTextNode(node) && reg.test(text)) {
        // 编译大括号表达式格式的文本节点
        me.compileText(node, RegExp.$1); // RegExp.$1: 表达式   name
      }
      // 如果子节点还有子节点
      if (node.childNodes && node.childNodes.length) {
        // 递归调用实现所有层次节点的编译
        me.compileElement(node);
      }
    });
 }

二、模版解析之大括号表达式的实现：

大括号表达式的实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模版解析之大括号表达式_MVVM</title>
</head>
<body>
    <div id="test">
        <p>{{ name }}</p>
    </div>
</body>
<script type="text/javascript" src="./js/mvvm/compile.js"></script>
<script type="text/javascript" src="js/mvvm/mvvm.js"></script>
<script type="text/javascript" src="./js/mvvm/observer.js"></script>
<script type="text/javascript" src="./js/mvvm/watcher.js"></script>
<script type="text/javascript">

    new MVVM({
        el: "#test",
        data: {
            name: "张三"
        }
    })

</script>
</html>

关于vue的源码分析，我在github上建立了一个项目，项目地址如下https://github.com/jiuchengTk279/vueSourceCode.git，欢迎大家访问下载，也希望可以多给予一些建议交流。

旧城tk

发布了146 篇原创文章 · 获赞 34 · 访问量 3万+

私信关注

vue源码分析之模版解析的大括号表达式

一、模版解析之大括号表达式的分析

二、模版解析之大括号表达式的实现：

猜你喜欢