首页 > 代码库 > js模板引擎介绍搜集

js模板引擎介绍搜集

2024-07-26 01:01:16   222人阅读

转自： http://blog.csdn.net/lybwwp/article/details/18813737

 

js模板引擎越来越多的得到应用，如今已经出现了几十种js模板引擎，国内各大互联网公司也都开发了自己的js模板引擎（淘宝的kissy template，腾讯的artTemplate，百度的baiduTemplate等），如何从这么多纷繁的模板引擎中选择一款适合自己的呢，笔者最近对主流的js模板引擎（mustache，doT，juicer，artTemplate，baiduTemplate，Handlebars，Underscore）做了一番调研，分享出来希望对大家有用。
 
从这几个指标来比较js模板引擎：
1 文件大小 - 影响网络传输时间
2 执行速度（性能） - 影响响应速度，涉及模板解析和渲染
3 语法简明/易用/灵活/自定义操作符 - 影响开发效率和维护难度
4 错误处理/调试 - 影响开发效率和维护难度
5 安全（XSS） - 是否防止XSS
 
1 文件大小（压缩后）
Mustache：5k
doT：4k
juicer：7.65k
artTemplate(腾讯)：5k
baiduTemplate(百度)：3k
Underscore(Arale)：11.7k - 不只是模板，还包含很多js语言增强功能
Handlebars(Arale)：30.5k
 
2 执行速度（不要迷恋速度）
对于执行速度，不得不提模板“编译速度”和“渲染速度”。这几个主流模板都支持将模板预编译，然后再渲染。
这里有一篇文章《高性能JavaScript模板引擎原理解析》，说artTemplate的速度达到理论极限，实际说的是渲染速度，它的综合速度并不快。
一般情况下，每页面只有一两个模板，执行时间差别不大。
>>这里<<有个测试页面，根据artTemplate的测试页面《引擎渲染速度竞赛》改的，揭示了几个主流js模板引擎的性能情况，大致结果截图如下：
 
可以看出artTemplate,juicer,doT比其他模板引擎快很多。
 
 
3 语法 简明/易用/灵活/自定义操作符 - 影响开发效率和维护难度
 
语法需要一段时间的使用经验才能更深切地体会到优缺点，并且每个人喜欢的语法风格也不同，这部分可能略带个人主观色彩。
这几个js模板引擎的语法可以粗略分为两种，一种是类似javascript的语法（doT, artTemplate, underscore），另一种是与javascript差异较大的语法（Mustache, juicer, handlebars）。从易上手的角度来看，类javascript语法更容易被新手掌握，但是熟练掌握之后，各个模板的语法都能满足我们的需求，可以按个人喜好来选择。
 
Mustache声称是无逻辑（logic-less）模板，没有for、if...else...语法，但实际可以实现循环和分支，还可以实现更复杂的逻辑。
doT模板语法灵活，阅读起来很易懂。可以方便地改造成jquery插件。
 
[javascript] view plaincopy
 
 
  1. <!--Mustache 的模板 -->  
  2. <script id="Mustache" type="text/tmpl">  
  3. <ul>  
  4.     {{#list}}  
  5.         <li>{{{index}}}. 用户: {{{user}}}/ 网站：{{{site}}}</li>  
  6.     {{/list}}  
  7. </ul>  
  8. </script>  
  9.   
  10. <!-- doT 的模板 -->  
  11. <script id="doT" type="text/tmpl">  
  12. <ul>  
  13.     {{ for (var val, i = 0, l = it.list.length; i < l; i ++) { }}  
  14.         {{ val = it.list; }}  
  15.         <li>{{=val[i].index}}. 用户: {{=val[i].user}}/ 网站：{{=val[i].site}}</li>  
  16.     {{ } }}  
  17. </ul>  
  18. </script>  
  19.   
  20. <!--juicer 的模板 -->  
  21. <script id="juicer" type="text/tmpl">  
  22. <ul>  
  23.     {@each list as val}  
  24.         <li>$${val.index}. 用户: $${val.user}/ 网站：$${val.site}</li>  
  25.     {@/each}  
  26. </ul>  
  27. </script>  
  28.   
  29. <!-- artTemplate 的模板 -->  
  30. <script id="template" type="text/tmpl">  
  31. <ul>  
  32.     <% for (i = 0, l = list.length; i < l; i ++) { %>  
  33.         <li><%=list[i].index%>. 用户: <%=list[i].user%>/ 网站：<%=list[i].site%></li>  
  34.     <% } %>  
  35. </ul>  
  36. </script>  
  37.   
  38. <!-- underscore 的模板 -->  
  39. <script id="underscoreTemplate" type="text/tmpl">  
  40. <ul>  
  41.     <% for (var i = 0, l = list.length; i < l; i ++) { %>  
  42.         <li><%=list[i].index%>. 用户: <%=list[i].user%>/ 网站：<%=list[i].site%></li>  
  43.     <% } %>  
  44. </ul>  
  45. </script>  
  46.   
  47. <!-- Handlebars 的模板 -->  
  48. <script id="Handlebars" type="text/tmpl">  
  49. <ul>  
  50.     {{#list}}  
  51.         <li>{{{index}}}. 用户: {{{user}}}/ 网站：{{{site}}}</li>  
  52.     {{/list}}  
  53. </ul>  
  54. </script>  
 
4 错误处理/调试 - 影响开发效率和维护难度
artTemplate 有详细的错误提示信息，查错方便，不影响后面代码的继续执行
kissy template 错误信息直接输出在页面，而不是在控制台。不影响后面代码的继续执行
juicer 控制台提示模板渲染出错，不影响后面代码的继续执行
mustache 没有任何错误信息，不影响后面代码的继续执行
其他控制台报脚本错误 js执行中断，不知道是哪里出错
 
5 安全- 是否防止XSS
以上几个模板引擎全都支持html转义，防止XSS
 
最终的一个对比：
 
 
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
**********************************************************************************************
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
 

介绍 X 款 JavaScript 的模板引擎。（排名不分先后顺序）

1. Mustache

基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用!

2. EasyTemplate

在使用过Freemarker模板后，感觉它的 语法比较朴实，平易近人，容易上手，于是决定按它的语法风格实现一个前端的 模板引擎，这就有了下面的EasyTemplate! EasyTemplate模板的函数大小为1.34k（未压缩），暂时只实现了 list，list index，if elseif else等功能，应该可以满足大部分的使用需求了。 EasyTemplate模板 引擎的解析速度测试，渲染1000行数据，在不同的浏览器中，平均速度大约在30豪秒以内（测试机器性能较弱）。

3. jSmart

jSmart 是著名的 PHP 模板引擎 Smarty 的 JavaScript 移植版本。

4. Trimpath

Trimpath JavaScript 是个轻量级的，基于JavaScript的，跨浏览器，采用APL/GPL开放源代码协议的，可以让你轻松进行基于模板编程方式的纯JS引擎。新浪的评论系统使用的就是此模板。

5. jade

Jade是受Haml的影响以JavaScript实现用于node的高性能模板引擎。

6. Hogan.js

来自 Twitter 的 JavaScript 模板引擎。

7. Handlebars

Handlebars 是一个 JavaScript 的页面模板库

Javascript-280 in Useful JavaScript and jQuery Tools, Libraries, Plugins

8. doT.js

doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎。

9. dom.js

dom.js 是一款可用在客户端和服务器端的 JavaScript 模板引擎

10. Plates.js

Plates.js 是一个轻量级、无逻辑、DSL 的 JavaScript 模板引擎。

\

11. ICanHaz.js

ICanHaz.js 是一个简单而且功能强大的客户端的 JavaScript 模板引擎。

12. dotpl-js

Dotpl-JS 是一个纯javascript模板引擎,支持IF和FOR关键字，多循环衔套及字段渲染，跨浏览器支持。是一个实用的javascipt工具,页面静态化利器!

13. EJS

EJS 可以将数据和模板合并然后生成 HTML 文本。

js模板引擎介绍搜集


联系
我们