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

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

中文版Evernote百宝箱上线:开发者海外推广新渠道 360产品被爆收集用户隐私 桌面安全路在何方 销售额达一万亿元 阿里巴巴成世界最大电商 共享软件海外营销策略与实战分析(武汉站)成功落幕 你未必知道的CSS故事:揭开leading的面纱 2013年 影响Web发展的5类API 《Warcraft是怎样炼成的》:多人对战、战争迷雾以及AI HBTC精彩回顾 Hadoop专家分享大数据技术工具与最佳实践 苹果iTV规格泄露:iOS应用开发的新蓝海 Facebook觊觎微信鼻祖WhatsApp,但谈不上收购 首款社交API应用 Facebook Messenger for Firefox正式上线! 共享软件海外营销策略与实战分析(沈阳站)成功落幕 移动之伤:为什么山寨游戏比原创更火? IBM在京发布PureData 主打数据交易处理、操作分析 Intel发布Hadoop免费版 全力拓展生态圈 突出图片搜索:微软向测试人员开放Socl社交搜索 豌豆荚创始人:和巨头竞争,我们拼产品和技术 “互联网女皇”报告解读:智能电视大趋势 苹果扩大其北卡罗莱纳州燃料电池发电场规模 Oracle回收站使用全攻略 微软这次很诚实:IE真的糟透了 Facebook进军短信业务,挑战微信鼻祖WhatsApp 从菜鸟到专家的五步编程语言学习法 亚马逊企业文化:从书贩到云服务巨头的催化剂 明年Google I/O大会日程敲定 或发Android“酸橙派”? 绝境求生,WebOS寄望Android Facebook在移动路上走过的那些弯路 曙光聂华:推动数据融合 CloudStack Committer李学辉:2013年社区将爆发 继续霸权:美众院否决联合国掌控互联网 墨迹天气创始人金犁:巧用细分市场的力量 sybase在XP下安装后不能使用??? 如何使DropDownList呈现时就为展开状态? 求助!动网里提示 Script Engine 异常,请大虾帮帮我啊 大家看看我的jboss有没有问题!为什么jboss的8083端口出错!(3)接(2) 内联函数 菜鸟求教:关于Tcanvas的问题,不知道怎么重画 请大家关注http://expert.csdn.net/Expert/TopicView1.asp?id=1883460 ,谢谢 紧急求救!! 怎么才能在没有VC的环境下运行带有MS DataGrid 控件的程序 URLDownloadToCacheFile 下载的小文件不能立即打开! oracle 9i For Linux 的字符集的问题,谢绝灌水! 当使用了showModalDialog打开的窗口后。。。 我一直将vcl源码作为代码书写标准文档,现发现。。。。。 如何获取当前页的地址。 中国网通真TNND不是东西 在win2003下怎么使用VOS 请教:如何通过VB的宏对Excel进行排序? 青岛发生4级地震,做个调查 对不起,第一次想给给过自己帮助的人分。但都出现这样的提示,请帮忙解决。 驱动不在了,求助!! 建好表后,如何添加数据?不要导入的方法 用dbstart启动时出现Can't find init file ......请指点! 我用17"的顯示器設為1024*768顯示,但pb9開發工具的字體很小,怎麼設啊? 对于解决站点使用基本验证的自定义客户端验证界面的一篇有价值的文章 运行java3D后这样的提示,怎么回事????? 高分求 关于DLL程式异步通知,类示xmlhttp 组件的onreadystatechange事件 初学者请高手指点迷经? Form上没有缺省按钮,在控件上Enter按键时,喇叭老是响,怎样解决? 如何实现导入数据库中的数据--急,知道的请帮忙 有关dataset的问题?? 使用用户控件提示找不到许可证信息,刚才都是好好的 数据库问题:有什么好的解决办法。 请问如何避免client连接server端出现WSAENOTCONN的错误? 自动注册ODBC数据源问题 请大家注意:遇到有人骂你的时候请通知斑竹,不要回骂。 dbsrv7.exe为何长时间的占用我的CPU? 菜鸟问题,麻烦帮帮忙!!!!!!!!! 在delphi中如何做ocx,大家帮我介绍一下。最好是能放在浏览器中用的。 各位大哥,请教一个菜鸟问题!!! 我电脑里装的win2000使用的时候经常死机,就是突然鼠标,键盘都没反应,只能重起, 谁能帮我判断一下会是什么原因? 如何取得TextField的选择区域? 请问浙江有高程培训班吗? 昨天有人扎了我三针...... CallableStatement 问题 “ActiveX 不能创建对象, 错误号429”,请问谁这个问题,急切求助 为什么建立虚拟目录时这样不行? <Context path="/xuu27" debug="0" docBase="C:\jsp\xuu27" reloadable="true" crossContext="true"/> 问搞版主竞选的版主们: web服务服务器端设置 我的一个页面中有三个frame,请问如何在其中一个frame中点击连接,关闭窗口。然后整个页面就关闭了. 刚学sql语言,有点不懂 一个很弱的问题 有谁知道开书店的进书渠道吗? 云和太阳有关的成语有哪些 卵细胞为什么具有全能性老师上课讲动物细胞全能性大小是:受精卵>卵子>体细胞卵细胞是生殖细胞,是经过减数分裂的,只有体细胞一半的染色体,怎么能有全能性呢?染色体都不完整啊? 教唆犯与吸收犯的区别? 含云和日的成语 卵细胞是否有全能性 论述“所有的教唆犯都是主犯”这是一道关于《刑法》的问题 文天祥 金陵驿 译文是译文吖.不是赏析. 大家给我说说各个学派关于自由的学说 最好有代表书目的推荐 好的我另加100分 请举一个教唆犯是主犯的例子 求一个英语词,形容二三十岁的人求各位大神,一个英语词 形容二三十岁的人这个群体,不要用younger generation,generation Y也不合适.~~ 将两个标有"220V 100W"字样的白炽灯串联起来,接入家庭电路中,当开关闭合时,每个白炽灯的额定功率为____W,实际功率____(大于/小于/等于)额定功率. 算高压锅 锅盖 面积是用这个公式吗?派*直径的平方/4 《春满燕园》是谁写的 张华家有一只标有“220V 100W”的照明电灯,她为了节约电能,给该灯串联上了一只定值电阻,使这盏灯的实际电压为额定电压的50%,此时该灯的实际功率是 LM317的最大输出电流是1.5A,如果负载使电流大于1.5A时,会出现什么?如题,对额定输出电流不是很了解,额定输出电流是由什么决定的?由稳压器件吗? 宇宙速度怎么算急 蔺相如说:“秦王我都不怕,会怕廉将军吗?”改为间接叙述句 有没有一个原件是这样的,能稳压到8v左右,然后就电流要在2A以上,比如lm317,可是lm317最大电流1.5A,不够啊 送杜少府之任蜀州描写了一个什么样的场面? 在共同犯罪中不可能只有从犯而没有主犯, 《春夜喜雨》后三句集中写( )随风潜入夜,润物细无声,野径云俱黑,江船火独明,晓看红湿处,花重锦官城. 1.A={x||2x-4|>2},B={x|x>6},B在A中的补集是?2.设A={x|1 好雨知时节,当春乃发生.随风潜入夜,润物细无声.野径云俱黑,江船火独明.晓看红湿处,花重锦官城.诗意是什么, LM317进行稳压,输出电流1.5A,扩流到10A,用电压串联负反馈进行扩流,怎么工作,为什么要用均流电阻! 秦王我都不怕,会怕廉将军吗?(改为陈述句) 好雨知时节当春乃发生随风潜入夜润物细无声野径云俱黑江船火独明小看红湿处花重锦官城的意思 lm317输出电流的范围?能为负么? 仿照句式 不少于50字 好雨当春乃发生 随风润物细无声 野径江船火独明 晓看花重锦官城 读某一局部地区的等高线地形示意图(图中短横线是示坡线),回答36--37题 36.与图示地形特征较为符合的是 仿照; “不必说……也不必说……单是”的句式 以‘母亲”为主题的一个句子 字少一点的 图中C4的作用是什么?改变它的容量VCC脚的电压也会变化,是什么原因? 在同一平面直角坐标系中,过x轴上的坐标(-3,0)作x轴的垂线过y轴的坐标(0,-3)作y轴的垂线,两垂线的交点是点A,则点A的坐标是( ) 用“不必说,也不必说,单是”的句型描写课间活动,不少于70字.仿照初一下册的语文第一课《从百草园到三味书屋》写,会的快进! 氙气灯更换灯泡 需要连同安定器一同更换吗原装有氙气灯+安定器 灯泡是6000K 雨天白茫茫一片 现在要换成黄金眼的 是否只要换个灯泡就可以了?还是要连同安定器一起更换 春夜喜雨中的第一句写了下雨的季节直接赞美了什么?快 已知一次函数y=ax+4与y=bx-2的图像在x轴上相交于同一点,则b/a的值是A:4 B:-2 C:1/2 D:-1/2 好雨知时节,当春乃发生.  随风潜入夜,润物细无声.  野径云俱黑,江船火独明.  晓看红湿处,意思是? 《春夜喜雨》第一句写了____________,后面三句集中写______________. 1、设P,O为两个非空集合,定义集合P+Q={a+b|a∈P,b∈Q},P={0,2,5},Q={1,2,6},则P+Q中的元素有_________个.2、已知集合A={x|x²+x-6=0,x∈R}与B{y|ay+1=0,y∈R}满足B△A,求实数a的值.(△代表真子集)【要过程】3 已知一次函数y+ax+4与y+bx-2的图像在x轴上相交与同一点,则b/a的值是 17 .从犯是指在共同犯罪中 (2 分)A 起次要作用的犯罪分子B 起辅助作用的犯罪分子C 领导他人犯罪的犯罪分子D 教唆他人犯罪的犯罪分子多项选择 有关 matlab 中fft(傅里叶变换)的问题 我有一组数据 数值是2.00左右 我对其进行matlab自带的快速fft变换 得到的结果不是呈现递减性的 这是为什么 数据 经过fft变换之后 不应该是 秦王我都不怕,还会怕廉将军吗?这句话改为陈述句是可以是秦王我都不怕,不会怕廉将对吗? matlab fft(x n)与fft(x)的区别 将一枚硬币连续抛两次,以X表示所抛两次中出现正面的次数,写出随机变量X的分布律. 商鞅变法的思想有没有延续至今的 ( )诸葛亮有把握,( )能在三天之内造十万支箭.填关联词! Sin²1°+ Sin²2°+…+ Sin²69°=?最后是69度不是89°错了 最后是89°不是69°,是我们老师抄错了。汗死 商鞅变法反映了该人物的什么思想 在括号里填上相应的关联词.( )诸葛亮( )能在三天之内造十万支箭. 《春满燕园》主要内容 一个物体没有发生化学反应的时候具有化学能吗?比如氢氧化钠和水反应的时候具有化学能,那当他没有反应的时候具有化学能吗?谢谢! 求《伯牙遇知音》的译文!跪求《伯牙遇知音》的译文.准确一点最好. 春满燕园一、二段大意!另外,有“春满燕园”的理解吗? 送杜少府之任蜀州句子赏析 如图,有一块以点O为圆心的半圆形空地,要在这块空地上划出一个内接矩形ABCD辟为绿地有一块以O为圆心的空地,要在这块空地上划出一个内接矩形ABCD辟为绿地,使其一边AD落在圆的直径上,另外 由云和月两个字组成的成语是什么 赏析送杜少府之任蜀州作文 诸葛亮对鲁处说:三天之内要造要10万支箭,得请你帮我的忙.改为转述句 ABC主持人就辱华言论双手合十鞠躬道港媒:中国将会从美国国家安全局丑闻中菲律宾万圣节举行“重口味”游行(高清日舰强闯我演习区滞留70小时军事专家:极易致误判误撞和擦枪走火“死亡线”上的护路铁军亚航如此对待它的全球第二大市场美潜入雅虎谷歌狂盗数据澳使馆为美国搜集亚太情报斯诺登谋得俄网站工作巴西首富变成穷光蛋:16个月300亿“最有权力人物”排行榜 普京“战胜”中国军队以开放态度迎接互联网花莲6.7级地震致1伤 为台湾今年来广西回应米粉店枪杀案:嫌犯带枪系执行杭州40岁已婚男扮21岁女大学生约2花莲6.3级地震无重大灾情 目前仅传连鞠两躬,美主持人再向华人道歉美使馆疑用这个“白盒”监听俄网站曝光斯诺登游艇照 金发美女陪伴智利科金博附近海域发生6.6级地震 政改被否后 港特首梁振英进京求经济支【知著·好玩】我们所向往的身躯:极致《仙剑6》优化差官方删光微博致歉:接【快讯】任天堂CEO岩田聪因病去世 公司研究:麻疹疫情来袭 掘金抗瘟疫概大范:会在未来两周和德拉蒙德商谈续约全球传奇玩家超5亿人次 男性用户占比维兰纽瓦和女友海上钓鱼兜风用资金信托+SPV模式玩股权传承哥先行一步!私募基金所得税制度全解《问道》天墉城夏日狂欢季 免费送极品邢台市开展金秋“六送”系列敬老活动《真古龙》今日14:00贺岁篇新版上新疆巴音布鲁克黑头羊成第十三届冬运会12张2015年新兴企业投资趋势图杨兴平:为什么股民最大的敌人是我们自内马尔社交网络晒与乔丹合影法国希思黎 (Sisley) 妍采青Zenatix:这家物联网初创公司可【建筑】中国的酒店也已经达到这种境界
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘