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插件
 
<!--Mustache 的模板 -->
<script id="Mustache" type="text/tmpl">
<ul>
{{#list}}
<li>{{{index}}}. 用户: {{{user}}}/ 网站:{{{site}}}</li>
{{/list}}
</ul>
</script> <!-- doT 的模板 -->
<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> <!--juicer 的模板 -->
<script id="juicer" type="text/tmpl">
<ul>
{@each list as val}
<li>$${val.index}. 用户: $${val.user}/ 网站:$${val.site}</li>
{@/each}
</ul>
</script> <!-- artTemplate 的模板 -->
<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> <!-- underscore 的模板 -->
<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> <!-- Handlebars 的模板 -->
<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

http://itindex.net/detail/44042-js-%E6%A8%A1%E6%9D%BF-%E5%BC%95%E6%93%8E

调研js模板引擎的更多相关文章

  1. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  2. 浅析js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  3. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  4. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  5. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

  6. 掌握js模板引擎

    最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...

  7. js模板引擎

    js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...

  8. Filter - Surge.js模板引擎过滤器

    版权所有,转载请注明出处:http://guangboo.org/2014/01/05/filter-surgejs-template-engine 过滤器在surge.js模板引擎中多处用到,其类似 ...

  9. js模板引擎--artTemplate

    js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...

随机推荐

  1. 【LeetCode】27 - Remove Element

    Given an array and a value, remove all instances of that value in place and return the new length. T ...

  2. 安卓动画之ObjectAnimator

    ObjectAnimator 不仅仅移动位置,还移动了对象view 先来代码片段: //Y轴变换 ObjectAnimator oa = ObjectAnimator.ofFloat(imageVie ...

  3. [转] 編程風格要素-The Elements of Programming Style 中文英文中英對照

    转自: http://www.loliman3000.com/tech/2fe33ce32906f0302412881.php 下面的程序風格規則提煉自Brian Kernighan和P. J. Pl ...

  4. 哈希(Hash)与加密(Encrypt)的基本原理、区别及工程应用

    0.摘要 今天看到吉日嘎拉的一篇关于管理软件中信息加密和安全的文章,感觉非常有实际意义.文中作者从实践经验出发,讨论了信息管理软件中如何通过哈希和加密进行数据保护.但是从文章评论中也可以看出很多朋友对 ...

  5. 开源框架DNN简介以及安装

    donetnuke 是一款免费的开源cms框架,目前也有收费版,不过免费版也可以适应大家大部分的需求.我前些阵子是老板让我在20天内,做好一个官网并且发布,并且指定使用dnn这个框架,考虑到又可以学习 ...

  6. Warning: $HADOOP_HOME is deprecated.解决方法

    方式1(不推荐):注释hadoop-config.sh中的 if [ "$HADOOP_HOME_WARN_SUPPRESS" = "" ] && ...

  7. hdu 2819 Swap

    Swap http://acm.hdu.edu.cn/showproblem.php?pid=2819 Special Judge Problem Description Given an N*N m ...

  8. Android打开WIFI或者移动网络的代码实现

    MainActivity如下: package wy.testnetwork; import java.lang.reflect.Field; import java.lang.reflect.Inv ...

  9. HDU 3364 Lanterns (高斯消元)

    题意:有n个灯和m个开关,每个开关控制数个灯的状态改变,给出k条询问,问使灯的状态变为询问中的状态有多少种发法. 析:同余高斯消元法,模板题,将每个开关控制每个灯列成行列式,最终状态是结果列,同余高斯 ...

  10. SQL SERVER 2005如何建立自动备份的维护计划

    SQL Server 2005中可以使用维护计划来为数据库自动备份,减少数据库管理员的工作负担.其使用方法如下: (1)启动[sql server Management Studio],在[对象资源管 ...