码迷，mamicode.com
首页 > Web开发 > 详细

浅析js模板引擎

时间：2016-05-29 18:20:33      阅读：197      评论：0      收藏：0      [点我收藏+]

标签：

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 plain copy
 
  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
 
最终的一个对比：
技术分享

浅析js模板引擎

标签：

原文地址：http://www.cnblogs.com/iqian/p/5539928.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！