手撕Vue-编译模板数据

合集 - 手写Vue全家桶(16)

1.Vue双向数据绑定原理-上2023-09-272.Vue双向数据绑定原理-中2023-09-303.Vue双向数据绑定原理-下2023-09-304.手撕Vue-构建Vue实例2023-10-035.手撕Vue-提取元素到内存2023-10-146.手撕Vue-查找指令和模板2023-10-157.手撕Vue-编译指令数据2023-10-15

8.手撕Vue-编译模板数据2023-10-15

9.手撕Vue-监听数据变化2023-10-1510.手撕Vue-数据驱动界面改变上2023-10-1511.手撕Vue-数据驱动界面改变中2023-10-1512.手撕Vue-数据驱动界面改变下2023-10-1913.手撕Vue-界面驱动数据更新2023-10-2114.手撕Vue-实现事件相关指令2023-10-2115.手撕Vue-实现将数据代理到Vue实例2023-10-2116.手撕Vue-实现计算属性2023-10-21

收起

经上一篇编译指令数据后，我们已经可以将指令数据编译成具体需要展示的数据了，上一篇只是编译了指令数据，还没有编译模板数据，这一篇我们就来编译模板数据。

也就是 {{}} 这种模板的形式我们该如何编译，其实和指令数据编译的思路是一样的，废话不多说，直接上代码。

改造一下 buildText 方法，让它支持编译模板数据，调用 CompilerUtil content 方法，传入模板数据，返回编译后的数据，然后再将编译后的数据替换到文本节点中。

CompilerUtil['content'](node, content, this.vm);

在 CompilerUtil 中添加 content 方法，该方法和指令数据编译的思路是一样的，只是编译的数据不一样，指令数据是 v-text 这种，而模板数据是 {{}} 这种。

/**
 * 处理模板字符串
 * @param node 当前元素
 * @param value 指令的值
 * @param vm Nue 的实例对象
 */
content: function (node, value, vm) {
    // console.log(value); // {{ name }} -> name -> $data[name]
    node.textContent = this.getContent(vm, value);
}

getContent 方法我单独拿出来，我先贴代码，然后再解释。

/**
 * 获取指定模板字符串的内容
 * @param vm Nue 的实例对象
 * @param value 指令的值
 */
getContent(vm, value) {
    const reg = /\{\{(.+?)\}\}/gi;
    return value.replace(reg, (...args) => {
        // 第一次执行 args[1] = name
        // 第二次执行 args[1] = age
        return this.getValue(vm, args[1]);
    });
},

getContent 方法中，我们先定义了一个正则表达式，用来匹配模板字符串，/\{\{(.+?)\}\}/gi 这个正则表达式的意思是匹配 {{}} 里面的内容，g 表示全局匹配，i 表示忽略大小写，(.+?) 表示匹配任意字符，+ 表示匹配一次或多次，? 表示非贪婪模式，也就是匹配到第一个 }} 就结束匹配。() 表示分组，args[1] 就是分组匹配到的内容。

在方法当中，我们调用了 getValue 方法，该方法的作用是获取模板字符串的值，在运行测试代码的时候，我发现, {{ name }} 这种模板编译出来是 undefined 所以我们需要在 getValue [obj][key] 的时候，去一下空格：

return data[currentKey.trim()];

这样就可以了，我们再来看一下测试代码：

<p>{{ name }}</p>
<p>{{age}}</p>
<p>{{time.h}}</p>
<p>{{name}}-{{age}}</p>

发现 {{name}}-{{age}} 这种也可以编译了，那么可以我们来看看我们 getContent 源码的执行效果，如果是 {{name}}-{{age}}, value 等于 {{name}}-{{age}} 进入 replace 循环，第一次执行 args[1] 等于 name，第二次执行 args[1] 等于 age，第一次循环已经将我们的 {{name}}-{{age}} 替换为了 BNTang-{{age}}，第二次循环将 {{age}} 替换为了 age，所以最终的结果就是 BNTang-33。