zoukankan      html  css  js  c++  java

  • 【JavsScript】推荐五款流行的JavaScript模板引擎

    摘要：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是一个不好的模板解决方案。下面例举一例：

    [js] view plaincopy
     
    1. Mustache.render("Hello, {{name}}", { name: "Jack" });  
    2. // 返回： Hello, Jack  

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

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

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

    [js] view plaincopy
     
    1. <script type="text/x-mustache" id="template">  
    2.     <p>Hello, {{name}}</p>  
    3.   </script>  

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

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

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

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

    [js] view plaincopy
     
    1. {{#people}}  
    2.   {{name}}  
    3. {{/people}}  

    传递数据：

    [js] view plaincopy
     
    1. { people: [ { name: "Jack" }, { name: "Fred" } ] }  

    你将得到“JackFred”字符串。

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

    2.Underscore Templates

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

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

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

    [js] view plaincopy
     
    1. var template = "<% _.each(people, function(name) { %> <li><%=   name %></li> <% }); %>"  
    2. _.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。

    [js] view plaincopy
     
    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 plaincopy
     
    1. new EJS({ text: "Hello, <%= name %>" }).render({ name: "Jack" });  

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

    [js] view plaincopy
     
    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官方网站。

    4.HandlebarsJS

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

    [js] view plaincopy
     
    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 plaincopy
     
    1. {{ author.firstName}} {{author.lastName}}  

    而是下面这种形式

    [js] view plaincopy
     
    1. {{#with author}} {{firstName}} {{lastName}} {{/with}}  

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

    Handlebars也提供了“each”Helper： 

    [js] view plaincopy
     
    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，具体方法可参与该文档。

    5.Jade templating

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

    [js] view plaincopy
     
    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 plaincopy
     
    1. each person in people  
    2.     li=person  

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

    [html] view plaincopy
     
    1. <li>Jack</li><li>Fred</li>  

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

    [js] view plaincopy
     
    1. script(type="text/javascript", src="myfile.js")  

    了解更多Jade templating功能，请点击这里查看。

    这里只例举了最流行的五款模板引擎。此外还有很多，希望以该文为起点，帮你找到最适合你自己的模板引擎。（编译：陈秋歌 审校：夏梦竹）

    原文链接：The top 5 JavaScript templating engines

    http://www.csdn.net/article/2013-09-16/2816951-top-five-javascript-templating-engines
  • 相关阅读:
    Java 抽象类
    7.队列的链表实现
    6.队列的数组实现
    5.栈的链表实现
    4.栈的数组实现
    3.线性表-cursor
    2.线性表-Linked list
    1.线性表-Array
    hello world!
    boost 大小端转换
  • 原文地址：https://www.cnblogs.com/daishuguang/p/3902360.html
Copyright © 2011-2022 走看看