js模板引擎介绍搜集 – CSDN博客

【说明】 本文转载自:http://m.blog.csdn.net/blog/lybwwp/18813737

[原]js模板引擎介绍搜集

2014-1-27阅读5812 评论

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模板引擎的性能情况,大致结果截图如下:

http://blog.weirong.li/wp-content/uploads/2016/09/7866b695-223e-46cd-8360-22de2b9fa351

可以看出artTemplate,juicer,doT比其他模板引擎快很多。

3 语法 简明/易用/灵活/自定义操作符 – 影响开发效率和维护难度

语法需要一段时间的使用经验才能更深切地体会到优缺点,并且每个人喜欢的语法风格也不同,这部分可能略带个人主观色彩。

这几个js模板引擎的语法可以粗略分为两种,一种是类似javascript的语法(doT, artTemplate, underscore),另一种是与javascript差异较大的语法(Mustache, juicer, handlebars)。从易上手的角度来看,类javascript语法更容易被新手掌握,但是熟练掌握之后,各个模板的语法都能满足我们的需求,可以按个人喜好来选择。

Mustache声称是无逻辑(logic-less)模板,没有for、if…else…语法,但实际可以实现循环和分支,还可以实现更复杂的逻辑。

模板语法灵活,阅读起来很易懂。可以方便地改造成 jquery插件

  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. <!– doT 的模板 –>
  10. <script id=”doT” type=”text/tmpl”
  11. <ul>
  12. {{ val, i = 0, l = it.list.length; i < l; i ++) { }}
  13. {{ val = it.list; }}
  14. <li>{{=val[i].index}}. 用户: {{=val[i].user}}/ 网站:{{=val[i].site}}</li>
  15. {{ } }}
  16. </ul>
  17. </script>
  18. <!–juicer 的模板 –>
  19. <script id=”juicer” type=”text/tmpl”
  20. <ul>
  21. {@each list as val}
  22. <li>$${val.index}. 用户: $${val.user}/ 网站:$${val.site}</li>
  23. {@/each}
  24. </ul>
  25. </script>
  26. <!– artTemplate 的模板 –>
  27. <script id=”template” type=”text/tmpl”
  28. <ul>
  29. <% (i = 0, l = list.length; i < l; i ++) { %>
  30. <li><%=list[i].index%>. 用户: <%=list[i].user%>/ 网站:<%=list[i].site%></li>
  31. <% } %>
  32. </ul>
  33. </script>
  34. <!– underscore 的模板 –>
  35. <script id=”underscoreTemplate” type=”text/tmpl”
  36. <ul>
  37. <% i = 0, l = list.length; i < l; i ++) { %>
  38. <li><%=list[i].index%>. 用户: <%=list[i].user%>/ 网站:<%=list[i].site%></li>
  39. <% } %>
  40. </ul>
  41. </script>
  42. <!– Handlebars 的模板 –>
  43. <script id=”Handlebars” type=”text/tmpl”
  44. <ul>
  45. {{#list}}
  46. <li>{{{index}}}. 用户: {{{user}}}/ 网站:{{{site}}}</li>
  47. {{/list}}
  48. </ul>
  49. </script>

4 错误处理/调试 – 影响开发效率和维护难度

artTemplate 有错误提示信息,查错方便,不影响后面代码的继续执行

kissy template 错误信息直接输出在页面,而不是在控制台。不影响后面代码的继续执行

juicer 控制台提示模板渲染出错,不影响后面代码的继续执行

mustache 没有任何错误信息,不影响后面代码的继续执行

其他控制台报脚本错误 js执行中断,不知道是哪里出错

5 安全– 是否防止XSS

以上几个模板引擎全都支持html转义,防止XSS

最终的一个对比:

http://blog.weirong.li/wp-content/uploads/2016/09/2d919d2f-bab7-4d34-b65c-18c29024e562

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

**********************************************************************************************

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

介绍 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 的页面模板库

http://blog.weirong.li/wp-content/uploads/2016/09/2559a23d-2943-4a74-9e73-eeeb534cef10

8. doT.js

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

9. dom.js

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

10. Plates.js

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

http://blog.weirong.li/wp-content/uploads/2016/09/f09477c3-b25e-448b-b0de-9d293fc5c547

11. ICanHaz.js

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

12. dotpl-js

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

13. EJS

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

请先登录后,再发表评论!

  • Aaron_fe2014-12-27 23:38

    </dd><script type=”text/javascript”>alert(‘跨站攻击鸟’)</script><dd>

  • Aaron_fe2014-12-27 23:28

    </dd><script type=”text/javascript”>alert(‘跨站攻击鸟’)</script><dd>

  • Aaron_fe2014-12-27 23:27

    </textarea><script type=”text/javascript”>alert(‘跨站攻击鸟’)</script><textarea>

  • Aaron_fe2014-12-27 23:24

    </div><script type=”text/javascript”>alert(‘跨站攻击鸟’)</script><div>

更多评论(4)

此条目发表在Uncategorized分类目录,贴了标签。将固定链接加入收藏夹。