mustache.js 是一个简单强大的 JavaScript 模板引擎，最新版本：https://www.bootcdn.cn/mustache.js/。
1. Mustache模版引擎流程
1.1 第一步：定义模板字符串
// js直接定义
var template = ['<ul>', '<li>', '</li>', '</ul> ].join('');
// 或者
<script id="tpl" type="text/html">
{{name}}
</script>
var template = document.getElementById('tpl').innerHTML.trim();
1.2 第二步：预编译模板
- 使用静态函数Mustache.parse；
- 预编译后的 template 已经不是原来的模板字符串了，连接数据类型都变成了数组类型；
Mustache.parse(template);
1.3 第三步：渲染模板
- 使用 render 函数进行渲染；
- mustache 会把模板中属性标签替换成与数据源对象属性名相同的属性值；
var rendered = Mustache.render(template, {name: "dennis"})
1.4 第四步：替换 DOM 内容
- 将渲染后的数据挂载到DOM树上；
2. Mustache标签与语法
2.1 变量：{{prop}}
- 默认情况下，在渲染该标签时，是对 prop 的原始值进行 URL 编码或者 HTML 编码之后再输出，若要阻止这种编码行为，应该使用 {{{prop}}}；
- 如果 prop 引用的值是 null 或 undefined，则渲染成空串；
- 如果 prop 引用的是一个函数，则在渲染是自动执行这个函数，并把这个函数返回值作为渲染结果；
- 其他场景，直接把 prop 引用的值转为字符串作为渲染结果；
2.2 带有 HTML 的变量：{{{arg}}}
2.3 动态渲染：{{#variable}} … {{/variable}}
- 该标签可以同时完成 if-else 和 for-each 以及动态渲染的模板功能。在这对标签之间，可以定义其他模板内容，嵌套说有标签。
{
"stooges":[
{"name":"MOE"},
{"name":"LARRY"}
]
}
{{#stooges}}
{{name}}
{{/stooges}}
2.4 {{^variable}}…{{/variable}}
- 这对标签，与{{#variable}} … {{/variable}}的 if-else 渲染执行相反逻辑，即只有在 variable 属性不存在或者引用的是一个 false 值，或者是一个空数组时才会显示标签之间的内容，否则不会显示。
