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 + "<div class='" + list[i].Class + "' id='" + list[i].Id + "'>" + list[i].Name
    if (list[i].SubChild) {
        html += "<div>"
        for (var j = 0; j < list[i].SubChild; j++) {
            html += "<span>" + list[i].SubChild[j].Name + "</span>"
        }
        html += "</div>"
    }
    html += "</div>"
}

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

模板渲染

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

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

// html代码
{{ #list }}
        <div class="{{Class}}" id="{{Id}}">{{ Name }}
            {{#SubChild}}
            <div>{{ Name }}</div>
            {{/ SubChild}}
    </div>
{{ /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");

//输出结果
<div class="1class" id="123">张三
            <div>张三sub</div>
            <div>李四</div>
</div>

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