这是我参与更文挑战的第 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