第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的中间件，他给浏览器提供了在服务器端模板中使用的一些实用函数。