×
广告

Mustache

96
__ee47
2017.11.15 11:15 字数 623

Mustache 是一款经典的前端模板引擎,在前后端分离的技术架构下面,前端模板引擎是一种可以被考虑的技术选型,随着重型框架(AngularJS、ReactJS、Vue)的流行,前端的模板技术已经成为了某种形式上的标配,Mustache 的价值在于其稳定和经典:

主页:https://github.com/janl/mustache.js/

文档:https://mustache.github.io/mustache.5.html

Mustache 在使用的时候,会在页面上出现 {{person}} 这样的标签,载入的时候回显示出来,然后立即被替换掉,这个对于页面的呈现是不够友好的,这是我在使用的过程中遇到的一个痛点。

Mustache 功能非常经典,这里就能全部罗列出来:

变量

{{person}}

带有HTML的变量

{{{person}}}

循环

{{#persons}}

......

{{/persons}}

数组循环的时候可以用.作为下标

{

"musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"]

}

{{#musketeers}}

{{.}}

{{/musketeers}}

对象

正常使用:

{

"name": {

"first": "Michael",

"last": "Jackson"

},

"age": "RIP"

}

{{name.first}} {{name.last}}

{{age}}

循环使用:

{

"stooges": [

{ "name": "Moe" },

{ "name": "Larry" },

{ "name": "Curly" }

]

}

{{#stooges}}

{{name}}

{{/stooges}}

if else

{{#person}}

......

{{/person}}

{{^person}}

......

{{/person}}

布尔判断

和前面循环的语法是一样的,取决于变量是否是一个数组

{{#person}}

......

{{/person}}

数组的布尔判断

当一个数组没有任何值的时候,可能会希望不做任何的显示,所以需要这个判断

{{#persons.length}}

......

{{/persons.length}}

Lambdas

遇到和前面的循环和布尔表达式一样,取决于参数的类型

{{#person}}

{{name}} is awesome.

{{/person}}

{

"name": "Willy",

"person": function() {

return function(text, render) {

return "" + render(text) + ""

}

}

}

输出

Willy is awesome.

注释

这玩意儿有啥用呢?

{{! ignore me }}

Trick

在做的循环输出的时候,需要使用类似这样的形式(感觉这就是BUG啊,或者是HTML标准的问题?):


{{name}}

{{age}}


两个核心方法

Mustache.parse(template);

Mustache.render(template, obj);

因为动态载入到 HTML 上的事件或者元素会丢失,所以我封装了一个对模板的缓存:

$(templateKey).each(function(i){

templateExist = false;

$(templateArray).each(function(index){

if (templateArray[index][0] == templateKey+i)

{

templateExist = true;

template = templateArray[index][1];

}

})

if (templateExist != true)

{

template = $(this).html();

templateArray.push([templateKey+i, template]);

}

Mustache.parse(template);

$(this).html(Mustache.render(template, item.data)).show();

if (callbackFunction)

{

callbackFunction(item.data);

};

})

顺便简单学习了一下 Handlebars,这款也非常的知名,并且是基于 Mustache 的模板引擎:

Handlebars:http://handlebarsjs.com/

随笔
Web note ad 1