Javascript模版引擎mustache.js简介

背景

最近使用ELK的sentinl进行告警配置，sentinl的邮件通知支持mustache，借此机会学习了mustache相关知识，记录在此。

mustache的思想

mustache的核心是标签和logic-less.

标签: 定义模板的时候,使用了{{name}}、{{#systems}}{{/systems}}标记. 这就是mustache的标签,只不过用{{}}替代了<>,以免和html标签的<>混淆.

Logic-less:轻逻辑,因为在定义模板的时候不会使用if-else,不会有循环式编码,一切都用标签来解决.

标签包含:

{{prop}}: 将数据源对象上prop属性对应的值,转换成字符串输出.
{{{prop}}} ——不进行特殊字符转义,保持内容原样输出
{{#prod}}{{/prop}}
{{^prop}}{{/prop}}
{{.}} ——表示枚举,可以循环输出整个数组
{{>partials}} ——以>开始表示子模块
{{!comments}} ——注释

{{prop}}标签

mustache渲染{{prop}}标签的逻辑:

1)如果prop引用的值上null或者undefined,则渲染成空串;

2)如果prop引用的是一个函数,则在渲染的时候自动执行这个函数,并把函数返回值作为渲染结果.

3)其他场景,直接把prop引用的值转换成字符串作为渲染结果.

默认情况下,mustache在渲染prop时,都是对prop的原始值进行url编码或者html编码之后再输出,所以会把"\"转成html实体符.

console.log(Mustache.render(tpl1, {

     prop: function () {

         return 'it\'s a fun'

     }

}));//-it's a fun-

如果要阻止这种编码行为,只要把标签改成{{{prop}}}就可以.

{{#prop}}{{/prop}}标签

这对标签作用非常大,可以同时完成if-else和for-each以及动态渲染的模版功能. 在这对标签之间,可以定义其他模板内容,嵌套所有标签.

1)if-else渲染

只有prop属性在数据源对象上存在,并且不为falsy值(javascript6个falsy值:null, undefined, NaN, 0, false, 空字符串), 并且不为空数组的情况下, 标签之间的内容才会被渲染,否则都不会被渲染.

prop属性引用的是一个函数的时候,{{#prop}}会自动调用这个函数,并把函数的返回值作为if-else渲染逻辑的判断依据,也就是如果函数返回的是falsy值或者是空数组的时候,这对标签之间的内容还是不会显示.

2)for-each渲染

当prop属性引用的是一个非空数组时,这对标签之间的内容将会根据数据大小进行迭代,并且当数组元素为对象时,还会把该对象作为每一次迭代的上下文,以便迭代时的标签可以直接引用数组元素上的属性.

3)动态渲染

当prop属性所引用的是一个函数, 并且这个函数的返回值还是一个函数的话, mustache会再次调用这个返回的函数,并给它传递2个参数:text表示原来的目标内容,render表示mustache内部的执行渲染的对象, 以便在这个函数内容可以通过render对象结合原来的模版内容,自定义渲染的逻辑,并且把函数的返回值作为渲染结果(这个返回值渲染的逻辑根{{prop}}标签完全一样).

{{^prop}}{{/prop}}标签

这对标签,与{{#prop}}{{/prop}}的if-else渲染执行相反逻辑,即只有在prop属性不存在或者引用的是一个falsy值,或者是空数组才会显示标签之间的内容.

详情参考