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

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

触控开发者平台:孕育“十亿开发者俱乐部” 《近匠》大新伙伴:大姨吗防晒小助手,帮你呵护女神 专访阿里云总裁王文斌:做出“用得爽”的工程产品 专访AMD全球副总裁潘晓明:2014全线发力,力争中国市场 搜狗开源内部项目管理平台Cynthia意欲何为? 深度解析浪潮新八路服务器TS860 支持Box2D,开源HTML5 2D游戏引擎FLAG 一周消息树:从程序员到架构师的方法与逻辑 【CTO俱乐部走进海尔】海尔的转型探索之路 十一问MongoDB CTO,谈NoSQL人气王的扩展、事务及运维 腾讯“创业•密码”开发者论坛 ChinaJoy引爆创业者关注 从F1赛车到智能手机,无线充电技术之崛起 助力梦想!MDCC免费为优秀App开发团队提供展位 为Symfony2和Redis正名,基于PHP的10亿请求/周网站打造 【聚焦API】教你如何选择最适合的NLP API服务商? 直接改应用!Flipboard开源iOS应用内调试工具FLEX 专访腾讯游戏运营总经理崔晓春:云时代游戏运营的变革与创新 嵌入式专家Bruce Douglass经验谈 门票销售过半 从2014微信开发者大会购票者特征说起 当来自金星的Devs碰上火星的Ops——共话应用扩展 移动平台市场占有率:Android首次赶超iOS 豌豆荚范怀宇 I/O大会总结:Android无处不在 轻博客始祖Tumblr:哈希以支撑2.3万Blog请求/秒 《近匠》FIR.im:简单易用的内测分发工具 传苹果公司将于9月9日召开新一代iPhone发布会 近百家微信开发商参与征集评选活动 TOP10正浮出水面 Java程序猿,手游引擎怎么选? MDCC 2014优秀移动团队免费展位火热申请中 【微信讲师面对面】你在企业服务号开发中遇到的坑和难点 五个解决方案让MongoDB拥有RDBMS的鲁棒性事务 浅谈Apache Spark的6个发光点 昨天晚上连夜看《围城》,今天上班迟到了,不爽。 这个美元符号是什么意思? to:asia(),hushuo,seesea,inside1以及各位大虾,可以再给小女子讲一下指针的问题吗? win 2k pro 如何查看有哪些人联着我的机子?就跟98的网络资源管理中的一样。 十万火急!!TADOTable的lookup类型的新字段不能用于Sort吗?搞定了立即给分!! CListCtrl控件問題 怎么我在VC++6.0中的窗口属性中设一些属性好像没用一样??? 三台机器不用HUB如何实现互相访问? 请教通讯的问题 用accsee数据库 怎么不显示登陆的用户密码框? c,如何得到一个文件名中指定位置指定长度的字符串?? 服务器是否打开支持FileSystemObject对象的权限 我的数据表列宽为7个字符 , 而我只输入3个字符 , 当我输入4个字符后 , 再次运行程序却看不到所有数据 从新做人 求救:在NT Server下调用GetVolumeInformationA取分区序列号,返回结果为负数!!!怎么回事啊? 正式到新公司上班,送300分,感谢在我最困难的时候在“软件工程”版给过我帮助的朋友们!! 请问斑竹及所有人,怎样得到QuickReport的总页数? Websphere3.5的一个BUG.希望有人反对.多谢.. 什么是DAMAP的对象 哪里有 winpcap 或 libnet 及其他网络编程辅助包下载? 谁能提供PSP文档?最好是Humphrey的那本书! 代码出现bebug.请大家帮我找!!!! TO:net_lover(孟子E章),详情请入内! 有谁用过DEV express系列的dxdbgrid??它是如何把一个文本文件txt读到dxdbgrid1.columns[i]的picklist中去,作为picklist的内容的啊? 我想在Linux下做数据库开发,用什么数据好? 我的pws可能出了问题,那位高手能解决一下 关于控制winamp 各位同行你们有这个的源程序吗(Cacio DT-900数据采集器) Html Help 制作方法 luodi(无知者无畏), 请进: 我用shell(app.path+"\mdac.exe"),来调用微软数据访问控件2.0,提示出错:命令行语法错误, 求救:如何将剪贴板中的内容放到image控件上 how to get the sytax of customer user object ? jsp中的打印问题 pb中有没有类似iif之类的语句 大虾们,怎样将String 类型转换成float 请问在及时战略中,怎么实现寻路的 我想在状态栏显示时间,有没有属性可以让时间自动变化,而不用其它辅助控件? 不会没人愿意回答这个问题吧,都贴第二次了!! 吃西瓜 我在注冊自創構件時總是出錯,請各位幫忙解決. 关于ado连接sybase的问题,紧急求救!!!(我的最高分了) 29分:flexcell定位 请教一下,关于Delphi COM类型库的问题 大家来谈谈申奥成功对我们的影响吧,我想知道怎么利用这个契机大赚一笔 各位谁喜欢“后街男孩”??喜欢的给分! 请问在DBGRID中改变当前选定行的颜色? 我想在DataSourceDataChange()中实现。 客户端怎么与服务器端通信 为什么我在窗口里修改了一个记录的图片字段后,在数据窗口内不能正常显示? 我要在RedLinux71下安装WEB服务器软件,请部如何做? 如何计算某年某月的天数和每天对应的星期 99又7分之1乘以99简算 99x99+99 用简便方法怎样算 小学数学16*25+15*2简便算法 一个数的5倍减去5除2.5的商 差是3.8 求这个数 101乘以99乘以999加999 急... 99x99十199要求用简便方法计算, 什么数的3倍减去3除24的商,差是13? 101乘以99/100 99x99十199简便方法怎么计算. (5又13分之1-3又8分之3)*(6又4分之3-2又4分之1*3)= 如何简便算49+49×49,意思,为什么这么算偶承认偶童鞋没文化.....(没文化真可怕)数学很伟大 西游记中8至几回是总写唐僧师徒历经九九八十一难? 与x的积是y减1的数 简便计算:41×49-49 《西游记》为什么唐僧师徒要经过九九八十一难才能取回真经?这八十一难意味着什么? 两个数的和为10,设其中一个数为x,那么它们的积y是如何随x的变化而变化的?你能分别用函数表达式、表格和图像表示这种变化么 3.41-1.97+0.49-1.03的简便计算 西游记九九八十一难都有什么? 把两个相同的三位数连续写在一起,就得到一个六位数请你是说明任何一个连续数都可被7、11、13整除 41*101怎样简便就怎样算 求西游记中孙悟空他们经历的九九八十一难的名称劫难的名称和妖怪的名称(每个劫难)还有其下场,相当于把西游记的九九八十一难的浓缩成八十一小故事 开头 过程(经历) 结局(+妖怪 1.11.13.6这几个数怎么组成24?加减乘除随便用 41×101=? 请简便计算 1,19,199,1999,2099,19999怎么念? 在6,13,35三个数中与8的最大的公因数是1的是() 199乘49加199乘50加199怎么简便运算? 1+1/1+2+1/1+2+3+……+1/1+2+3+……+2004+2005如何计算 一个数加上20分之13的和再减去5分之3,差是20分之3,求这个数. 72x0.81+10.4简便运算 计算(2/1+3/1+...+2005/1)x(l+2\1+2005\1)x(2\1+3\1+...+2004\1) 一个数加上13/20得和,再减去3/5,差是3/20,这个数是多少 (5x一3)(5x一3)=4分之81,x=? 计算:1+2+3+…+2002+2003+2002+…+3+2+1=? 5与4的积被一个数除,商是0.5,个数是多少? √81+5x³=-31 这个怎么算呢. 从1/1*2+1/2*3+.+1/2002*2003怎么计算 1/2与2/3的积减去1/6,所得的差去除5/12,商是多少? 2.5x(40十4十0.4)简便计算? 计算: 1÷(1×2)+1÷(2×3)+… +1÷(2002×2003),请高手请点,谢谢 分解质因数 27= 30= 54= 递等式计算:(能巧算的要巧算) 2.8*0.9 5.4*10.1 计算1+2+3+...+2002+2003+2002+...+3+2+1 54分解质因数 递等式计算(能简便计算的要简便计算) 1、10.7-2.9×0.2×0.5 简算 2004+200.4+20.04+2.004 54怎么分解质因数 20-19+18-17...+4-3+2-1递等式简便方法 2004+200.4+20.04+2.004等于多少? 30分解质因数 简便计算 (1-1/2012)+(2-2012*2)+(3-1/2012*3)+...(2012-1/2012*2012) 9.05*2.01 怎样简算 把30分解质因数?具体数字 999x999怎么简便方法计算呀 递等式计算,用简便算法.要用乘法运算定律、加法运算定律、除法运算性质、减法运算性质.快,好的重分酬谢!(4.2-0.4×6)÷4== (15300÷600+67.5)×180==10500÷(10500÷25×1.25)==[(5.84- 99乘24简便脱式计 288十199=?(用简便方法计算) 125*1.25*0.125*8*.08*0.008*4*0.4*0.004*25*0.25*2.5=?(用简便算法计算).08改成0.8 负九十九又九十九分之九十八乘一百九十八 简便计算 99X99十199怎简便计算 桌上摆了两盘奶糖,共50块,如果从甲盘子里面拿走5块放到乙盘子里,那么两个盘子的奶糖一样多,原来两个盘子里各有多少奶糖.
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn