调研js模板引擎

标签: js 模板引擎 | 发表时间:2013-05-15 20:14 | 作者:meikidd
出处:http://blog.csdn.net
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



作者:meikidd 发表于2013-5-15 20:14:00 原文链接
阅读:6 评论:0 查看评论

相关 [js 模板引擎] 推荐:

调研js模板引擎

- - CSDN博客Web前端推荐文章
从这几个指标来比较js模板引擎:. 1 文件大小 - 影响网络传输时间. 2 执行速度(性能) - 影响响应速度,涉及模板解析和渲染. 3 语法简明/易用/灵活/自定义操作符 - 影响开发效率和维护难度. 4 错误处理/调试 - 影响开发效率和维护难度. 5 安全(XSS) - 是否防止XSS. artTemplate(腾讯):5k.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

Juicer – 一个Javascript模板引擎的实现和优化

- - Taobao UED Team
让我们从一段代码说起,假设有一段这样的JSON数据:. 我们需要根据这段JSON生成这样的HTML代码:. 流火 (blog: ued.taobao.com). 传统的Javascript代码一定是这个样子:. 不言而喻,这样的代码混杂了html结构和代码逻辑,而且代码不具可读性,不便于后期维护,于是便有了这样一个函数:.

高性能JavaScript模板引擎原理解析

- - 腾讯CDC
  随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来. javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,近一年来在开源社区中更是百花齐放,在 Twitter、淘宝网、新浪浪微博、腾讯QQ空间、腾讯微博等大型网站中均能看到它们的身影.

如何选择Javascript模板引擎(javascript template engine)?

- - 译言-每日精品译文推荐
日期:2012-9-17  来源: GBin1.com. 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下:. 你的到了一个JSON对象,如下:. 然后你需要将json数据组织成页面内容,如下:. 代码执行功能非常简单,将json数据生成web页面中的内容,如下:.

高性能JavaScript模板引擎原理解析

- - 极客521 | 极客521
随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来. javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,近一年来在开源社区中更是百花齐放,在 Twitter、淘宝网、新浪微博、腾讯QQ空间、腾讯微博等大型网站中均能看到它们的身影.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.

來源請求.js

- 红烧鲤鱼 - Blog: timdream
很早以前就想講了,但講了大概又會被戰. 相較於英文維基百科,中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的,而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識,而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識,所以有自覺的百科編輯者反而是少數;中文維基只好長成現在這個樣子了.

Js删除节点

- - JavaScript - Web前端 - ITeye博客
 方式一:传this参数调用方法:.  方式二:js方法中通过选择器获取节点:. //此处删除的是a节点 }. 方式三:通过jQuery方式获取节点:(尚未测试,有待测试. 此处a标签传this到js中,js通过this(即a节点)取parent(即p节点). (1)p.remove();可直接删除整个p节点.

JS游戏引擎列表

- sku - 酷壳 - CoolShell.cn
这里有一个网址收集了关于JS游戏引擎开发库的一个列表,转过来. 关于使用JS和HTML5做的一些小游戏,可参见《HTML5 小游戏展示》. Name Latest Release License Type Notes The Render Engine 1.5.3 MIT 跨浏览器; 大规模 API; 开源. 2 gameQuery 0.5.1 CC BY-SA 2.5 和 jQuery 一起使用 gTile 0.0.1 Tile based.