调研js模板引擎

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

时间: 2024-10-26 21:11:07

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

js模板引擎介绍搜集

js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTemplate等),如何从这么多纷繁的模板引擎中选择一款适合自己的呢,笔者最近对主流的js模板引擎(mustache,doT,juicer,artTemplate,baiduTemplate,Handlebars,Underscore)做了一番调研,分享出来希望对大家有用. 从这几个指标来比较js模板

浅析js模板引擎

js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTemplate等),如何从这么多纷繁的模板引擎中选择一款适合自己的呢,笔者最近对主流的js模板引擎(mustache,doT,juicer,artTemplate,baiduTemplate,Handlebars,Underscore)做了一番调研,分享出来希望对大家有用. 从这几个指标来比较js模板

js模板引擎--artTemplate

js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址),貌似最近耳边听到得最多的模板引擎也就是artTemplate了,所以就花个时间来研究下吧... artTemplate是新一代的javascript模板引擎,若采用拥有V8引擎的chrome浏览器进行测试,其渲染性能甚至能达到知名模板引擎Mustache的20倍以上以及模板引擎tmpl的40倍以上

JS模板引擎

JS模板引擎 :ArtTemplate 1.为什么需要用到模板引擎 我们在做前端开发的时候,有时候经常需要根据后端返回的json数据,然后来生成html,再显示到页面中去. 例如这样子: var data = [ {text: "测试一"}, {text: "测试二"}, {text: "测试三"}, {text: "测试四"} ]; function generateList(data) { var listHtml = &

js模板引擎原理,附自己写的简洁模板引擎

js处理DOM交互非常普遍,但DOM结构单纯用js字符串拼接简直难以维护,不方便理解和扩展. 下面展现了js模板引擎的实现原理: html中的模板 <script id="mytpl"> <div> 我的名字是:$name$ <br/> 今年$age$了! </div> </script> 因为script不会被浏览器解析和渲染,最大限度节省了浏览器资源,textarea标签同样可以达到效果.Template标签就是这样的目的

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

最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,从而出现在各大型网站 Twitter.淘宝网.新浪浪微博.腾讯QQ空间.腾讯微博等.那么他们各自性能怎么样?请看下面. 通常模板引擎 baiduTemplate(百度)\artTemplate(腾讯)\juicer(淘

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

最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemplate. 项目之初用的是BaiduTemplate引擎,项目完成后发布到互联网,发现数据量大时,加载速度慢了点,就考虑换其它模板引擎是否能提高渲染效率,在网上查找.对比后发现ArtTemplate更好一点,就深入了解与学习了下,两个引擎语法有点差别,但结果是一至的,下面具体介绍一下两个引擎的使用情

掌握js模板引擎

最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一种痛苦. 听过这样一句话:"技术没有缺席,只有姗姗来迟",很多技术自己不知道,并非没有.今天我想介绍的就是一个简单的js模板引擎artTemplate,让我们扬帆起航吧- 一.概述 artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃,并且充

doT js 模板引擎【初探】

js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. 常见模板引擎 baiduTemplate(百度)\artTemplate(腾讯)\juicer(淘宝)\doT\ tmpl\ handlebars\ easyTemplate\ underscoretemplate \ mustache \kissytemplate等 为什么选择doT: doT.j