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大小(很小)
  • 简单
  • 无依赖
  • 无逻辑
  • 非预编译模板
  • 编程语言无关

举例

正如你在这个例子中所看到的,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> 列表迭代器,它将每个条目用 <li> 包装。你可以在这里阅读更多关于块表达式的内容

关键点

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

举例

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

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

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

jQuery Template

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

关键点

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

举例

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

其他选择

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

Underscore.js

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

Embedded JS Teamplates(EJS)

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

结束语

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

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

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

想发表什么见解吗?请在下面留下你的评论!

1 7 收藏 评论

关于作者:cucr

新浪微博:@hop_ping 个人主页 · 我的文章 · 17

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部