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

推荐五款流行的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

专访Line大中华区总裁:即使卖萌,也能深入人心 iOS开发者必备:四款后端服务工具 市场研究公司:iPhone5C/5S成本分别是173、199美元 对软件开发有利的5个敏捷编程方法 移动端性能大比拼:CSS Sprites vs. Data URI 三大峰会七大论坛,2013移动开发者大会将于11月在京举行 黑莓47亿美元收购的背后 微软或成最大受益者 搜索大战升级:360搜狗相互起诉对方不正当竞争 诺基亚将于10月22日发布6款新产品 平板Lumia 2520等 从17美元到50美元 Facebook股价上涨背后的两大关键 12个理由:为什么我会认为Android比iOS 7好! AMD推 &quot;Mantle&quot; API 欲释放GPU全部潜能 Salesforce架构:日事务过13亿,2.4万TPS的数据库峰值 久违的iOS,新鲜的SDK,豌豆荚发布云相册 喜大普奔:谷歌15岁了,生日快乐! 传福特CEO Alan Mulally目前最有希望执掌微软 微软计划将WP8和Win8应用商店合并?太好了! 响应开发者要求:Kinect for Windows SDK 1.8发布 OpenStack基金会BD总监:希望有更多的中国公司加入 CTO如何避免决策失控(三):从CEO角度看CTO的应对能力 IT界需求最旺的16项技能 PMC发布8系列RAID卡 找准国内互联网企业需求 早Google一步,eBay数据中心率先搭载了火星上使用的技术 目标专利2000,技术研发人员占55%,斐讯的厚积薄发 SwiftStack CEO:分布式存储的未来 触控陈昊芝:“好声音”标王对移动游戏未来的预测 Office将更强大:微软正开发Office Reader和Office Lens 百度技术专家详解Clouda 并称计划推出相应UI解决方案 少年才俊:看IT界8个不到20岁的科技公司创始人 Oracle与Freescale展开深度合作,Java或将一统物联网? 探秘Google新搜索引擎算法Hummingbird的16个疑惑 有谁把平台转向XP了,不知在这种新环境下开发出的软件在别的机器上会不会有问题(包括运行库及打包) 帮帮我,好吗?(谢谢大家了) 千山、恶人、老鱼、念雪、浪人及各位大虾,小弟也遇到了Dll引出MDIChild的问题,但是在linux下,不能正常退出,请各位帮忙,多谢了。 我的浏览器怎么了?? 心情好到最高点!放分!!!!!!!!!! 大家一定要帮帮我~~~~~~~~~ 一个关于重载的问题! 不活了 不活了.... 在VC中讲Edit控件的属性设置为ReadOnly后,如何改变控件的背景色??? 深圳的户口政策以及用人单位对户口的态度是怎样的? 200分求购一个VB写的用mciSendCommand播放VCD或者AVI的例子!!!!!!!! 请问大家认为数学对程序员来说是一个怎样的地位................ 紧急,求救!!!!!!!!!!!!!!! 请问在GSM MODEM编程中,如何知道短信是否已发送到目的手机! 急:为什么都用uses包含了,还是报告说没定义变量? 删除表时遇到的问题 *************stringgrid的问题?????? 再问几个问题 如何查找csdn上网的朋友 用 ADO 对 Oracle blob 字段读写 (谁能解决送1000分) 请问oracle9i比oracle8i多了那些功能?这个产品是否成熟? VB读串口数据 请问,你们做项目一般用什么分析设计方法,生命周期法? 快速原型法? 面向对象分析设计法?? 请问如何用query删除一个记录???????????????????????? 请问那里可以下载到雷电(指点一下也给分)……………… 初级问题,关于硬盘文件格式转换,请多多帮忙,谢谢! 那里有比较好的软件公司 毕业设计选题 谁有读写注册表的原代码? 请问那位大哥有画切线的C语言算法 如何使页面上的按钮被点击后自动打印当前页面? 哪儿可以下载星际争霸? 注册表中如何建新的主键?30分 寻求在tc下设置640*480(256色)模式的代码 DELPHI 真的好难 哪里有支持ASP+access的免费空间?!!30分 SaveDialog该如何使用? 为什么csdn把大家的回复都发到我的邮箱里去了???!!!! 我在学WinSocket,请问现在外面WinSocket吃香吗?一般做什么东西要用WinSocket的?找的到工作吗?还有Qos,RAS是什么东西?有人学吗?好象和编程不搭架的? 我的显卡OpenGL在Win2000下用不起来,驱动是对的,显卡是Creative TNT2 ?SOS D盘没了! 请教一条SQL语句 你们认为我是学VC好还是学BCB 请问哪里有VBscript函数的详细介绍呀? 如何在程序中给系统一个鼠标中键按下的信号?请给出详细的源代码 *********_____-------___---简单问题大送分!1!!!!!!!!!()()()))))))))))))))))))))()(((&&&&&&&&&& 关于java中的画矩形,详细内容情进 沈阳有没有要DELPHI或BCB开发的人呢?我不要钱白干不行? 为什么我使用了Win32组件提供的工具栏控件,也不能。。。。 一个错误 挥泪大送分!!!(硬盘分区调大且数据无损的算法?)(详见正文部) 小学六年级第一次科学实验作文500字 论述辛亥革命的历史意义 材料二 在北京人生活的洞穴里,用火的遗迹十分集中 灰烬堆积很厚 材料二证明了什么?他所证明的史实有什么意义 三场二串一什么意思 一堂有趣的实验课400字400字~450字,不要超过, 科技小论文500字 两串一什么意思 辛亥革命为什么会失败?它的失败说明了什么?如何评价辛亥革命的历史意义? 证明具有教学实践经历的相关材料求范本 铝合金人字梯和不锈钢人字梯哪种好 辛亥革命有什么重大历史意义? 什么是个人的教育教学实践经历? 家用五步梯子是不锈钢的好还是铝合金好? 不锈钢分多少种类? 教学实践经历证明材料怎么写, 高强度不锈钢家用梯/铝合金梯子/折叠梯/5步梯 关于实验的作文(400字左右 教学过程的本质是什么?(运用教育学来说明) 铝合金人字梯 玻璃钢人字梯哪个质量好 记一次实验!要400字以上,苏教版六年级下册的习作4,要写一次实验,最少400字!明天就要交~ 中国共产党成立89年实践经验证明了什么? 人字梯铝合金是何种铝合金?最好具体点~~密度?~谢谢了~~ 轻重工业在工业总产值表明我国当时工业化的特点是什么,结合 说明形成这个特点的必要性 如何在铁板上做不锈钢拉丝效果? 足球8串1是什么意思? 查找课外资料,结合教材内容简要说明马克思主义诞生的历史条件有哪些,它的诞生具有怎样的时代意义. 浇铸是指高温钢水变成钢半成品,这是什么(填物态变化的名称) 请问足球竞猜,假如买5场,三串1呢.三串3呢,三串4?假如四串4,四串5呢? 用历史与现实材料说明中国人民选择社会主义道路的必要性和正确性近代史纲要的作业、、、、 初中科技论文200-250字请认真回答 各位高手请问竞彩足球的3串4, 亚光不锈钢、拉丝不锈钢和镜面不锈钢的区别 初一科学小论文 只要200字只要200字 什么是不锈钢?不锈钢有什么特点?不锈钢有哪些分类? 拉丝不锈钢和镜面不锈钢的区别 如何处理不锈钢在拉丝后变黑不锈钢在高温下拉丝后,时不时产生黑色的纹路,要如何处理才好啊? 塑胶原料的正牌料和副牌料是什么意思? 拉丝不锈钢怎样用全自动抛光机抛成8K镜面,一般的液体蜡行吗 试了几种液体蜡都达不到效果,不知怎么办?急, 关于环保节能的科技小论文500——600字之间 小学五年级科学实验作文500字,多谢了! 原料和新料是一个意思吗? 不锈钢做拉丝处理 和 镜面处理 两种工艺 那种磨损比较严重呢 手表里材质写的精钢和不锈钢有什么区别?哪种材质更好? 是鞋子哪部分是帮料 作文一次成功的尝试 400字 6串7 二次三项式 什么意思 一次危险的尝试作文400字 不锈钢与复合钢有什么区别 不锈钢的种类 有关“成功”的作文(400字) 足彩里的2串1与3串3有什么区别……都是至少猜中2场中奖,一个自由过关一个组合过关……求详细解答 按规律填数2.4.6.8.9.后面交个是什么 作文《一次成功的尝试》400字结尾 科学小论文600字 (小学六年级) 将自己做实验,明白到要发现,再探索,在知道真理仿照《真理诞生于一百个问号之后》的事例:就拿洗澡来说,这是一件非常普通的事情.然而,美国麻省理工学 辛亥革命的历史意义和对现在的影响? 电梯发纹不锈钢和拉丝不锈钢有什么区别,二者造价哪个贵啊 足彩4场比赛 是要猜对3场 还是4场?赛事编号 主队VS客队 让球 赔率 全场比分 您的选择 胆 周二004 法国U20 VS 韩国U20 0 1.70 -- -- 3:1 胜 - - 周二005 乌拉圭U20 VS 新西兰U20 -1 1.85 3.45 -- 1:1 胜 平 - 周三 辛亥革命的历史意义和历史影响是什么? 从材料中可以看出这是诸葛亮给谁的建议?此建议是否正确?结合史实说明 材料二反映了什么形势?材料一:“今操已拥百万之众,挟天子以令诸侯,此城不可与争锋.孙权据有江东,已历三世,国险
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn