JavaScript —— 数据转换为视图的历史

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];
})

最后，感谢你的阅读，希望你的未来一片光明。