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

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

应用内一键交易!Google公布Android Pay项目 Timehop为什么要放弃Rails,转向Go? 无线充电技术走入客厅 宜家推出“Home Smart”系列 发布仅一年,虚幻引擎4宣布完全免费! HTML5初学者福利!11个在线学习网站推荐 Qualcomm发布Snapdragon 820与超声波指纹识别技术 App Store应用僵尸化:没品质没资本的必然走向 Unity 5正式发布:支持21种平台、个人版免费! 创新高性能移动UI框架——Canvas UI 框架 取精华、去糟粕!适合iOS开发者的15大网站推荐 Swift如何优化性能? 【程序员电子刊精选】明道CEO任向晖:企业也需要养成好习惯 你信吗?重构软件并不会改善代码质量 融合VR与AR:uSens推出虚拟现实手机头盔 4月17-18日,OpenStack、Spark、Container齐聚OpenCloud 2015 第四代CSS选择器,那些让你激动的新特性 联通WO+开放平台“App计费 ” 保障手机应用付费安全 Valve推Lighthouse技术,欲解决VR设备眩晕感 全球移动开发者报告:Swift崛起,物联网大火! 不圈地自萌!10个UX设计经验分享网站推荐 苹果继续改改改!Swift语言何时能稳定? 封闭还是开放?Android Wear离iOS究竟有多远 TIOBE 2015年3月编程语言排行榜:CoffeeScript首次进入TOP 100 2015网页摄影图的六大流行趋势 原生体验挡不住!JavaScript开源跨平台框架NativeScript 自行车,恰到好处的“智能” 联通WO+开放平台:保护消费者权益就是保护移动互联网生态 2015年Google Code Jam编程挑战赛开始报名 Impression Pi:VR头盔的进阶形态 King.com和Halfbrick Studios成功背后的21款工具 五大实用技巧 帮设计师实现高效会议沟通 Java如何Debug? 谁有关于Microsoft.XMLHTTP的详细使用手册 !!!急急!现在想把状态栏放大,里边的字也随之放大 请推荐几本学习sql-server的好书!!! 求助:sybase central 3.2 for ASE12.5 的问题?? 关于第二个硬盘的问题 请问我要开发一楼房的三维动画展示(象游戏一样) 哪位大哥知道哪儿可以下载四级模拟题或书籍 Bjarne Stroustrup 怎么念?有高手能给出音标吗?100分在线等待! 神秘的芭蕾舞鞋……《非人勿进!!!》¥%……·%·¥%·#¥%#·¥#@$%$#^%^%$$#@ 怎样做一个自己的DBNavigator? =====关于CDialog的一个简单问题===== 急救!子窗体问题!在线等待 如何把程序窗口显示在其他所有程序的前边 dbengine error: invalid blob length? 数据集打开问题 严重的问题???? 一个问题: 一个小问题,在线求助! 神秘的芭蕾舞鞋……¥%……·%·¥%·#¥%#·¥#@$%$#^% 无法进入系统,救救我吧 菜鸟问题,送分了!!! 得分小问题 小问题,请熟悉InterBase的大大进来看看。 做一个分布式的例子时的问题 大家帮我看下这几句问题到底出在哪里呀!!!!!!!谢谢 连接数据库的疑问,盼望解答!! 什么叫作实例? 菜鸟问题 十万火急:MDI的一个问题?????????在线等待!!!!!! 调查一下用汇编语言开发的工资如何?(深圳 ) 有关Builder版的兄弟定期进行网上技术交流的倡议书! 急!关系到我是否找到工作,请回答 如何根据Form的大小调整控件的大小 闪盘的另一个分区不能用了!!在线 连接数据库的疑问,盼望解答!! 急!急!急!请教一个共享的问题? 请问哪里有Class类和Method这两个类的说明呀!谢谢! 怎样打开CSDN电子版 请推荐一下有关于JAVA,JSP,JAVASCRIPT相关的好书 汽车与电脑谁重要(转) 转让 全新飞利普 820 彩屏手机一部(个人) 请问是否有可以统计数据的电子表格控件? 给点看法? 是不是来这里的人混得好的不多,搞得我都不敢跳槽了 倒霉就一个字,我只说一次。 一个关于Delphi的简单循环外提(编译优化)的测试,有兴趣进来看看 大家遇到这样的问题了吗? DTPicker的问题,急急急!!!! sun的ultra5启动时显示没有键盘设备,可能是键盘坏了,哪里能找到这种8芯的鬼键盘? softice调试时出现的有意思的问题 拉床与插床的区别 大家想想办法,帮我写一篇《欣赏自己》(就是夸耀自己的长处)的作文500字 信息如下:本人叫xxx(写到我的名字时用这个代替)年龄13,48号.能在24点前写的多给20 花坛的花真美呀,一团团,一簇簇,整齐地排列着,争奇斗艳,像( ),像(花坛的花真美呀,一团团,一簇簇,整齐地排列着,争奇斗艳,像( ),像( ),像( ),五颜六色,形态各异 生活作息用英文怎么说? 卧式的液态二氧化碳储槽与立式的储槽有什么区别?卧式的好处是什么? We have all kinds of guitars for you to_______(choose ;choose from)大神们帮帮忙 我的生活作息时间比较有规律,用英文怎么翻译 吸声玻璃棉的吸水率是多少? choose ______many kinds of CDs A.to B.into C.from D.of 连词成句 we,had.the,arrived,film,begun ,when. 用俗语或诗句诠释“只要你是一颗天鹅蛋,就算生在养鸭场也没关系”急急急!谢谢! 6.To solve the problem,you have many ways to ______.A.choose B.choose from6.To solve the problem,you have many ways to ______.A.choose B.choose fromC.be chosen D.be chosen from 笑猫日记的笔记怎么写小猫 哪些是小动物保护庄稼的 怎么看仓鼠公母?我家仓鼠买来1个多礼拜了 还不是很亲近人 应该是银狐.我以前买了两只仓鼠 差不多这时候就很亲近人了 经常是看见我就爬出来舔我的手...可这个不舔 反倒有时候咬一口.而 一束鲜花改变人生让我们明白了什么道理 专吃害虫,保护庄稼的昆虫是什么昆虫,(青蛙不算) 仓鼠怎么分公母?我养了一只小银狐,不知道怎么分公母. 环境改变人生 作文 虞世南中的《蝉》的“居高”中的“高”有哪两层含义 母仓鼠咬公仓鼠母仓鼠超厉害 把仔带大之后就不认公仓鼠了 公仓鼠频繁受伤 后来拿去店家用花仓鼠治住了我家的母仓鼠 当时确实不再咬了 但是一回到家公仓鼠又负伤 我的公仓鼠超肥超可 人生似一束鲜花,仔细观赏,才能看到它的美丽;人生似一杯清茶,细细品味,才能赏出真味道.分析分析这句话的含义人生似一束鲜花,仔细观赏,才能看到它的美丽;人生似一杯清茶,细细品味,才 They can't walk any farther,so they stop____(have)a rest. 仓鼠公母怎么分 人生似一束鲜花,仔细观赏,才能看到它的美丽;人生似一杯茶,细细品味,才能尝出它的味道.仿写 (1)与单位领导发生冲突 (2)坐在南下的列车上 (3)坐在面试的办公室里 (4)在报刊亭前浏览人才招聘信息(5)递交辞职申请书\x05A.1—5—2—4—3\x05B.4—3—5—1—2\x05C.2—5—3—1—4\x05D.2—4—3—1—5 河南省新乡市哪有卖爬行动物的?比如蜥蜴呀 不同颜色的青蛙什么的 仿写句子:人生似一束鲜花,仔细观察,才能看到它的美丽.求类似句子 They have _ (成功)achieved what they hoped for. 以小记者的身份对小演奏家进行一次采访 怎样才能在同学面前表现出自己很有气质? 情绪高昂是什么样意思 如果请你以小记者的身份去采访这位老人,你会问他什么问题?老人又会怎样回答呢? do not know very much about,what you have done the wrong thing?Why should I forgive?译汉文怎么 士气高昂的意思只要意思就可以了 加入让老师让你以小记者的身份去采访一位优秀班干部要了解他的事迹你怎么做这次采访 你会怎样提问 你认为 关于猫的事.关于猫咪的事、传说、不要童话的、说什么黑猫不吉祥之类的、 PS:我不是迷信、只是想找关于这类的、 一只昆虫从某点出发在一条直线上觅食,假定向右爬行的路程记为正数,向左爬行的路程记为负数,它爬行的各段路程依次是:+5,-2,+9,-8,-6,+10,-7.(1)昆虫最后停在什么地方?(2)昆虫离出发点最 I want to buy a nice sweater for A.me B.myself 猫的事情三种颜色的猫一定是母的? 拉床的动力来自什么? Halloween(划线部分发音相同)________ 划的是ow 菲格瑞斯的微差压变送器有哪些特点? 一只昆虫在一条直线上觅食,假定向右爬行的路程记为正数,向左爬行的路程记为负数,爬行的的段路依次是5,-2,9,-8,-6,10,-7.(1)昆虫最后停在什么地方?(2)昆虫离出发点最远和最近的距离分别 Halloween读音 请问菲格瑞斯的温度变送器日常维护时需要注意什么? 第三段中说:“的却,有种蝉,为了满足音乐的嗜好,牺牲了许多.”其中”牺牲“一词有什么含义 town Halloween follow window划线ow,哪一个发音不同 菲格瑞斯防爆压力传感器是什么样的仪器?抗震防爆能力如何? 一音二字二词是什么意思? going delicious we a to iot food are drink have of and连词成句 有哪位朋友知道菲格瑞思智能差压变送器的最大正迁移量和最大负迁移量为多少吗? 学校做早操,36人排成两行,照这样排队,540人可排成多少行?其它方法我会做,但以下两种方法我看不明白分数方法:2/36乘以540=30行比例方法:2/36=540/X 花坛的花真美呀像什么 I have know that one little "I'm sorry could mean so much . 甲乙两地全程3.3km,一段上坡,一段平路,一段下坡.上坡3KM一时,平路4km一时,下坡5km一时.甲到乙51分钟乙到甲53.4分钟.求从甲到乙时上坡,平路,下坡的路程各是多少? They work very hard to save animals____ accidents A.out B.in C.from D.at 只要你是一只天鹅蛋,就算是生在养鸭场里也没有什么关系,与哪句俗语意思相同 我与信息的故事500字 花坛里的花真美啊,一团团,一簇簇,整齐地排列着,像( ). 埃及多地爆发大规模反对军方游行墨西哥总统号召全民减肥印度开建“全球最高”塑像印度开建“全球最高”塑像 呼吁民众捐斯诺登找到工作 在俄社交网站上班英国检方称《世界新闻报》曾窃听哈里王“歧视胖子” 香奈儿艺术总监惹官司戴“谷歌眼镜”开车遭传讯偷渡客残杀5人 凸显底层华人困境普京登顶权势榜 只怪奥巴马不争气首个完整境外诈骗集团被批捕新一轮伊核对话可能取得重要进展奥巴马豪华座驾“野兽”细节曝光 具备印度真的脏乱差吗?撕去贴在印度身上的国际组织称:叙利亚已销毁化武设备挪威小镇人造“太阳”告别黑暗冬日(高小伙宁杭高速上搭不到客车 准备从南京温州街头有精神病史的男子挥刀挟持自己杭州男子因收入没妻子高将其推入河中淹金正恩或未会见到访蒙古国总统(图)日俄防长会前俄展军事肌肉 俄侦察机飞东盟华裔留学生广西喜迎马年春节热身赛-国安闷平俄超劲旅 海外战绩拉一中国人因携象牙在肯尼亚被判入狱7年云南西双版纳发生4.6级地震 秦光荣广西电网员工走村入寨送温暖办实事办广西将建网络商品交易监管平台营造公平福尔斯35+22上海送山西两连败 摩直通东京-张继科力克马龙 获男队首个突出抓好主业 创新体制机制春节出境游高潮将至 外交部通过微信提地震灾区便民服务点里的“小老板”台湾考试院长年逾七旬不服老 餐叙现场2014年石家庄市春节期间文化活动安泰国政府与选举委员会就推迟大选会谈未恒大鲁能两将离队转投李金羽 沈阳队签2013年中国人居环境奖揭晓上海:八成市民愿为改善空气质量弃放烟供港活鸡发生禽流感,广东检验检疫局称央视发布马年春晚完整节目单 张明敏演日本有识人士要求关闭驻日美军普天间基大巴黎再出手 2300万镑抢签枪手曼
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘