这是我参与更文挑战的第 1 天，活动详情查看： 更文挑战
前言：
作为一名前端人，对于 ECMAScript（ JavaScript） 这门语言是否有深入的了解，决定我们能走得多远，尤其再今天，只是我们经常使用 Vue、React 等框架进行视图渲染，框架封装了太多底层，是时候研究一下底层源码，看看这些框架是如何将一个个数据渲染成为视图的，接下来我们就从零开始自己实现一个 Mustache 模板引擎，窥探一下 Vue的 <template> 是如何将 数据渲染到视图内的。另外，这个月我要打开 《JavaScript高级程序设计（第4版） 》 了。也会在这里分享我所得比较有收获的，欢迎大家共同交流讨论呀！
废话不多说，先看看业务需求!
目前， 我们有这样一个数组，将其渲染成下图的视图，那么我们可以怎么做呢？大家可以自己想一下再看后面具体实现方式，我后面就直接上答案了！
<!-- html -->
<body>
<ul id="list">
</ul>
</body>
<script>
const studentsList = [
{ "name": "Jack", "age": 12, "sex": "男" },
{ "name": "Summer", "age": 11, "sex": "女" },
{ "name": "David", "age": 13, "sex": "男" }
];
</script>
1 纯 Dom 创建视图
最直接的办法，直接创建视图元素，依次插入目标容器元素。
const list = document.querySelector("#list")
console.log('list: ', list);
studentsList.map((student, index) => {
// 每遍历一项，都要用DOM方法去创建li标签
const oLi = document.createElement("li")
// 创建hd这个div
let title = document.createElement('p');
title.className = 'listCard';
title.innerText = '第 ' + ++index + ' 位学生 ' + student.name + ' 的基本信息';
// 创建bd这个div
let bdDiv = document.createElement('div');
bdDiv.className = 'bd';
// 创建三个p
let p1 = document.createElement('p');
p1.innerText = '姓名：' + student.name;
bdDiv.appendChild(p1);
let p2 = document.createElement('p');
p2.innerText = '年龄：' + student.age;
bdDiv.appendChild(p2);
let p3 = document.createElement('p');
p3.innerText = '性别：' + student.sex;
bdDiv.appendChild(p3);
// 渲染进入视图
list.appendChild(title)
list.appendChild(bdDiv)
})
可以看到这个方法太麻烦了，每次操作都耗费大量精力，还可能出错，不好定位。
2 数组 Join 方法实现
原理： 数组的 join 方法可以将数组内每一个元素以字符串连接起来。
const studentsList = [
{ "name": "Jack", "age": 12, "sex": "男" },
{ "name": "Summer", "age": 11, "sex": "女" },
{ "name": "David", "age": 13, "sex": "男" }
];
const list = document.querySelector("#list")
// 遍历数组，每遍历一项，就以字符串的视角将HTML字符串添加到list中
studentsList.forEach((student, index) => {
list.innerHTML += ['<li>',
'<p>' + '第 ' + ++index + ' 位学生 ' + student.name + ' 的基本信息' + '</p>',
' <div>',
' <p>姓名：' + student.name + '</p>',
' <p>年龄：' + student.age + '</p>',
' <p>性别：' + student.sex + '</p>',
' </div>',
'</li>'].join('')
})
也实现了同样的视图
可以看到，这简直是一个天才呀！灵活的将 数组 join 方法灵活运用在里渲染视图，下面是部分视图的内容，在前端的远古时代，我们就可以利用编辑器多行编辑的特点，快速创建视图。
3 ES6 的反引号方法
ES6反引号方法 可以在字符串内写入变量，利用这点做到渲染视图。
const studentsList = [
{ "name": "Jack", "age": 12, "sex": "男" },
{ "name": "Summer", "age": 11, "sex": "女" },
{ "name": "David", "age": 13, "sex": "男" }
];
const list = document.querySelector("#list")
studentsList.forEach((student, index) => {
console.log(' list.innerHTML: ', list.innerHTML);
list.innerHTML += ` <li>
<p> 第 ${++index} 位学生 ${student.name} 的基本信息 </p>
<div>
<p>姓名： ${student.name} </p>
<p>年龄： ${student.age} </p>
<p>性别： ${student.sex} </p>
</div>
</li>`
})
可以看到，ES6 的原理和 数组 join 方法基本相同。得益于 ES6 的跟新，这样写起来也很方便。
结语：
今天我们了解了 三种原生 ECMAScript 数据渲染视图的方法，这只是我们自己实现一个 Mustache 模板引擎 的一个开胃小菜，虽然看起来简单，但要想到可能没有那么简单，尤其是 第二种 数组 Join 方法实现 ，鬼才哈哈，简直在刀耕火种的年代里迅速提升了生产力。明天我会简单介绍一下 Mustache 模板引擎，以及基本使用方法，希望大家喜欢，欢迎持续关注。喜欢的话，一定要点个赞呀！
作者：chenuvi
