http://blog.csdn.net/lybwwp/article/details/18813737js模板引擎介绍搜集
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...语法,但实际可以实现循环和分支,还可以实现更复杂的逻辑。
- <!--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
最终的一个对比:
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
**********************************************************************************************
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
介绍 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
相关推荐
[你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解]; [你知道v-model的原理吗?说说看]; [你有使用过vue开发多语言项目吗?说说你的做法?]; [在使用计算属性的时,函数名和data数据源中...
此外,这些模板还考虑了内容管理和用户交互的便捷性,使得更新产品信息、新闻发布和客户反馈收集变得简单直观。选择这50套响应式网站HTML源码,企业将大大缩短网站上线时间,以最小的投资获取最大的市场竞争力。
其他说明:首页幻灯才用JS而非Flash ,搜索引擎蜘蛛更能识别并爬到相关链接,没有缩略图的新闻会自动显示暂无图片,所有链接图片均有alt注释和title标注 全站完整无错,如无法架设可以去论坛看下教程 后台地址:i...
cube.js cube.js是一个动态模板引擎————或者说是轻量级的mvvm框架,视图会传输数据的变化来自动刷新相较于传统的MVVM框架写法,它更加常规直观且符合逻辑思维,因为你书写的方式与传统布局模板没有太大的区别一...
--Interval Web App--...技术: 运行时环境:NodeJS 语言:JavaScript 框架:Express.js 数据库:Mongodb ODM:猫鼬样式:CSS 模板引擎:ejs(嵌入式javascript) 库:jQuery、Socket.io、Chart.js、Twitter Bootstrap
picture: 应用程序屏幕截图 ## :rocket: 使用的技术Node.js 表示SQLite3 修女 :man::laptop: 实践技能 :check_mark: CSS-Flexbox和网格 :check_mark: 响应式布局 :check_mark: SQlite3 :check_mark: 模板引擎-...
###网页模板引擎 ###图片处理 ###运维 ##性能测试 ##活跃开发者(排名不分先后) ##开源案例 收集Cnode的开源项目 ###社交类 ###工具类 ##商业应用 小米手机抢购 网易pomelo消息推送系统 PayPal Groupon 百度推送...
LogStash | 日志收集 | [https://github.com/logstash/logstash-logback-encoder](https://github.com/logstash/logstash-logback-encoder) Lombok | 简化对象封装工具 | [https://github.com/rzwitserloot/lombok]...
如果要使用在客户端上安全地收集信用卡信息,则需要将stripe javascript标签添加到模板中。 stripe-rails提供了一个简化此工作的助手: <%= stripe_javascript_tag %> 或者,您可以将其渲染为部分: <...
1、增加两套模板,分别为综合网店型模板和搜索引擎型模板。 2、后台修改设置结构,增加配置中心,可以管理配置文件。 3、增加查询商城商品设置。 4、增加查询店铺 5、搜索框增加店铺搜索和商家昵称搜索 6、修改了伪...
Beetl,是Bee Template Language的缩写,它绝不是简单的另外一种模板引擎,而是新一代的模板引擎,它功能强大,性能良好,秒杀当前流行的模板引擎。而且还易学易用。 Java的COM桥 JCom JCom (Java-COM Bridge) 可以...
Beetl,是Bee Template Language的缩写,它绝不是简单的另外一种模板引擎,而是新一代的模板引擎,它功能强大,性能良好,秒杀当前流行的模板引擎。而且还易学易用。 Java的COM桥 JCom JCom (Java-COM Bridge) 可以...
Beetl,是Bee Template Language的缩写,它绝不是简单的另外一种模板引擎,而是新一代的模板引擎,它功能强大,性能良好,秒杀当前流行的模板引擎。而且还易学易用。 Java的COM桥 JCom JCom (Java-COM Bridge) 可以...
Beetl,是Bee Template Language的缩写,它绝不是简单的另外一种模板引擎,而是新一代的模板引擎,它功能强大,性能良好,秒杀当前流行的模板引擎。而且还易学易用。 Java的COM桥 JCom JCom (Java-COM Bridge) 可以...
Beetl,是Bee Template Language的缩写,它绝不是简单的另外一种模板引擎,而是新一代的模板引擎,它功能强大,性能良好,秒杀当前流行的模板引擎。而且还易学易用。 Java的COM桥 JCom JCom (Java-COM Bridge) 可以...
Beetl,是Bee Template Language的缩写,它绝不是简单的另外一种模板引擎,而是新一代的模板引擎,它功能强大,性能良好,秒杀当前流行的模板引擎。而且还易学易用。 Java的COM桥 JCom JCom (Java-COM Bridge) 可以...
Beetl,是Bee Template Language的缩写,它绝不是简单的另外一种模板引擎,而是新一代的模板引擎,它功能强大,性能良好,秒杀当前流行的模板引擎。而且还易学易用。 Java的COM桥 JCom JCom (Java-COM Bridge) 可以...
Beetl,是Bee Template Language的缩写,它绝不是简单的另外一种模板引擎,而是新一代的模板引擎,它功能强大,性能良好,秒杀当前流行的模板引擎。而且还易学易用。 Java的COM桥 JCom JCom (Java-COM Bridge) 可以...
Beetl,是Bee Template Language的缩写,它绝不是简单的另外一种模板引擎,而是新一代的模板引擎,它功能强大,性能良好,秒杀当前流行的模板引擎。而且还易学易用。 Java的COM桥 JCom JCom (Java-COM Bridge) 可以...
Beetl,是Bee Template Language的缩写,它绝不是简单的另外一种模板引擎,而是新一代的模板引擎,它功能强大,性能良好,秒杀当前流行的模板引擎。而且还易学易用。 Java的COM桥 JCom JCom (Java-COM Bridge) 可以...