被我误解的模板引擎——mustache

我粗心地以为，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