我粗心地以为，mustache只能支持变量，既无Logic（他自称为Logic-less），也不能支持function。于是，起意想转投ejs（啥啥js都支持，自由度相当大）。还好我犹豫了一下，仔细审视了一下mustache。原来他也支持function，而且也不弱。
缘起
jQuery
对于“将从sever取回的json应用到ui”这件事，我们最初是用jQuery来做的：
for (var i = 0; i < json.length; i++) {
$('some-class1').text(json[i].name);
$('some-class2').text(json[i].age);
$('some-class2').text(json[i].sex);
// ....
}
毫无疑问，这很ugly：
- 大量的 $('xxx').text(json.xxx) 型语句赋值
- 每个目标元素必须得定义用于被选择的标识
mustache
有一天有人建议了“模板引擎”，于是找到了mustache，其支持各种语言（包括php），写好的模板可以给后端渲染用。
// the json
{
"name": {
"first": "Michael",
"last": "Jackson"
},
"age": "RIP"
}
// the Template:
* {{name.first}} {{name.last}}
* {{age}}
// Output:
* Michael Jackson
* RIP
我们知道它支持循环，但只知道支持变量，不知其支持function。所以，从server取回的数据在不能直接用于UI渲染时（大多数情况是如此），不得不先整理一下，再给mustache渲染。一般，json总是数组的，所以，不得不用循环遍历各个元素，进行整理。这一个循环，既是一次性能的支出，代码也变得臃肿了。
如果能在模板中使用function，那就可以省去这次“用于整理的循环”了。于是，期望找一个更强大的模板引擎。于是想起了后来有同学提起的ejs（可以执行任何js）。研究一下，果然很强大。
又想，是不是mustache也支持function呢？又回去看下，确实是！！！
// the json
{
"beatles": [
{ "firstName": "John", "lastName": "Lennon" },
{ "firstName": "Paul", "lastName": "McCartney" },
{ "firstName": "George", "lastName": "Harrison" },
{ "firstName": "Ringo", "lastName": "Starr" }
],
"name": function () {
return this.firstName + " " + this.lastName; // this 指向谁？见下面解释
}
}
// the Template:
{{#beatles}}
* {{name}}
{{/beatles}}
// Output:
* John Lennon
* Paul McCartney
* George Harrison
* Ringo Starr
有一句话很关键： If the value of a section variable is a function, it will be called in the context of the current item in the list on each iteration.
结论
不着急转投ejs，先用mustache的function，看是否足够强大（够用就行）。
ejs固然强大，不过写法稍显啰嗦，其模板也无法为后端php所用。在github上评分也没有mustache高。
参考
mustache
ejs
Comparing JavaScript Templating Engines: Jade, Mustache, Dust and More
