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

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

Hadoop集群环境下网络架构的设计与优化 CloudFoundry架构优化:NATS集群化方案 Dropbox推独立应用,公司估值已达100亿美元 【走近院士】梅宏:云计算时代软件技术发展需求和挑战 云计算战争:OpenStack vs. VMware Cortana与Siri、Google Now的较量:支持功能更多 代码面试最常用的10大算法 “颠覆医疗” 时云医疗推三款硬件产品 华为章宇:如何学习开源项目及Ceph的浅析 EMC:大数据时代中对于数据保护的重新定义 Google Glass于4月15日在美对外开放购买,售价为1500美元 电脑上的网址怎么样复制到手机 创客天下——《Make》及Maker Faire创办人、O&amp;#039;Reilly Media创始人Dale Dougherty专访 《近匠》aGlass团队:透析眼控技术的价值 一周消息树:超级充电器来袭,30秒可为手机充满电 北森CTO张庆化:利用Spark实现数据驱动价值 大公网冯咀志:站内搜索系统的PowerLinux迁移实践 2014移动开发者必备的十大应用测试工具 前《连线》主编Chris Anderson:创客就要DIT UC多屏战略 推出电脑版和电视版浏览器 “全国云计算大数据创新项目评选”征集活动正式启动 【走近院士】李伯虎:云制造技术的应用及发展 一周热点: Twitter的下一代分布式数据库Manhattan 专访微软陆奇:大转型中最难的是文化的改变 【CTO俱乐部走进腾讯】问题征集进行中 颠覆移动营销世界的女王Yunha Kim为女性CEO正名 Google揭露“仙女座”虚拟网络,及分散和集中架构之辩 DHTMLX Touch:开源的HTML5和JavaScript框架 Supercell下一城:《海岛奇兵》续写芬兰手游传奇 开发者盛宴 2014 Unity亚洲开发者大会盛大开幕 微软全球中国云业务总经理:云落地中国的最大难题 如何使窗体出现不规则的形状 急救:向B/S高手请教!!! 原谅我是新手,奔驰P4 845GL的主板上主机面板接线不知如何接, EXCHANGE SERVER5.5用一段时间后硬盘不够用了,要怎样解决? 进来看一看高分等你拿 关于ftp server_u的问题,配置正确,但是就是无法登陆 WindowsXP技巧 字符串中有“+”怎么传递? 文本问题,急!! 该死的中文显示问题,帮帮忙 这几本软工书怎么样? openssl版本问题 这几本软工书怎么样? 关于ftp server_u的问题,配置正确,但是就是无法登陆 openssl版本问题 一个好树——大家用:源码公布 请教高手一个问题 如何实现按一次回车,进行换两行的操作 启动weblogic的start default console时出现http://127.0.0.1:7001/console,该怎么办啊? 怎样在CB中定义一个Graphic类型的变量?急需解决!!!! 请教一段有关ODBC连接数据库的程序问题 我的 .class 文件应该放在那里才能运行呀? 单向链表的问题 一个好树——大家用:源码公布 各位大哥,有关Inet的菜鸟问题??? 编译原理有那些好的书看(要电子版) 菜鸟问题!关于按钮上方图片? 知道哪有EXCHANGE 2000 SERVER开发方面的资源吗? 请多指教! !!!!一个白送分的题:关于ado的c/s配置问题!!!! SOS! Just a Simple Question.Thanks! 我的小妹的vfp作业,我也不大会啊,那位行行好,做来给我,百分送出 为什麽我applet中的JTextField组件一开始时总是缩成最小 Ado怎么在SQL创建数据库[不是数据表]?谢谢 怎样读一个二进制文件? 大家看这段代码那里错了~~ 心爱的女朋友是研究生,漂亮,好有压力啊! 求助,有关Mcafee企业版的使用 求一sql 中国队队员和米卢今天晚上21:00做客新浪聊天室,有气的可以一起去发泄发泄!!!! 老生常谈,关于在对话框中加状态条的问题,我怎么让那该死的条总在底部? 求压缩软件 .gz是什么文件格式,如何解压使用? 如何在VB中对dll文件进行调用 请问用什么控件处理数据列表最好? 哪里有十六进制编辑器软件下载,如Ulea??32之类的 求压缩软件 关于注册表中二进制数据的读出写入问题? 一个简单的触发器的问题, java连接oracle需要oracle有什么样的配置或者什么组件? 在線等待.....在<select size="1" name="D1"></select>中顯示系統中所有字型 描写杜鹃花的好词好句可以使花瓣的或花朵的,能说说花瓣的色彩和质感更好 母亲节时,为什么要给妈妈送康乃馨?你们母亲节都送了什么给母亲呢?送花的话,能否请大家提供个花店? 为什么液体温度越低升温越高越快如水加热1度和5度的,1度的比5度快且相同时间比他升温高 请问你们那里谁有卧式螺旋卸料离心机要处理吗?有的说些谢谢 空气流动快,植物蒸腾作用():空气流动漫,植物蒸腾作用() 默写古诗文名句1.《水调歌头》中写既蕴涵深刻哲理又表达作者豁达胸襟的名句是_________,_________________,___________.表达作者对远方亲人的美好祝愿的语句是__________,___________.2.《山坡羊·潼关怀 “降水由赤道地区向两极地区递减”这句话对不对,如果错,错在哪里? 什么的词语配的映山红 植物的蒸腾作用能增加空气的( ) 赤道附近降水多,两极地区降水少的主要原因 描写杜鹃花的词语快 卧式螺旋卸料沉降离心机可以处理猪粪吗 赤道地区降水多,两极地区降水少,这是受什么影响?a,纬度位置影响b,海陆位置影响c地形位置影响d,洋流的影响 物理摩擦力与接触面的粗糙程度和压力的大小是不是缺一不可 在接触面积粗糙程度一定时,摩擦力与压力成正比 这句话对吗 赤道与两极那里降水多 下列说法,正确的是 ( ) A.物体所受摩擦力的大小不仅跟接触面的性质和物体对接触下列说法,正确的是 \x09\x09\x09( )A.物体所受摩擦力的大小不仅跟接触面的性质和物体对接触面的压力 函,这个字的拼音怎么写?几声? 影响天气变化的主要原因是:A太阳辐射B大气环流C海陆位置D气团的活动 研究摩擦力的大小跟接触面接触面压力大小的关系时应控制 不变,研究摩擦力的大小跟接触面接触面压力大小的关系时应控制 不变,通过改变 来改变物体对接触面接触面压力的大小. 花店售出康乃馨180枝,是其他鲜花售出量的3/5倍,其他鲜花售多少枝? 氯气 二氧化锰 过氧化氢 浓硫酸 如何比较氧化性二氧化锰与浓盐酸加热我知道别的能不能具体指明 应该是二氧化锰氧化性大于氯气 这是毫无疑问的 氧化物氧化性大于氧化产物 花店有120枝鲜花,第一天卖了1/3,第二天卖出的是第一天的1/2.第二天卖出多少枝鲜花? 花店售出康乃馨180枝,是其他鲜花售出量的3分之5倍,其他鲜花售多少枝? 为什么受副热带高压控制的区域内会出现高温闷热的天气,而且天气晴朗少云? 明明花店今日卖出所有花的五分之一,红红花店今日卖出所有花的五分之三,你认为那个花店卖出的花多 同学们要买50枝康乃馨.甲店每枝2元,可打八折;乙店每枝2元,可便宜10%,满10枝还送2枝.请问到那个店买更合算?(要有解题思路) 太阳辐射与太阳直射一样吗?赤道地区赤道低压控制多阴雨天气,而副热带地区副高控制多晴朗天气,所以赤道的太阳辐射弱于副热带地区.但非洲人不是因为太阳辐射强而很黑吗? 概率里是不是如果随机变量的期望存在,则方差必存在? 花店有玫瑰X枝,康乃馨192枝,康乃馨比玫瑰的2倍多30枝,再写出等量关系 温度与分子的扩散现象的关系是怎么样的? 随机变量的期望和方差设一次实验成功的概率是P,进行100次独立重复试验,当P=?成功次数的标准差的值最大,最大多少? 花店里玫瑰花的数量是康乃馨的3倍,玫瑰花比康乃馨多168枝,康乃馨有多少枝? 单位脉冲函数里的1(t)什么意思lim[1(t)-1(t-to)]/to差不多就这式子 请问 里面的1(t)是什么意思 看不懂额 设随机变量X的期望、方差都存在,C是任意常数,证明DX 两个形状大小完全相同的容器AB里面装满同种液体,一个正放一个倒放,比较两个容器底受的压强pa,pb,两个容器底部受的压力fa,fb,两个容器放在桌面上比较对桌面的压力fa,fb,对桌面的压强pa,pb 摩擦力.计算在水平面上.摩擦力与物体所受水平拉力有何关系?如何算? 映山红这首歌是什么时候写的 十送红军这首歌是什么时候写的 一道关于压强的科学题,一个质量为50千克的人,每只脚与地面接触面积为160c㎡,冰封的江面冰层能承受的最大压强为2.5×10④pa,他能否安全地从冰面上走过?麻烦给带 如 G=mg 这样的公式! 写出单位阶跃函数u(t)的定义,并求其拉普拉斯变换. 如图所示,向A中充入1 mol X和1 mol Y,向B中充入2 mol X和2 mol Y,起始VA=VB=a L,在相同温度 压力减小,摩擦力也随之减小吗?如果拉力减小呢,摩擦力会怎么样?只要一个物体被拉动了,那么弹簧测力计的读数就是鞋受到的摩擦力的大小.这句话对吗? 有一列数“2 4 5,2 4 5,2 4 5,."照这样下排下去,第60个数是多少?这60个数的和是多少? 质量相等的同种气体A,B两部分的等压变化图像,当t=273℃时,可知PA:PB=1:3,可是气体VA为什么比VB大0.4 如题,怎么减小摩擦力? 离散型随机变量的期望与方差,如图,求此分布列方差,只求结果即可 李欣在母亲节这天拿到20元钱到花店买鲜花送给妈妈,如果她用这些钱全部买表中的3种花配成花束,每种花可以买几枝?有几种方案?要详细的计算过程和说明.对不起啊,忘了.康奶昔1元一支,玫瑰2 冰块化成水后体积减少1/8 求水结成冰后增加的体积与冰块化成水后减少的体积的比是多少?冰是单位一吗?水的体积等于?冰的体积? 卧式螺旋卸料沉降式离心机前的型号是什么意思例如LW300*500卧式螺旋卸料沉降式离心机,前面的LW和300*500尺寸指的是什么? 母亲节送花,怎么搭配最好?母亲节送花,深圳哪家花店比较实惠? 名句填空! 形容杜鹃花开放的样子句子怎么写? 李欣在母亲节拿20元钱到花店买鲜花送给妈妈.如果她用这20元全部买掉3种话配成花束,每种花可买几枝?有几种方案?(康乃馨1元一枝,玫瑰2元一枝,百合5元一枝) 离散型随机变量的均值与方差的数学问题某次考试的第一大题是由10个判断题组成,每个判断题做对得2分,不做或做错得0分,小王同学做对每一题的概率为,则小王第一大题得分的均值为( ),方 描写杜鹃花的词语有哪些 有初中关于压强的练习题及答案吗? 雅鲁藏布江的水系特征 高中地理的角度 上海耐圣卡兰的nel卧式螺旋卸料沉降离心机如何, 天意花店在母亲节感恩大特卖活动中,康乃馨1.5元/支,玫瑰花2元/支,包装成整束加工费2元.莉莉手里有21元钱,想买10支花,包装成整束后送给妈妈,应该如何搭配? 液态分子是不是运动越快温度就越高
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘