探究Vue源码:mustache模板引擎(1) 什么是模板引擎

之前在讲虚拟dom和diff算法时说过后续会讲模板引擎啊那这边说到做到哈
对这个问题有个比较官方的回答模板引擎是将数据变为视图的最优雅的解决方案
在这里插入图片描述
比如将左侧数据变为右侧视图大家应该最先想到的就是 v-for
其实 v-for 就是一种模板引擎语法

从图中看出模板引擎处理的这个过程可以说非常优雅
那么就带出了另一个问题在模板引擎推出之前又是怎么处理的呢？
在数据转dom这个处理上经历了大体下图几个过程
在这里插入图片描述
当然可能大家对他们并不熟悉我们用代码来演示一下

到后面你会发现是一个不断优化代码也越来越美观的过程

先随便建一个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><ul id = "list"></ul><script>var arr = [{"name": "小猫猫","age": 12,"sex":"男"},{"name":"小红","age": 11,"sex":"女"},{"name":"小强","age": 13,"sex":"男"}]</script>
</body>
</html>

现在我们希望将这些数据写入到 ul中

首先我们来用纯DOM法
参考代码如下

//获取list ul节点
var list = document.getElementById('list');for (var i = 0; i < arr.length; i++) {//创建一个li标签的孤儿节点let oLi = document.createElement('li');//利用innerText将内容写入创建的孤儿节点oLi.innerText = arr[i].name;//将新节点插入到list节点中list.appendChild(oLi);}

在这里插入图片描述

打开页面
在这里插入图片描述
简单说就是
循环数据创建出一个一个的孤儿节点然后写入数据再手动插入
可以说写的相当麻烦

然后我们来看数组join法
我们编写代码如下

//获取list ul节点
var list = document.getElementById('list');//循环遍历数据
for (var i = 0; i < arr.length; i++) {//通过innerHTML  将字符串以html格式写入ul标签中list.innerHTML += ["<li>"+arr[i].name,"</li>"].join("")//join用于将数组转为字符串
}

打开界面
在这里插入图片描述
可以看到数组也是顺利的上去了

字符串要实现换行可以用反引号但这个写法要到ES6才有的
这个join在他之前出现给了这个思想
就是通过数组实现这个一行一行的效果用于书写html标签
然后通过join将数组变成字符串通过innerHTML写入到元素之中

很明显这样他就比原生的纯DOM写法好看多了
这个方法也层是前端必会的不过在vue面前确实是弱爆了

然后是ES6反引号方法其实这个叫模板字符串
参考代码如下

//获取list ul节点
var list = document.getElementById('list');//循环遍历数据
for (var i = 0; i < arr.length; i++) {//通过innerHTML  将模板字符串写入节点list.innerHTML += `<li>${arr[i].name}</li>`
}