小试javascript模版mustache

夜以深，人未眠，本该入睡，然逢周末，无聊甚哉，故于此做文打发时间-----------

前几日，无聊，小试了下javascript版本的mustache模版，说是小试，其实主要目的是阅读学习其源码。若是仅仅是去学会如何使用它，相信除了实际开发中对你有些帮助外，写几个小demo应该是没啥大意思的（虽然我如今正在作这样的事情。ps：好吧，我错了）。言归正传，这里以前之因此说是javascript版本的，缘由是它必然有其它版本，若是你想了解其它语言版本，这里点击此连接http://mustache.github.com/它会把你传送过去。

今天呢，其它的版本就不研究了，就试试javascript版本的吧。看到着，你或许疑惑，这模版啥玩意？别急，请慢慢往下阅读。

1、在前端为何须要模版

    随着互联网前端页面愈来愈复杂，交互性愈来愈强，现在，对于前端的要求也是愈来愈高，固然本文这里指的主要是前端的javascript。在XX年前，记得我还在读书上学的时候。当时javascript就像个玩具，笔者也不止一次的被人告诫，javascript只是给网页增长点特效，并且不少浏览器对它支持不够诸如此类，大概就这些，具体也记得不清楚了，反正就是劝人不要太花时间在它上面。在当时来看，确实如此啊。又怎知世界变化如此之快，又有谁知现在javascript已然发展到如此？一不当心又扯远了，嘿嘿，回来。其实，相信若是你在开发中，遇到页面须要经过ajax加载一些东西，例如后台传来的一个用户信息列表，假设结构以下：

1 {"users":[{"name":"sam","age":14},{"name":"jack","age":24},{"name":"lucy","age":19}]}

 

在过去，咱们都是经过解析后台传来的json对象，之前面说的用户列表为例，须要迭代每一项，而后经过js字符串拼接并加入须要的标签和样式,最后动态添加到页面中去。这样作固然没什么问题，可是写起来是有些麻烦的，由于你得一次一次的拼字符串，但其实这也不是重点，最重要的是这样作维护起来也不方便，若是你须要换个展示形式，你得换上标签，再一个个仔细的拼接，每次看到一堆js中夹杂着html的代码时，就会头晕。因而，为了解决这个问题，一大堆的模版就出现了。比较典型的就是jquery的template plugin，kissyTemplate，artTemplate，还有今天讲到的mustache等等。至于它们之间的优劣性能等等这里就不讨论了，有兴趣能够本身找资料测试。既然模版可让处理以上的问题变得简单，那么mustache又是如何处理，如何使用的呢？

2、如何使用mustache

首先，固然是下载mustache喽，执行npm install mustache（电脑上须要装有Node.js与npm，若是不想这样下载安装mustache，直接进https://github.com/janl/mustache.js下载）

下载完成后，打开看下mustache.js文件，大概只有600行左右的代码，至关简洁啊。截取开始部分以下:

看了下，头部，显然支持CommonJS与AMD规范了，也就是说Node.js也亦可使用它做为模版引擎，很是棒，虽然还没试过。

看了下官方，上面说mustache主要特色是logic less Templates ，意思说，模版中无逻辑或者说不多逻辑。毕竟模版只是做为一个view而已，不须要太多的逻辑代码。它主要是经过{{ }}符号来传递变量的（这么说也许并不科学，只是大体能够这么理解）。仍是先看个简单例子：

上面有一个people的对象，里面有三个属性，其中一个属性是一个函数。mustache的使用很是简单，调用只须要Mustache.render(temp,obj)函数就能够了，其中第一个参数是你写的模版，第二个参数是你须要渲染到模版的对象。最终返回渲染完成的字符串，这里，咱们最后把他写入html文档的div标签内。

看到这，你应该能够明白模版渲染对象，提取属性的值渲染到模版的特定位置，能够理解为：{{key}} = 》 value 。

这里只是简单渲染了一个对象，那么对于文章开头提出的列表对象，又该如何作呢？看示例：

模版中经过{{#listkey}}

              {{/listkey}}

中间包裹列表中每一项的key

{{#listkey}}{{#itemkey}}{{/listkey}}

这样模版引擎会自动迭代每一项，并渲染到模版中去，是否是很简单。固然以上这些只是最基本的用法，更复杂的用法和它内部的机制今天就不写了，太晚了，写着写着天都快亮了，仍是先睡觉了zZZ