学习篇：NodeJS中的模板引擎：jade
NodeJS 模板引擎作用：生成页面
在node常用的模板引擎一般是
1、jade ——破坏式的、侵入式、强依赖（对原有的html体系不友好，走自己的一套体系）
2、ejs ——温和的、非侵入式的、弱依赖
本次就汇总一下jade的一些特性和使用方法。
一、Jade
在node中，jade的编写特性有：
1、根据缩进，来划分规定层级
例如：在原始目录下建立一个views目录，来存放该 test.jade
html
head
script
style
body
在node.js中来调用该jade（记得先用npm install jade）
const jade = require('jade') ;
var str = jade.renderFile('./views/test.jade' ,{pretty : true }) //pretty : ture 相当于beauty格式化一下输出的代码
console.log(str)
运行一下，log输出的语句便成了
<html>
<head>
<script></script>
<style></style>
</head>
<body>
</body>
</html>
可以看到在nodejs中的jade模板引擎，是根据缩进输入的情况，来划分规定层级的。
当然，如果你想把该代码输出成一个html文件,我们可以在源目录下新建一个build目录来存放生成的文件
那就将刚才的node.js改成
const jade = require('jade');//加载jade引擎
const fs = require('fs')
var str = jade.renderFile('./views/test.jade' ,{pretty : true }); //pretty : ture 相当于beauty格式化一下输出的代码
fs.writeFile('./buuld/index.html' ,str , function(err){
if (err)
console.log("编译失败");
else
console.log("编译成功");
})
执行完毕会在build目录下生成index.html
以上就是jade初级的使用方法。
但是我们使用模板引擎的目的并不是再此，还是能够添加css/js/data等数据。
2、关于class/style的写法——属性放在（）里面，用逗号分隔
如：
html
head
script
style
body
div(class=['aaa','bbb','ccc'])
//class也可以写成div()
div(200px' ,height:'300px' ,background:'red'})
//style也可以写成div()
运行一下node.js，则输出结果为
<html>
<head>
<script></script>
<style></style>
</head>
<body>
<div class="aaa bbb ccc">
<div ></div>
</body>
</html>
关于上方输出格式，可以发现，style是可以用json传输的，class是可以采用数组传输进去的。
因此可以在node.js中直接插入相关属性数据，然后在jade文件调用，这样就可以很方便的生成不同框架的模板文件
如果你想插入相关属性数据，并调用的话，应当在node.js中的 jade.renderFile中如此添加数据
/
var str = jade.renderFile('./views/test.jade' ,{pretty : true ,
arr:['aaa' ,'bbb' ,'ccc'], cls:{width :'200px' , height:'200px' , background :'red'}
});
并在test.jade文件中修改如下：
html
head
script
style
body
div(class=arr)
div(style=cls})
运行一下，结果是跟刚才的相同
3、在jade标签中输入数据时，记得在相应标签后，加一个空格
我们通常前端编程的时候，一般都会写到
<div>名称：DobTink</div> //在标签内添加“名称：”之类的数据
<div>年龄：15</div>
<script src='a.js'></script>
<script> //或者在jade中编写JavaScript
window.onload = function(){
console.log('测试输出');
}
</script>
<a href="http://www.dobtink.com">首页</a> //编写a标签、img标签给其src赋予属性
///等等
而在jade中，我们需要这样来写
div 名称：DobTink
div 年龄：15
script(src='a.js' ,xx = '')
script. //注意在script后面加个点"."
window.onload = function(){
console.log('测试输出');
}
a(href="http://www.dobtink.com") 首页
执行一下，便如上所示。
4、在jade中使用if else switch while 等语句
有些情况下，我们需要从后天拿取数据，并对数据在jade中进行数据处理操作，而在jade中的 这些语句还是很方便地
代码如下：
4.1 、jade中的 if 使用
html
head
body
-var a = 15;
-if(a%2==0)
div(red'}) 偶数
-else
div(green'}) 奇数
4.2 、jade中的 switch 使用
html
head
body
-var a = 3;
case a
when 0
div aaa
when 1
div bbb
when 2
div ccc
when 3
div ddd
default
|默认
在jade中，switch是不存在的，被转义成了case,使用方法跟switch一致。
在该段代码中 “|”符号，是直接输出后面数据， "-"号之后的语句，jade会默认为是逻辑执行代码语句，之后的语句它并不会要求每行都需要添加"-"符号。