详解Node.js模板引擎Jade入门

什么是模板引擎？

在使用Node.js开发Web应用时，我们需要将数据和页面内容结合，生成动态的HTML页面。模板引擎就是用来将数据和页面内容结合的工具。它可以生成HTML、XML、JSON等格式的数据，同时具有易于维护、快捷灵活、模板重用等优点。

为什么要使用模板引擎？

在服务器端动态生成网页的时候，需要对HTML文本进行字符串拼接，这样往往会产生繁琐、混乱的代码和难以维护的页面。使用模板引擎可以将业务逻辑和页面展示分离开来，对页面进行重构和更新变得十分便捷。

介绍Jade模板引擎

Jade是一个非常受欢迎、高效、功能强大的Node.js模板引擎。它基于缩进、可读性高的语法，最终将模板编译成HTML字符串，交由Node.js服务器呈现。

Jade模板引擎提供一系列的语法格式，并且与JavaScript代码非常类似，它具有括号记法、缩进等特色，在Jade模板引擎中，不需要使用闭合标签、特殊符号等，可以使模板看起来更加清晰，减少了一些不必要的冗余。

安装Jade

在终端中输入以下命令，安装Jade：

npm install jade

基本使用方法

1. 编写Jade模板

Jade模板使用缩进表示标签嵌套关系，支持括号记法和标准的HTML元素。例如下列Jade模板将转化为一个标题为“Hello, Jade”的网页。

doctype html
html
  head
    title Hello, Jade
  body
    h1 Hello, Jade

2. 编译Jade模板

使用Jade模块中的compileFile方法可以将一个Jade模板文件编译成网页文件。

var jade = require('jade');
var html = jade.compileFile('index.jade')();
console.log(html);

3. 填充数据

可以将数据作为一个对象传递给Jade渲染函数，在Jade模板中可以通过#{variable_name}来引用数据属性。

doctype html
html
  head
    title= title
  body
    h1= pageTitle
    p Welcome #{name}!

var jade = require('jade');
var template = jade.compileFile('index.jade');
var data = {title: 'Hello, Jade', pageTitle: 'Welcome to Jade!', name: 'John'};
var html = template(data);
console.log(html);

示例1

下面我们使用Jade模板引擎渲染一个用户列表的简单页面，演示默认类型的数据填充。

doctype html
html
  head
    title User List
  body
    h1 User List
    ul
      each user, index in users
        li #{index}: #{user.name} (#{user.age})

var jade = require('jade');
var users = [
  {name: 'Tom', age: 18},
  {name: 'Jerry', age: 20},
  {name: 'Mike', age: 22}
];
var template = jade.compileFile('user-list.jade');
var html = template({users: users});
console.log(html);

示例2

下面我们使用Jade模板引擎渲染一个用户列表的简单页面，演示使用filter过滤器进行数据格式化处理。具体格式化方法可以参考Jade官方文档。

doctype html
html
  head
    title User List
  body
    h1 User List
    ul
      each user, index in users
        li #{index}: #{user.name} (#{user.age|range})

var jade = require('jade');
var users = [
  {name: 'Tom', age: 18},
  {name: 'Jerry', age: 20},
  {name: 'Mike', age: 22}
];
var template = jade.compileFile('user-list.jade');
var html = template({users: users});
console.log(html);

总结

Jade模板引擎的流行，得益于其简洁明了的语法，以及出色的性能表现。熟悉了Jade的基本使用和API，你将在编写Node.js应用时，可以更便捷地对页面进行设计和生成。

参考资料

• Jade官方文档