JavaScript —— 数据转换为视图的历史
《工欲善其事,必先利其器》
大家好,我是vk。今天的知识来源于 Vue
响应式的模板语句。本来只想研究一下框架的模板引擎渲染机制是怎么工作的,后来发现其实历史上就已经有很多方法实现了这种效果。
我们大概可以总结为4类实现的方式:
- 操作 DOM 渲染
- ES6 的反引号操作符渲染
- 数组 JOIN 方式的渲染
- 模板引擎渲染
那么假设我们有一段接口返回的 JSON,业务的需求是需要把这段 JSON 动态的渲染到我们的页面上(例如数据列表、数据回显等)。我们就以数据列表为例,分别介绍一下这几种实现方式。
// 需要渲染的 JSON 数据
const arr = [
{ name: "张三", gender: "男", age: 30 },
{ name: "李四", gender: "男", age: 40 },
{ name: "翠花", gender: "女", age: 50 }
]
<!-- 需要渲染的 list -->
<ul id="uiList"></ul>
一、操作 DOM 渲染
思路:需要创建元素,然后一个个把子元素挂载到目标元素上。
// 获取 list
const ul = document.getELementById("uiList");
// 循环 JSON
for (let i = 0; i < arr.length; i++) {
// 创建 li 元素
let li = document.createElement("li");
let div1 = document.createElement("div");
div1.innerText = arr[i].name + "的个人信息";
let div2 = document.createElement("div");
let p1 = document.createElement("p");
p1.innerText = "姓名:"+arrp[i].name;
div2.appendChild(p1);
let p2 = document.createElement("p");
p2.innerText = "性别:"+arrp[i].gender;
div2.appendChild(p2);
let p3 = document.createElement("p");
p3.innerText = "年龄:"+arrp[i].age;
div2.appendChild(p3);
li.appendChild(div1);
li.appendChild(div2);
ul.appendChild(li);
}
看一下效果:
我就问你晕了没?这种方法,虽然是直接挂载到 DOM 之上,速度也是较其他几种方法来讲是最快的。弊端也很明显,一旦层级结构非常多的时候,就会显得很繁琐。
二、数组 JOIN 渲染
这种方法是把层级结构转化为数组的索引值,然后最后通过 JOIN 方法,将数组的索引值拼接成字符串,最后再一次性挂载到 DOM 之上。
// 获取 list
const ul = document.getELementById("uiList");
// 循环 JSON
for (let i = 0; i < arr.length; i++) {
ul.innerHTML += [
'<li>',
' <div>'+arr[i].name+'的信息</div>',
' <div>',
' <p>姓名:'+arr[i].name+'</p>',
' <p>年龄:'+arr[i].age+'</p>',
' <p>性别:'+arr[i].gender+'</p>',
' </div>',
'</li>'
]
}
这个代码的效果跟上面的效果是一样的,不同的是,代码量减少了特别多,而且人还不容易绕进去。
三、ES6 反引号渲染
这个方法跟数组的差不多,只不过我们可以不再使用数组 JOIN,而是直接将拼接好的字符串挂载到 DOM 之上即可。
// 获取 list
const ul = document.getELementById("uiList");
// 循环 JSON
for (let i = 0; i < arr.length; i++) {
ul.innerHTML += `
<li>
<div class="hd">${arr[i].name}的基本信息</div>
<div class="bd">
<p>姓名:${arr[i].name}</p>
<p>年龄:${arr[i].age}</p>
<p>性别:${arr[i].gender}</p>
</div>
</li>`
}
这次我连拼接都不用了,直接把结构写好,数据填好,挂载到 DOM 上就行了,也是会更加方便。
四、模板引擎渲染
这个就没什么好讲的,大家习以为常的 Vue 就是用胡须语法去渲染的,这个胡须语法的祖先是一个叫
Mustache.js
库实现的,非常好用,有一定的研究价值,大家也可以自行研究,这里就不再赘述。
我们可以尝试使用正则表达式的方式来稍微实现一下胡须语法:
<div id="mustache">{{name}}</div>
const data = {
name: "张三"
}
const mustache = document.getElementById("mustache").innerHTML;
mustache.replace(/\{\{(\+w)}\}/g, function(str, $1) {
// str 表示匹配到的字符串,即 {{name}}
// $1 表示从 str 里面寻找到的变量名
return data[$1];
})
最后,感谢你的阅读,希望你的未来一片光明。