说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

推荐五款流行的JavaScript模板引擎

HTML文档下载 WORD文档下载 PDF文档下载
Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注。本文通过开发实例解析五款流行模板引擎:Mustache、Underscore Templates、Embedded JS Templates、HandlebarsJS、Jade templating。

近日一位20岁的开发者Jack Franklin在《The top 5 JavaScript templating engines》一文中向开发者们推荐了5款流行的JavaScript模板引擎。下面为该文的译文。

当你创建JavaScript应用时,你必然会用到JavaScript模板。当对HTML进行更新时,你可使用模板来代替库(如jQuery),使用模板可以大大简化你的代码。该文将例举当前较流行的一些模板库。

1.Mustache

Mustache通常被称为JavaScript模板的基础。另一个流行的解决方案Hanldebars实际上就是基于Mustache构建而成的。这并不意味着Mustache是一个不好的模板解决方案。下面例举一例:

Mustache.render("Hello, {{name}}", { name: "Jack" });// 返回: Hello, Jack

一旦在页面中包含了Mustache,你就可以访问全局对象“Mustache”。你可使用其中最主要的方法“render”,它包含两个参数。首个参数是实际的模板,第二个参数则为需要传入的参数值。

上例中,你可以看见“{{name}}”。其中的“{{}}”实际上为Mustache的语法,表示一个占位符。当Mustache对其进行编译时,它将在传入的对像中寻找“name”属性,并用该属性的值(该例中为“Jack”)来代替“{{name}}”。

在这里,模板只为一个字符串,但如果你有一个更复杂的模板,该方法可能就不适用了。通常的解决方案是将模板放在“script”标签中:

<script type="text/x-mustache" id="template">    <p>Hello, {{name}}</p>  </script>

然后,我们可以访问的script标签的内容。例如,使用jQuery,它很容易实现:

var temp = $("#template").html();Mustache.render(temp { name: "Jack" });// 返回: <p>Hello, Jack</p>

给“script”一个浏览器无法理解的“type”属性,浏览器就会忽略该Script,不将它作为JavaScript,也不会执行它。

你也可在模板中使用循环,如下面这个模板:

{{#people}}  {{name}}{{/people}}

传递数据:

{ people: [ { name: "Jack" }, { name: "Fred" } ] }

你将得到“JackFred”字符串。

Mustache还有更多的功能,点击这里查看详情。

2.Underscore Templates


Underscore提供了各种各样的有用的方法,也提供了简单的模板。它的语法与Mustache稍有不同。下面为一个简单案例:

_.template("Hello, <%= name %>", { name: "Jack" }); // 返回:Hello, Jack

如果你曾经使用过Embedded Ruby(缩写为ERB),你就会对该语法更为熟悉。“<%=name%>”表示无论“name”是什么值,都应该输出在“<%=name%>”的位置。Underscore同样有循环与条件语句,但与Mustache同样稍有不同。

var template = "<% _.each(people, function(name) { %> <li><%=   name %></li> <% }); %>"_.template(template, { people: ["Jack", "Fred"] } );

在Underscore模板中,你可以在“<% %>”是插入任何JavaScript。注意,“<%= %>”用于输出,<% %>用来包含JavaScript。这意味着你在JS中使用的任何形式的循环与条件语句同样可以在Underscore中使用。

了解Underscore更多功能,请点击这里查看。

3.Embedded JS Templates


Embedded JS(EJS) 来源于ERB模板,且与ERB有很多相似之处。它有着与ERB相同的Tag,且包含很多相同的功能。

EJS的特别之处在于,你需要把模板存于单独文件中,并将文件名传递给EJS。它会加载该文件,并返回HTML。

// in template.ejs  Hello, <%= name %>// in JS file  new EJS({ url: "template.ejs" }).render({ name: "Jack" });// 返回: Hello, Jack

注意,你可以加载文本模板:

new EJS({ text: "Hello, <%= name %>" }).render({ name: "Jack" });

下面将介绍如何进行循环,以数组“People”为例,并在网站上链接到他们的个人页面:

// template.ejs  <ul>    <% for(var i = 0; i < people.length; i++) { %>      <li><%= link_to(people[i], "/profiles/" + people[i]) %></li>    <% } %>  </ul>// in JS filenew EJS({ url: "template.ejs" }).render({ people: [ "Jack", "Fred" ] })// Each rendered <li> will look like:<li><a href="/profiles/Jack">Jack</a></li>

这与Underscore 有些相似,但要注意“link_to”的使用。它是EJS定义的一个Helper,以便链接更容易使用。

了解更多EJS,请关注EJS官方网站。

4.HandlebarsJS


Handlebars为最流行的模板引擎之一,构建于Mustache之上。适用于Mustache模板的功能同样适用于Handlebars模板。同时,Handlebars还增加了很多Helper。其中之一是“With”。

// with this template:  var source = "{{#with author}} <h2>By {{firstName}} {{lastName}}</h2> {{/with}}";  var template = Handlebars.compile(source);  var html = template({ author: { firstName: "Jack", lastName: "Franklin" } });// returns: <h2>By Jack Franklin</h2>

注意,Handlebars编译器的工作方式略有不同。首先,你把该模板传递给“Handlebars.compile”,它会返回一个函数。你将包含数据的对象传递给该函数,该函数将返回HTML。“{#with}}”Helper取得一个对象,并允许你在其中向该对象传递属性。但不是采用以下形式:

 {{ author.firstName}} {{author.lastName}}

而是下面这种形式

 {{#with author}} {{firstName}} {{lastName}} {{/with}}

这样可以节约输入,尤其当你十分频繁地使用它时。

Handlebars也提供了“each”Helper: 

var source = "{{#each people}} {{name}} {{/each}}";  var template = Handlebars.compile(source);  var html = template({ people: [{ name: "Jack" }, { name: "Fred" }] });  //返回: "JackFred"

此外,你还可以使用自己的方法来扩展Handlebars,具体方法可参与该文档。

5.Jade templating


随着Node.js的流行及大量Web应用构建于它之上,现在已有很多模板被设计用于服务器端。Jade模板与我们目前为止看到的大不相同,它依靠大量的缩进与空格。下面看一例:

// template.jade  p    | Hello,    = name// JS  jade.renderFile("template.jade", { name: "Jack" }, function(err, result) {    console.log(result);    // logs: Hello, Jack  });

首次看到Jade可能会让你不舒服,但你会很快适应它。在“p”下面缩进两个字符,表明这两个字符存在于“p”内。“|”用来告知Jade,该行是需要输出的纯文本;“=”用来告知Jade寻找一个名为“name”的变量。

我们同样可以在Jade中使用循环:

each person in people    li=person

调出存储名字的数组:{ people: [ "Jack", "Fred" ]},它将输出:

<li>Jack</li><li>Fred</li>

Jade具有很多其他模板所不具有的功能。它也可以做诸如输出Script标签此类的事:

script(type="text/javascript", src="myfile.js")

了解更多Jade templating功能,请点击这里查看。

这里只例举了最流行的五款模板引擎。此外还有很多,希望以该文为起点,帮你找到最适合你自己的模板引擎。

原文链接:The top 5 JavaScript templating engines

保益互动创始人曹军:听到的世界更精彩,盲人应用背后的故事 Gumi公司CEO国光宏尚: 大公开!日本手游市场攻克方法! Great Hill Partners高管Chuck Goldman &amp;amp; 南京创毅CEO William Wei:超越黑莓——下一代企业移动 高通业务拓展副总裁沈劲:智能手机2.0——以体验为中心 百度副总裁李明远:百度轻应用——长尾APP的最佳选择 中国工程院院士李德毅:大数据时代的认知计算 创新工场联合创始人汪华:2013年中国移动互联网进入深入区 百度副总裁李明远:解答关于百度轻应用的八大疑问 谷歌推出PNaCl,帮助开发者在任何硬件和网站上运行代码 阿里云:双十一350亿交易额的幕后英雄 索尼移动智能设备全球技术总监Goran Andersson:索尼移动可穿戴设备解决方案 腾讯社交网络事业部副总裁陈磊:腾讯移动开发者服务体系 基调网络副总裁陈靖华:全面掌握移动应用性能 蓝港在线创始人王峰:手游新时代下的机会与挑战! Couchbase CEO Bob Wiederhold:数据库云端同步,移动应用开发的未来 三星电子大中华区副总裁黄伽卫:构建移动互联生态,解读内容服务新方向 MDCC 2013移动开发者大会:新浪潮,新硬件! 网站建设,如何平衡产品特性和利益需求? 开发者是如何提升技能水平的 Databricks核心成员专访:大数据时代“智能手机”Spark 数据密集、快速启动、核心应用,IBM存储重兵布阵 企业移动应用与BYOD:移动互联大势所趋 “首届智能硬件峰会”上午会议亮点汇总 代价究竟高不高,苹果为什么要在Android专利诉讼上花费2亿美元? 产品与设计专题论坛(下):App之美 产品与设计专题论坛(上):扁平还是拟物?产品说了算! 首届移动娱乐游戏峰会:中外手游的交锋与对抗(下) 研发人员超过500,基金会金牌会员,华为豪赌OpenStack New way of thinking:索尼SmartWatch 2应用开发马拉松大赛圆满结束 离了你地球照样转,谷歌地图并非苹果的必需品 面试必备的9大成功秘诀 我只安装了Rose,Vss,却常有提示:虚拟内存不足,我在“设置”中改为499mb,还是没用 HtmlInputFile的缺陷,还可以用什么控件或方法来做? 问一下wdl格式的文件用什么软件可以打开? 先来的得分。OVERRIDE 和 OVERLOAD 的区别究竟是什么?谢谢! ip地址的添加, 大家看看什么原因出错???SOS 又是一个巨简单的问题,怎么偶老是问这样的问题? 为何会这样? 谁能帮我用PB做一个学籍管理系统 大家都来发表意见:我因为职业道德问题,被迫辞职 谁能开导开导小弟,各位大哥帮帮忙吧。我真没得混了。 在VB中如何把图片存储到SQL Server 的数据库中 请问CDialogBar用鼠标拖动改变其大小(这时其大小并没变化)时,将触发什么事件? capboy:为什么我加入了memfile.h后编译回出这样的错误: 我为什么在2000svr下,安装realserver7.0,装不上???(请高手帮忙。) 如何编写象datagrid一样的控件?大家给点建议。 jb6中怎么象JDK中一样编译类哦? 关于非阻塞通信的一个问题!(BSD系统,非WSA...) 哪里有power builder 8.0正式版的下载 我为什么在2000svr下,安装realserver7.0,装不上???, 想用opengl作动画,那本书好?谢啦! 如何才能实现类似PHOTOSHOP的标尺? 有没有方法可以获得所有的消息常量? 各位大虾,请问如何抓屏,就是只抓窗口内容的那种,感激不尽 这样define有什么好处? 对同不端口能不能用多个socket与多台机器建立通信?? 如何判断DataSet中是否为空~!! 求用TAPI通讯示例! 一个很好的访问统计系统,但是希望高手能修改的更完善一点 ACCESS的问题 大家都是怎么管理记录的唯一性的啊? 苦恼………… 怎样截获窗口的最小化、最大化、关闭按钮和双击窗体的标题栏的响应事件??? 如何判断DataSet中是否为空~!! 有没有人在用或会用FreeBSD,能不能回个话? 哪里有pb8.0正式版下载? crystal report 8.0装完之后,为什么在PROJECT ADD里找不到crystal report? ListView的背景怎么改变?要求显示的内容为透明的? 我想找个工作,请指教! 重复这个字符为什么不能运行呢? 能不能这样访问property? 大型的邮件系统,支持5万用户 菜鸟求助 command.exe vs cmd.exe;regedit.exe vs regedt32.exe区别?fat32上能装win2000? VC中怎么调用template类。。,知道者请进 capboy:麻烦你能再发一个用memfile例子改写的网络播放器的例子给我吗? 今天心情好,问题基本解决,散分! vb中怎么样将excel模板保存成以今天的日期为名的excel文件 如何在文件夹下放一个.htm文件,使得打开文件夹时需提供密码才能打开? ar7_top谢谢你的帮助!快来笑纳! 哪里可以找到java实例的电子书 hi,怎么保存一些经典的帖子到本地啊? TreeView问题 请问:食用少量石灰对人体有害吗? 为什么滑动摩擦力和拉力无关? 求物理大神来解!(第二题谢谢) 石灰场发石灰时散发出的白烟是什么?对人体或环境有害吗? 旅馆房间内电话号码有可能不是当地的号码么为什么 我住在北京的一家旅馆内 但房间内电话号码归属地却是南京呢? 什么粉末可以加快水的沸腾那请问 怎么买的到呢? 如图所示,水平拉力F是19.6牛顿,刚好能使196牛顿的物体在水平桌面上匀速前进,求桌面对物体滑动摩擦 如何查询四级成绩 某宾馆客房部有60个房间供游客居住,当每个房间的定价为每天200元时,房间可以住满.当每个房间每天的定价每增加10元时,就会有一个房间空闲.对有游客入住的房间,宾馆需对每个房间每天 数字编码 为什么摩擦力的大小与拉力大小无关不是摩擦力等于拉力马,拉力增大,摩擦力不变吗 某宾馆客房部有60个房间供游客居住,当每个房间的定价为每天200元时,房间可以住满.当每个房间每天的定价每增加10元时,就会有一个房间空闲.对有游客入住的房间,宾馆需对每个房间每天 石灰对人体有害吗 为什么摩擦力的大小与拉力无关吗 某宾馆客房部有60个房间供游客居住,当每个房间的定价为每天200元时,房间可以住满.某宾馆客房部有60个房间供游客居住,当每个房间的定价为每天200元时,房间可以住满.当每个房间每天的定 如图,用10牛的力拉重为100牛的物体在水平地面上以2m/s的速度匀速前进,物体与地面的摩擦力为物重的0.24倍则拉力的功率为?w,装置的机械效率为? 某宾馆有50个房间供游客居住,当每个房间的定价为180元时,房间会全部住满,当每个房间每天的定价每增...某宾馆有50个房间供游客居住,当每个房间的定价为180元时,房间会全部住满,当每个房间 次氯酸的强氧化性是不是只针对有机物 亚硝酸钠 吃多少会死鸡吃了亚硝酸钠会怎样? 某宾馆有50个房间供游客居住,当每个房间每天的定价为180元时,房间会全部注满;当每个房间每天的定价每增加十元时,就会有一个房间空闲.如果有块居住房间,宾馆需对每个房间每天支出20元的 某宾馆客房部有40个房间供游客居住,当每个房间的定价为每天100元时,房间可以住满.当每个房间每天的定价每增加10元时,就会有一个房间空闲.对有游客入住的房间,宾馆需对每个房间每天支 平房墙壁上白色的类似石灰渣的是什么,对身体有坏处吗 宾馆有50个房间供游客居住,当每个房间的定价为每天180元时,房间会全部注满房间单价每增加10元,就会有一个房间空闲.如果游客居住房间,宾馆每间每天需花费20元的各种维护费用.房价定价多 某宾馆客房部有60个房间供游客居住,当每个房间的定价为每天200元时,房间可以住数学某宾馆客房部有60个房间供游客居住,当每个房间的定价为每天200元时,房间可以住满.当每个房间每天的 墙壁为什么要涂石灰?墙壁涂石灰除了美化还要什么作用? 易拉罐汽水放久了会爆炸吗?有一罐放了一年多的易拉罐汽水,比以前胖了很多.如果一直放着,它会爆炸吗?谢谢 镁强粉多少公斤一袋 光子有无质量? 某宾馆有50个房间供游客居住,当每个房间的定价为每天180元时,房间会全部住满.当每个房间每天的定价增加(←)增加10元,就会有一个房间空闲.宾馆需对每个房间每天支付20元的各种费用.物 冒险岛 镁强粉 大石头 是什么? 光子是什么东西,有质量吗要回答确切 求好心人帮我查下成绩,需要下载个什么锁.我自己的电脑不兼容.准考证号是325031121107020.姓名:蔡传.太低的话,私聊我下哈~虽然知道过不了还是想看看有多低~ 什麼是镁强粉 光子的大小光线由光子构成,一个光子究竟有多大?应该如何描述它的体积和密度? 镁棒是什么?作用?用途在哪里? 冒险岛镁强粉和燃烧的尾巴干嘛的 假设光是由光子组成的,那光子的生命周期是多长,光子的运动轨迹,光子的能量,质量,体积等等 某宾馆有50个房间供游客居住,当每个房间定价为每天180元时,房间会全部注满;房间单价每增加10元,就会有一个房间空闲.如果游客居住房间,宾馆每间每天需花费20元的各种维护费用.房价定价 含有少量铜粉的氢氧化镁粉末(均匀混合),其中镁元素的质量分数为40%.取该混合物粉末30g与一定量的20%的硫酸恰好完全反应,求反应后所得溶液中硫元素的质量分数 人类回进化成什么样子?人类会进化成什么样?是科学家说的矮矮的,头大脚小吗? 光子有质量吗?物体接近光速时,质量变为无限大,所以惯性为无限大,要改变它原来的运动状态就要对其施加无限大的力,所以任何有质量的物体都不可能超过光速.但是,由波粒二象性可知光可以 某宾馆有50个房间供旅客居住,当每房定价为每天180元,房间全部注满,当每房每天定价某宾馆有50个价房间供旅客居住,当每房定价为每天180元,房间全部注满,当每房每天定价增加10元,则有一房间 求大神帮忙做一道线性代数题?急 光子是否具有质量和体积 黑洞知识 大学线性代数!第一第二题, 地理求大神解答! 关于黑洞的知识. 第三题,线性代数的题目,求大神帮忙 这分别是哪三座城市 黑洞的有关知识知识问答天文的, 线性代数题,如图. 亚硝酸钠食用多了会怎样 黑洞的全部知识 求大神做个线性代数题, 农药的危害 (要全!)一定要多,越多越好. 在研究一定电压下,电流与电阻的关系时,电路如图所示,电源如图所示,电源电压恒为3v,滑动变阻器上有“15v 1A”字样.在a b间先后接入不同阻值的定值电阻 R,移动滑片P,使电压表示数为1.5V,读出 数字编码有哪些 正确使用农药有何益处,滥用农药有什么危害只要重点间简短 用一水平力拉着木块在一长木板上做匀速直线运动,先后两次运动速度不同,而其他条件不变,第一次木板的速度为0.3米/秒,第二次木块的速度为0.15米/秒,则( ) A.第一次的拉力是第二次的二倍; B.
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘