js模板引擎介绍搜集

时间 2019-11-30

原文原文链接

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

<script id="Mustache" type="text/tmpl">
<ul>
{{#list}}
<li>{{{index}}}. 用户: {{{user}}}/ 网站：{{{site}}}</li>
{{/list}}
</ul>
</script>
<script id="doT" type="text/tmpl">
<ul>
{{ for (var val, i = 0, l = it.list.length; i < l; i ++) { }}
{{ val = it.list; }}
<li>{{=val[i].index}}. 用户: {{=val[i].user}}/ 网站：{{=val[i].site}}</li>
{{ } }}
</ul>
</script>
<script id="juicer" type="text/tmpl">
<ul>
{@each list as val}
<li>$${val.index}. 用户: $${val.user}/ 网站：$${val.site}</li>
{@/each}
</ul>
</script>
<script id="template" type="text/tmpl">
<ul>
<% for (i = 0, l = list.length; i < l; i ++) { %>
<li><%=list[i].index%>. 用户: <%=list[i].user%>/ 网站：<%=list[i].site%></li>
<% } %>
</ul>
</script>
<script id="underscoreTemplate" type="text/tmpl">
<ul>
<% for (var i = 0, l = list.length; i < l; i ++) { %>
<li><%=list[i].index%>. 用户: <%=list[i].user%>/ 网站：<%=list[i].site%></li>
<% } %>
</ul>
</script>
<script id="Handlebars" type="text/tmpl">
<ul>
{{#list}}
<li>{{{index}}}. 用户: {{{user}}}/ 网站：{{{site}}}</li>
{{/list}}
</ul>
</script>

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

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

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

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

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

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

5 安全- 是否防止XSS

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

最终的一个对比：

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

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

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

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

1. Mustachehtml

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

2. EasyTemplatejava

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

3. jSmartjquery

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

4. Trimpathgithub

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

5. jade浏览器

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

6. Hogan.js

来自 Twitter 的 JavaScript 模板引擎。

7. Handlebars

Handlebars 是一个 JavaScript 的页面模板库

8. doT.js

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