最近对前端模板引擎非常有爱，于是花了几天时间埋头研究，终有所获。本来只想着研究学习，最后还是 鼓捣出了自己的一个前端模板引擎-cocoTemplate。模板引擎是随着Ajax技术频繁使用的web2.0这样的背景下诞生的。它主要用来把模板和 数据渲染成视图。前端模板引擎其实并不复杂，其本质就是将混有数据的字符串转换成js语法执行。到现在前端模板引擎也已经非常多，正是他们给我的学习带来 了极大地便利，再次感谢乐于分享的各位。尤其是jQuery作者所写的tmpl短小却蕴含丰富的代码，正是我对此学习研究的入门。刚好网上有个测试渲染性 能的小程序，也把自己写的放上去测试了一下，性能还不错呢，排在第二。当然这个测试并不能做到完全精确，速度和排名也会有些波动，所以仅供参考而已。

coco-Template的使用场景
和大多数前端模板引擎一样，如果你有动态ajax请求数据并需要封装成视图展现给用户，那么你就可以使用它而使你更高效便利。或者你已经厌倦无休止的字符串手动拼接成html的方式，迫切想要找到解决方案，那么这就是你的选择之一。

coco-Template实现原理
起初在读懂了tmpl的原理之后大概也就明白了前端模板引擎的工作原理，实质上就是利用正则等方法去解析分割字符串。将html部分将其转化成字符 串，而对于js语言部分则会将其转化为js执行代码，然后利用+=或数组的push方法将这些字符串拼接成最后解析完成的视图字符串，并返回，这一切的执 行都是利用js Function方法来实现。

性能差异分析
在如上的渲染性能测试工具中，不同的模板的性能也会有差异，蓝狮官网但是其实在一般的使用场景中，这种性能差异是无法察觉到的，而只有在一次性进行上万次的渲染后，这种性能差异才会有所体现。

在测试中，tmpl，baiduTemplate，easyTemplate，jQuery.tmpl表现得要慢一些。至于tmpl为什么会有些 慢，我倒是知道的，因为tmpl为了简便，使用with语句。而就是这个with语句让其在渲染性能测试中速率比未使用with语句的慢了好几倍。所以在 程序中尽量不使用with语句。而一般的模板引擎优化也在此，将with语句替换为添加局部变量的方式。cocoTemplate也正是这样做的。这一步 优化之后基本就已达到性能的一个瓶颈了，优化其他部分代码也不会让速度有成倍级的增长了。再进一步优化就是对一些正则的优化。

说说artTemplate吧，他目前渲染速率基本排在首位，其作者对其做了大量优化，还加入了debug和语法扩展等功能，这是一般模板都不具备 的。cocoTemplate也不会向这方面完善了，我还是喜欢简单纯粹的东西，而artTemplate源代码达到了500行这是我无法接受的。过多的 容错性，过多的扩展，只会带来更高的复杂度而已，我宁愿让我的使用者必须按照要求来，也不愿去包容他粗心的错误，我是严格限制约束派。

前端模板引擎的分派
随着前端模板引擎的逐渐增多，大致形成了两种风格的模板。一种是原生派，另一种属于Logic-less的派别。cocoTemplate则属于前 者。Logic-less派别的典型引擎就是mustache，其对原生语法再进行了一次封装，这样你的模板中就不会因为嵌入了太多js代码而变得可读性 太差，其对使用者则显得相对有好。这两种风格其实无谁更好的区别，只是在于使用者的个人喜好，我个人就比较偏好原生的JS模板。当然Logic-less 也很好，不过你得先学习期其模板语法，这样才能致用。好了，匆匆收尾，希望能对你有所帮助。

关于coco-template的下载和使用

标签：cocoTemplate, 前端模板引擎