查看渲染html工具,mustache-前端html模板渲染工具

为什么需要渲染工具

为了理解该问题，我们先看几个示例：

//示例1

var b = { Id: "123", Name: "张三", Age: 14 }

var output = "学生学号：" + b.Id + " 学生名称：" + b.Name + " 学生年龄：" + b.Age

//示例2

var list = [{ Id: "123", Name: "张三", Age: 14, Class: "", SubChild: [{ Id: "123", Name: "张三", Age: 14 }] }]

var html = "";

for (var i = 0; i < list.length; i++) {

html = html + "

" + list[i].Name

if (list[i].SubChild) {

html += "

"

for (var j = 0; j < list[i].SubChild; j++) {

html += "" + list[i].SubChild[j].Name + ""

}

html += "

"

}

html += "

"

}

对示例1，我们经常遇到，由于比较简单，没什么太大的问题，也不会想更好的解决方式，针对示例2，此时的拼接方式就很相对复杂了，如果信息量越大，逻辑越复杂，此时，代码编写就十分的复杂了，并且容易出错，也不利于维护，页面渲染和代码逻辑完全混杂在一起。如何更好的解决示例2所存在的场景？

模板渲染

我们可以在html中直接编写一段符合规则的界面显示代码，然后将数据和模板输入到渲染工具，有渲染工具生成出来符合要求的html代码，这样，界面显示好逻辑分离，便于维护。mustache就是这样的一个渲染工具，项目地址：https://github.com/janl/mustache.js

我们看一个简单的例子(实现示例2)：

// html代码

{{ #list }}

{{ Name }}

{{#SubChild}}

{{ Name }}

{{/ SubChild}}

{{ /list}}

//js 代码

var list = [{ Id: "123", Name: "张三", Age: 14, Class: "1class", SubChild: [{ Id: "123", Name: "张三sub", Age: 14 },{Name:"李四"}] }]

console.time("abc");

console.log(Mustache.render(template, { list: list }))

console.timeEnd("abc");

//输出结果

张三

张三sub

李四

从上面的例子中可以看到，实现的逻辑很简单，维护起来也非常的方便，同时，从计算时间来看，速度还是很快的，因此，还是很适合在前端代码中使用渲染引擎的

原文：https://www.cnblogs.com/zp900704/p/11721727.html