第4章-模板引擎Jade和Handlebars-4.3.单独使用Jade

模板引擎并不总是和Node.js一起使用（也不总是和框架一起用，比如Express.js） 有时，我们可能只是单独使用Jade，比如生成一个邮件模板，发布前预编译Jade和调试等。

一、安装Jade模块

1.用命令$mkdir mode_modules创建一个空文件夹 2.用命令$npm install jade -save安装并添加jade到package.json

例： 假如我们有发送电子邮件的Node.js脚本，然后要用模板动态生成电子邮件的HTML，代码如下：（文件jade-example.jade）

.header h1= title p .body p= body .footer div= By a(href="http://weibo.com/#{author.weibo}")= author.name ul each tag, index in tags li= tag

在这个例子中，Node.js脚本需要填充数据，提供给模板的数据如下：

title：字符串 body：字符串 author：字符串 tags：数组

我们可以从多个源获取这些变量，如：数据库、文件系统、用户输入等。 在文件jade-example.js中，用编码的方式给title,author,tags传值，用命令行参数的方式给body传值：

var jade = require('jade'); fs = require('fs'); var data = { title: "Node.js学习之路", author: { weibo: "@sqxj", name: "深情小建" }, tags: ['express', 'node', 'javascript'] } data.body = process.argv[2]; fs.readFile("jade-example.jade', 'utf-8', function(error, source){ var template = jade.compile(source);//读取模板 var html = template(data);//填充数据到模板 console.log(html); });

当我们运行$node jade-example.js 'email body'时，如图：

输出格式化后的HTML如下：

<div class="header"> <h1>Node.js学习之路</h1> <p></p> </div> <div class="body"> <p>email body</p> </div> <div class="footer"> <div> <a href="http://weibo.com/@sqxj">深情小建</a> </div> <ul> <li>express</li> <li>node</li> <li>javascript</li> </ul> </div>

二、Jade文件读取API

除了jade.compile(),Jade API还有jade.render()和jade.renderFile() 用jade.render()重写前面例子：

var jade = require('jade'); fs = require('fs'); var data = { title: "Node.js学习之路", author: { weibo: "@sqxj", name: "深情小建" }, tags: ['express', 'node', 'javascript'] } data.body = process.argv[2]; fs.readFile("jade-example.jade', 'utf-8', function(error, source){ var html = jade.render(source, data);//读取模板并填充数据 console.log(html); });

=====================华丽丽的分割线=========================================== 如果，用jade.renderFile()，文件jade-example.js会更简洁：

var jade = require('jade'); fs = require('fs'); var data = { title: "Node.js学习之路", author: { weibo: "@sqxj", name: "深情小建" }, tags: ['express', 'node', 'javascript'] } data.body = process.argv[2]; jade.renderFile("jade-example.jade', data, function(error, html){ console.log(html); });

三、题外话

要想在浏览器中使用Jade的话，可以使用browserify和他的中间件jadeify

注：要想浏览器和服务器端使用相同的Jade模板，推荐Storify的jade-browser，jade-browser作为一个Express.js的中间件，他给浏览器提供了在服务器端模板中使用的一些实用函数。