JavaScript 模板引擎概述

在这篇文章中我们将对 JavaScript 模板进行概述。我们将首先讨论 JavaScript 模板是什么,何时使用它们,如何使用它们,在深入更多细节前,看看一些流行的模板引擎。我们将关注 Mustache, Handlebars 和 jQuery Template。

什么是JavaScript模板

JavaScript 模板是将 HTML 结构从包含它们的内容中分离的方法。模板系统通常会引入一些新语法,但通常是非常简单的,特别是如果我们以前已经在其他地方使用过模板系统(如 PHP 中的 Twig )。一个要注意的有趣的点是,替换标记通常是由双花括号({ {……} })表示,这也是 Mustache 和 Handlebars 名字的来源(提示:从侧面看它们的相似之处)。

什么时候使用JavaScript模板?

一旦我们发现自己在 JavaScript 字符串内包含 HTML,就应该开始考虑 JavaScript 模板可能给我们带来的好处。当建立一个可维护的代码库,关注点分离是至关重要的,所以任何可以帮助我们实现这一目标的手段都应该探索。在前端 web 开发,将 HTML 从 JavaScript 分离显得很重要(这是双向的,我们也不应该在 HTML 中内联 JavaScript)。

一些可以受益于 JavaScript 模板的常见场景是实时 web 应用程序(例如一个事件评论的直播应用),或国际化(i18n),它们通常要求使用相同的格式显示不同的内容。

如何使用 JavaScript 模板?

我们将通过特别的库案例详细介绍它,但本质上这和包含我们选择的库一样简单,即获取模板和使用一些数据渲染它。

大多数库支持内联和外部模板。内联模板在只有很少模板时非常适合,或者当每个加载的页面都需要使用模板,但是通常我们的模板应该是外部模板。外部模板带来很多好处,主要是模板永远不会被下载到客户端,除非它们被页面所需。

mustache.js

Mustache 是一个多语言,逻辑简单的模板系统。mustache.js 只是其中一个实现。一旦我们习惯了(非常简单的)语法,就可以在各种各样的编程语言中使用它。

关键点

·文件9kb大小(很小)
·简单
·无依赖
·无逻辑
·非预编译模板
·编程语言无关

举例

<script id="template" type="x-tmpl-mustache">
  <p>Use the <strong>{{power}}</strong>, {{name}}!</p>
</script>

//Grab the inline template
var template = document.getElementById('template').innerHTML;

//Parse it (optional, only necessary if template is to be used again)
Mustache.parse(template);

//Render the data into the template
var rendered = Mustache.render(template, {name: "Luke", power: "force"});

//Overwrite the contents of #target with the rendered HTML
document.getElementById('target').innerHTML = rendered;

正如你在这个例子中所看到的,Mustache.render 函数接受两个参数:Mustache 模板,以及一个包含所需的数据和代码的视图对象,它用于渲染模板。在这个案列下,我们使用简单的字符串替换name和power变量,但它可以做得更多。例如 循环遍历一个数组,或者使用 特别的渲染函数,使用当前视图作为其视图参数。

mustache.js 非常适合小型项目和模板复杂性较小的快速原型。需要关键注意的是,我们可以在一个项目开始时使用 mustache.js,然后轻松升级到 Handlebars.js,因为它们的模板(大部分)是相同的。

如果你想阅读更多关于 Mustache 的内容,看看 使用Mustache.js创建HMTL模板。

Handlebars.js

Handlebars.js 构建在 Mustache 之上,与Mustache模板大部分兼容。简而言之,它提供了 mustache.js 提供的一切,加上它支持块表达式和预编译模板。预编译模板是了不起的东西,因为它们大幅提高性能(在一个粗略的性能测试,预编译的 Handlebars.js 模板渲染的时间是Mustache模板的一半)。块表达式允许您在模板中包含更多的逻辑,更常见的例子之一是高级迭代——比如,创建一个

<

ul> 列表迭代器,它将每个条目用

  • 包装。你可以在这里阅读更多关于块表达式的内容。

    关键点

    1)86kb文件大小(大),或者使用预编译模板是18kb
    2)块表达式(helpers)
    3)预编译模板
    4)无依赖

    举例

    <script id="template" type="text/x-handlebars-template">
      <p>Use the <strong>{{power}}</strong>, {{name}}!</p>
    </script>
    
    //Grab the inline template
    var template = document.getElementById('template').innerHTML;
    
    //Compile the template
    var compiled_template = Handlebars.compile(template);
    
    //Render the data into the template
    var rendered = compiled_template({name: "Luke", power: "force"});
    
    //Overwrite the contents of #target with the renderer HTML
    document.getElementById('target').innerHTML = rendered;
    

    Handlebars.js 很适合性能要求高的项目,同时对于页面增加 18 kb 并不太担心。如果我们想使用块表达式,这也是选择它的原因。

    注意,要获得 Handlebars.js 的性能优势(和大大减少的文件大小)我们必须使用 预编译模板。为了有效地这样做,我们应该将Handlebars.js模板预编译添加到构建过程中(Grunt对此有一个很棒的插件)。

    如果你想了解更多关于 Handlebars 的内容,看看:Handlebars初学者指南

    jQuery Template

    jQuery Template没有mustache.js或Handlebars.js流行,但也不要忽视它。它的模板和Mustache模板不同,只是普通的HTML,没有新语法。它不使用标记替换技术,而使用数据属性来表示数据应该插入到HTML片段的位置。

    关键点

    1)7kb文件大小(小)
    2)需要jQuery (大于82kb)
    3)简单,但与Mustache以及Handlebars.js的工作方式不同
    4)没有预编译模板

    举例

    <script id="template" type="text/html">
      <p>
        Use the <strong data-content="power"></strong>, 
        <span data-content="name"></span>!
      </p>
    </script>
    
    //Call .loadTemplate() on the target container
    $('#target').loadTemplate(
      //Specify the template container (or file name of external template)
      $('#template'),
    
      //Specify the data to render
      {
        name: "Luke",
        power: "force"
      }
    );
    

    jQuery Template对于已经使用jQuery的项目很合适,因为文件大小非常小。但是如果你的项目不使用jQuery,考虑到总文件大小就不便推荐使用。

    其他选择

    当然还有很多其他解决方案可以解决这个问题,我们不会在本文中详细讨论。这里有一个一些其他受欢迎的选择的快速概述:

    Underscore.js

    Underscore是一个流行的JavaScript库,在无数的其他特性下它提供模板函数。默认情况下,它不使用Mustache的双花括号语法,而是选择 ERB-style的分隔符(< %…% >)。

    Embedded JS Teamplates(EJS)

    像Underscore.js,Embedded JS Templates使用ERB-style模板语法。EJS需要注意的一件事情是,必须是外部文件——他们不能有内联模板。

    结束语

    所以哪个是最好的?像大多数开发问题一样,没有银弹。这取决于很多事情:

    1)你是否已经在项目中使用jQuery?
    2)你之前使用过哪种模板系统?
    3)你是否想把逻辑从模板中分离?
    4)你对页面文件的整个大小有多担忧?
    5)你对性能有多担忧/你的网站是否需要支持低能耗设备?

    一旦我们思考这些因素,就可以从上面的列表做出合理的选择。然而之前简单地提到过,一个好的灵活的策略是先使用mustache.js,之后有功能添加或性能需求,再过渡到Handlebars.js。

    文章来源:伯乐在线/cucr 前端大全

    本站文章均由 HTML5梦工场 编辑从其他媒体精选HTML5相关文章转载,仅供网友学习和交流,如果我们的工作有侵犯到您的权益,请及时联系小编QQ:123464386,我们会在第一时间进行处理!