在Express项目中使用Handlebars模板引擎

时间:2022-08-24 09:03:21

原网址:http://fraserxu.me/2013/09/12/Using-Handlebarsjs-with-Expressjs/

最近在用Expressjs做一个项目,前后端都用它来完成。自己之前有用过Express一段时间,但是大部分都是用它来编写Restful的API,而没有真正用它所提供的前端页面渲染功能。

所以严格意义来讲这是第一次完整的项目。开始做之后就遇到了一些需要做出决定的地方。众所周知,Express的默认模板引擎是Jade.我在之前学习Express的时候,因为它是默认的引擎,所以有接触和使用过一段时间,感觉也还行。Jade在编写页面时所提供的嵌套功能比较实用,可以节省很大的代码量。

Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node. For discussion join the Google Group.

上面是Jade Github所在页面的描述。可以得知它是一个注重性能,受Hamle影响,并特别针对Nodejs而编写的前端模板引擎。

我们先来看一下Jade官方页面所给的例子:

doctype 5
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) {
bar(1 + 5)
}
body
h1 Jade - node template engine
#container.col
if youAreUsingJade
p You are amazing
else
p Get on it!
p.
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.

我们可以看到,对比原生的HTML, Jade明显的一个优势就是标签数量上的减少。很多地方只要按照约定的缩进规则编写,完全可以避免使用原生HTML时标签忘记闭合的问题。同时Jade还提供了一些用于渲染判断的条件,可以根据数据来决定显示的内容等功能。

另外Jade的遍历数据生成页面功能,配合使用Json数据时特别好用,可以很大程度上减少代码量。

而另外一个原因,也是觉大多数人使用Jade的原因,可能都跟我一样,因为是Express框架自带的模板引擎,而它的作者也是鼎鼎有名的TJ.

看了标题也许会奇怪,既然Jade出自大神之手,而且简单易用,我为什么还要去选择Handlebarsjs呢?

同样我们看下官方描述:

Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.

Mustache templates are compatible with Handlebars, so you can take a Mustache template, import it into Handlebars, and start taking advantage of the extra Handlebars features.

作为一个模板引擎,它继承于著名的Mustache模板引擎,具备了渲染页面的基础功能,并在其基础上进行拓展。

而另一个值得关注的是其作者Yehuda Katz,熟悉的朋友可能知道,他是著名JavaScript MVC框架Emberjs代码的主要贡献者之一,而且在他的影响下也成为了Emberjs的默认模板引擎。而另外,Yehuda本身也是W3C规范制定小组的成员之一,其影响也不亚于TJ.

抛开框架的背景,我们来看看实际的应用场景。工具无非好坏,顺手才是王道。评断一个东西好坏关键还是看它是否满足自己的应用需求。

在开始做现在的项目之前,我已经用Jade完成了所有的功能,而且对于代码也还比较满意。但是在提交之后问题产生了。

因为这个项目不是我一个人在做,和我一起合作的同事之前没有接触过Jade,而且另外一位负责编写样式的同事对于JavaScript的模板引擎也不是很熟悉。这样一来,由于我的原因,导致团队成员之间无法协作。首先是JS开发人员需要时间来掌握和熟悉Jade语法,而另外一个更为严重,Jade语法的特性决定了其不利于配套CSS的书写(这点通过编译之后可以解决,但是一定程度上增加了工作量)。

于是我开始思考使用Jade是否正确。这里的两个问题是我必须面对的,而项目的进度不能因为这个受到影响,于是我开始考虑选择其他的模板引擎。

前面提到Emberjs用到了Handlebarsjs,所以在选择时我很容易就想到了它。

Handlebars的官网给出了很多例子,而且上手也很容易,前后端通用,使用起来也很简单,这里就不对其使用多做介绍。

回到文章重点,因为Express并不提供对Handlerbarjs的直接支持,这样在使用时会面临一定问题。

要在Express中使用Handlerbars作为模板引擎,首先需要做出一下设置:

  1. 安装Express, Handlebars, Consolidate:

     "dependencies": {
    "express": "3.x",
    "consolidate": "0.4.0",
    "handlebars": "1.0.7"
    }
  2. 配置选择引擎:

     // Use handlebars as template engine
    app.engine("html", consolidate.handlebars);
    app.set("view engine", "html");
    app.set("views", __dirname + "/views");
  3. 注册模板:

     // Register partials
    var partials = "./views/partials/";
    fs.readdirSync(partials).forEach(function (file) {
    var source = fs.readFileSync(partials + file, "utf8"),
    partial = /(.+)\.html/.exec(file).pop();
    Handlebars.registerPartial(partial, source);
    })

这样我们就可以在项目中使用Handlerbars来渲染页面。但是这样做后,我又遇到了另外一个问题。通过以上的方法我可以很容易的单独去加载某个页面。但是实际应用中,一般会有多个页面,而且多个页面之间会共享页面的header和footer部分。这样会导致重复编写很多代码。

在使用Jade是我们可以很容易的使用如下代码来实现页面模板功能:

include layout

但是由于Express并非直接支持Handlerbars,所以要实现这个功能还需要一定的设置。在Handlerbars中,可以通过 来实现sub-template的功能。在查找了相关模块之后,我发现了hbs这个Express中间件。

这个模块使用起来很简单,可以完美解决我所遇到的问题。使用方法如下:

  1. 安装模块:

     npm install hbs --save
  2. 设置模板:

     app.set('view engine', 'html');
    app.engine('html', require('hbs').__express);
  3. 注册模板:

     var hbs = require('hbs');
    hbs.registerHelper('helper_name', function(...) { ... });
    hbs.registerPartial('partial_name', 'partial value');

如果需要注册整个文件夹,也可使用如下命令:

    var hbs = require('hbs');
hbs.registerPartials(__dirname + '/views/partials');

这样,我们就可以做到页面模板的重复利用,可以显著减少代码量。

而另外一个关键原因,在于Handlerbars对比Jade,语法更加简单。最重要的还是其普通元素同样使用原生HTML的写法,这样,对于编写样式的同事来讲就会更加友好。使用传统的方式编写样式,可以显著降低学习成本,从而加快项目进度。

而Handerbars所带来的一些其他功能,也会让项目的开发变得更加轻松。

下面附上我项目的基本结构,希望能对同样使用这种方案的同学有一定帮助。

.
├── app.js
├── node_modules
│   ├── express
│   ├── handlebars
│   ├── hbs
│   ├── less-middleware
│   ├── nodemon
│   └── request
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   │   └── app.js
│   ├── lib
│   │   ├── font
│   │   ├── js
│   │   └── stylesheets
│   └── stylesheets
│   ├── style.css
│   └── style.less
├── routes
│   ├── github.js
│   └── index.js
└── views
├── index.hbs
├── orgs.hbs
└── partials
├── footer.hbs
└── header.hbs