javascript 模板引擎

￡神魔★判官ぃ 2022-04-12 03:12 292阅读 0赞

# 推荐五款流行的JavaScript模板引擎 #

发表于 2013-09-16 16:36| 19069次阅读| 来源 Creative Bloq| 27 条评论| 作者 Jack Franklin

[javascript][] [Mustache][] [Underscore][] [EJS][] [Handlebars ][Handlebars] [Jade][]

**摘要：**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 1]**

[![5236b8cc87dd7.jpg][]][5236b8cc87dd7.jpg]

Mustache通常被称为JavaScript模板的基础。另一个流行的解决方案Hanldebars实际上就是基于Mustache构建而成的。这并不意味着Mustache是一个不好的模板解决方案。下面例举一例：

**\[js\]** [view plain][] [copy][view plain]

1.  Mustache.render("Hello, \{ \{name\}\}", \{ name: "Jack" \});  
2.  // 返回： Hello, Jack

一旦在页面中包含了Mustache，你就可以访问全局对象“Mustache”。你可使用其中最主要的方法“render”，它包含两个参数。首个参数是实际的模板，第二个参数则为需要传入的参数值。

上例中，你可以看见“\{ \{name\}\}”。其中的“\{ \{\}\}”实际上为Mustache的语法，表示一个占位符。当Mustache对其进行编译时，它将在传入的对像中寻找“name”属性，并用该属性的值（该例中为“Jack”）来代替“\{ \{name\}\}”。

在这里，模板只为一个字符串，但如果你有一个更复杂的模板，该方法可能就不适用了。通常的解决方案是将模板放在“script”标签中：

**\[js\]** [view plain][] [copy][view plain]

1.  <script type="text/x-mustache" id="template">  
2.      <p>Hello, \{ \{name\}\}</p>  
3.    </script>

然后，我们可以访问的script标签的内容。例如，使用jQuery，它很容易实现：

**\[js\]** [view plain][] [copy][view plain]

1.  var temp = $("\#template").html();  
2.  Mustache.render(temp \{ name: "Jack" \});  
3.  // 返回： <p>Hello, Jack</p>

给“script”一个浏览器无法理解的“type”属性，浏览器就会忽略该Script，不将它作为JavaScript，也不会执行它。

你也可在模板中使用循环，如下面这个模板：

**\[js\]** [view plain][] [copy][view plain]

1.  \{ \{\#people\}\}  
2.    \{ \{name\}\}  
3.  \{ \{/people\}\}

传递数据：

**\[js\]** [view plain][] [copy][view plain]

1.  \{ people: \[ \{ name: "Jack" \}, \{ name: "Fred" \} \] \}

你将得到“JackFred”字符串。

Mustache还有更多的功能，点击[这里][Mustache 1]查看详情。

**2.[Underscore Templates][Underscore_Templates]**

[![5236b8e68587e.jpg][]][5236b8e68587e.jpg]

Underscore提供了各种各样的有用的方法，也提供了简单的模板。它的语法与Mustache稍有不同。下面为一个简单案例：

**\[js\]** [view plain][] [copy][view plain]

1.  \_.template("Hello, <%= name %>", \{ name: "Jack" \});  
2.   // 返回：Hello, Jack

如果你曾经使用过Embedded Ruby（缩写为ERB），你就会对该语法更为熟悉。“<%=name%>”表示无论“name” 是什么值，都应该输出在“<%=name%>”的位置。Underscore同样有循环与条件语句，但与Mustache同样稍有不同。

**\[js\]** [view plain][] [copy][view plain]

1.  var template = "<% \_.each(people, function(name) \{ %> <li><%=   name %></li> <% \}); %>"  
2.  \_.template(template, \{ people: \["Jack", "Fred"\] \} );

在Underscore模板中，你可以在“<% %>”是插入任何JavaScript。注意，“<%= %>”用于输 出，<% %>用来包含JavaScript。这意味着你在JS中使用的任何形式的循环与条件语句同样可以在Underscore中使用。

了解Underscore更多功能，请点击[这里][Link 1]查看。

**3.[Embedded JS Templates][Embedded_JS_Templates]**

[![5236b8f4259e7.jpg][]][5236b8f4259e7.jpg]

[Embedded JS][Embedded_JS_Templates]（EJS） 来源于ERB模板，且与ERB有很多相似之处。它有着与ERB相同的Tag，且包含很多相同的功能。

EJS的特别之处在于，你需要把模板存于单独文件中，并将文件名传递给EJS。它会加载该文件，并返回HTML。

**\[js\]** [view plain][] [copy][view plain]

1.  // in template.ejs  
2.    Hello, <%= name %>  
3.    
4.  // in JS file  
5.    new EJS(\{ url: "template.ejs" \}).render(\{ name: "Jack" \});  
6.  // 返回： Hello, Jack

注意，你可以加载文本模板：

**\[js\]** [view plain][] [copy][view plain]

1.  new EJS(\{ text: "Hello, <%= name %>" \}).render(\{ name: "Jack" \});

下面将介绍如何进行循环，以数组“People”为例，并在网站上链接到他们的个人页面：

**\[js\]** [view plain][] [copy][view plain]

1.  // template.ejs  
2.    <ul>  
3.      <% for(var i = 0; i < people.length; i++) \{ %>  
4.        <li><%= link\_to(people\[i\], "/profiles/" + people\[i\]) %></li>  
5.      <% \} %>  
6.    </ul>  
7.    
8.  // in JS file  
9.  new EJS(\{ url: "template.ejs" \}).render(\{ people: \[ "Jack", "Fred" \] \})  
10.   
11. // Each rendered <li> will look like:  
12. <li><a href="/profiles/Jack">Jack</a></li>

这与Underscore 有些相似，但要注意“link\_to”的使用。它是EJS定义的一个Helper，以便链接更容易使用。

了解更多EJS，请关注[EJS官方网站][Embedded_JS_Templates]。

**4.[HandlebarsJS][]**

[![5236b905f3bce.jpg][]][5236b905f3bce.jpg]

Handlebars为最流行的模板引擎之一，构建于Mustache之上。适用于Mustache模板的功能同样适用于Handlebars模板。同时，Handlebars还增加了很多Helper。其中之一是“With”。

**\[js\]** [view plain][] [copy][view plain]

1.  // with this template:  
2.    var source = "\{ \{\#with author\}\} <h2>By \{ \{firstName\}\} \{ \{lastName\}\}</h2> \{ \{/with\}\}";  
3.    var template = Handlebars.compile(source);  
4.    var html = template(\{ author: \{ firstName: "Jack", lastName: "Franklin" \} \});  
5.  // returns: <h2>By Jack Franklin</h2>

注意，Handlebars编译器的工作方式略有不同。首先，你把该模板传递给“Handlebars.compile”，它会返回一个函数。你将 包含数据的对象传递给该函数，该函数将返回HTML。“\{\#with\}\}”Helper取得一个对象，并允许你在其中向该对象传递属性。但不是采用以下形 式：

**\[js\]** [view plain][] [copy][view plain]

1.  \{ \{ author.firstName\}\} \{ \{author.lastName\}\}

而是下面这种形式

**\[js\]** [view plain][] [copy][view plain]

1.  \{ \{\#with author\}\} \{ \{firstName\}\} \{ \{lastName\}\} \{ \{/with\}\}

这样可以节约输入，尤其当你十分频繁地使用它时。

Handlebars也提供了“each”Helper：

**\[js\]** [view plain][] [copy][view plain]

1.  var source = "\{ \{\#each people\}\} \{ \{name\}\} \{ \{/each\}\}";  
2.    var template = Handlebars.compile(source);  
3.    var html = template(\{ people: \[\{ name: "Jack" \}, \{ name: "Fred" \}\] \});  
4.    //返回： "JackFred"

此外，你还可以使用自己的方法来扩展Handlebars，具体方法可参与[该文档][HandlebarsJS]。

**5.[Jade templating][Jade_templating]**

[![5236b9147bb1d.jpg][]][5236b9147bb1d.jpg]

随着Node.js的流行及大量Web应用构建于它之上，现在已有很多模板被设计用于服务器端。Jade模板与我们目前为止看到的大不相同，它依靠大量的缩进与空格。下面看一例：

**\[js\]** [view plain][] [copy][view plain]

1.  // template.jade  
2.    p  
3.      | Hello,  
4.      = name  
5.    
6.  // JS  
7.    jade.renderFile("template.jade", \{ name: "Jack" \}, function(err, result) \{  
8.      console.log(result);  
9.      // logs: Hello, Jack  
10.   \});

首次看到Jade可能会让你不舒服，但你会很快适应它。在“p”下面缩进两个字符，表明这两个字符存在于“p”内。“|”用来告知Jade，该行是需要输出的纯文本；“=”用来告知Jade寻找一个名为“name”的变量。

我们同样可以在Jade中使用循环：

**\[js\]** [view plain][] [copy][view plain]

1.  each person in people  
2.      li=person

调出存储名字的数组：\{ people: \[ "Jack", "Fred" \]\}，它将输出：

**\[html\]** [view plain][] [copy][view plain]

1.  <li>Jack</li><li>Fred</li>

Jade具有很多其他模板所不具有的功能。它也可以做诸如输出Script标签此类的事：

**\[js\]** [view plain][] [copy][view plain]

1.  script(type="text/javascript", src="myfile.js")

[javascript]: http://www.csdn.net/tag/javascript/news
[Mustache]: http://www.csdn.net/tag/mustache/news
[Underscore]: http://www.csdn.net/tag/underscore/news
[EJS]: http://www.csdn.net/tag/ejs/news
[Handlebars]: http://www.csdn.net/tag/handlebars%20/news
[Jade]: http://www.csdn.net/tag/jade/news
[The top 5 JavaScript templating engines]: http://www.creativebloq.com/web-design/templating-engines-9134396
[Mustache 1]: https://github.com/janl/mustache.js
[5236b8cc87dd7.jpg]: http://cms.csdnimg.cn/article/201309/16/5236b8cc87dd7.jpg
[view plain]: http://www.csdn.net/article/2013-09-16/2816951-top-five-javascript-templating-engines
[Underscore_Templates]: http://underscorejs.org/
[5236b8e68587e.jpg]: http://cms.csdnimg.cn/article/201309/16/5236b8e68587e.jpg
[Link 1]: http://underscorejs.org/#template
[Embedded_JS_Templates]: http://embeddedjs.com/
[5236b8f4259e7.jpg]: http://cms.csdnimg.cn/article/201309/16/5236b8f4259e7.jpg
[HandlebarsJS]: http://handlebarsjs.com/
[5236b905f3bce.jpg]: http://cms.csdnimg.cn/article/201309/16/5236b905f3bce.jpg
[Jade_templating]: http://jade-lang.com/
[5236b9147bb1d.jpg]: http://cms.csdnimg.cn/article/201309/16/5236b9147bb1d.jpg