Mustache 模板引擎

mustache.js 是一个简单强大的 JavaScript 模板引擎，最新版本：https://www.bootcdn.cn/mustache.js/。

1. Mustache模版引擎流程

1.1 第一步：定义模板字符串

// js直接定义
var template = ['
', '
', '
', '
 ].join('');
// 或者

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 值，或者是一个空数组时才会显示标签之间的内容，否则不会显示。

2.5 注解：{{!注解}}