一、前言
隨著前端業(yè)務(wù)的不斷發(fā)展，頁面交互邏輯的不斷提高，讓數(shù)據(jù)和界面實(shí)現(xiàn)分離漸漸被提了出來。JavaScript的MVC思想也流行了起來，在這種背景下，基于node.js的模板引擎也隨之出現(xiàn)。
什么是模板引擎？
它用于解析動態(tài)數(shù)據(jù)和靜態(tài)頁面所生成的視圖文件，將原本靜態(tài)的數(shù)據(jù)變?yōu)閯討B(tài)，快速地實(shí)現(xiàn)頁面交互；
目前使用較廣的模板引擎有以下幾種：Jade / Pug、EJS、Handlebars。
jade模板引擎
jade模板引擎相較于原來的html會顯得更加簡潔，它將標(biāo)簽原本的"<>"符號去掉，用括號代替，層級使用tab縮進(jìn)來分，并且也支持js語法；
二、jade的基本使用
安裝jade：
cnpm install jade --save
在程序中引入jade：
app.set('views',"public"); //設(shè)置視圖的對應(yīng)目錄
app.set("view engine","jade"); //設(shè)置默認(rèn)的模板引擎
app.engine('jade', require('jade').__express); //定義模板引擎
特定路由渲染：
app.use("/",function(req,res){
res.render("index.jade");
});
完整實(shí)例：
const express=require("express");
const jade=require("jade");
const fs=require('fs');
var app=express();
//引用jade
app.set('views',"public"); //設(shè)置視圖的對應(yīng)目錄
app.set("view engine","jade"); //設(shè)置默認(rèn)的模板引擎
app.engine('jade', jade.__express); //定義模板引擎
//獲取jade文件
var str=jade.renderFile("./public/index.jade",{pretty:true});
console.log(str);
app.use("/",function(req,res){
res.render("index.jade");
});
app.listen(8080);
由上面的app.set('views',"public");可知，這里將jade文件放在了public文件夾下：
在執(zhí)行res.render時(shí)，會自動渲染public中的index.jade文件，之后轉(zhuǎn)換為HTML5進(jìn)行dom渲染顯示。
三、jade基礎(chǔ)語法
1、jade對很多html操作進(jìn)行了簡化，如下：
html
????head
????????style
????body
????????div(class="content")
????????????h1 正文
了解過html語句的，從結(jié)構(gòu)上一定會發(fā)現(xiàn)，它將原本的雙標(biāo)簽省略了，尖括號也不見了，而層級的劃分則由縮進(jìn)實(shí)現(xiàn)，默認(rèn)的，jade會把幾乎所有縮進(jìn)后的字母變?yōu)闃?biāo)簽(行內(nèi)元素)。以下代碼會變?yōu)椋?/p>
<html>
? ?<head>
? ? ? <style></style>
? ?</head>
? ?<body>
????????<div class="content">
????????????<h1>正文</h1>
????????</div>
? ?</body>
</html>
<div class="content"></div>也將用div(class="content")代表，簡化了代碼的書寫；
2、“|”符號的作用
有時(shí)我們想讓我們的標(biāo)簽成為文字，那么“|”成為了絕好的工具：
div(class="content",id="content")
????| center
我們可以看到，他將center作為文字原封不動的寫入了html中，而不是作為一個(gè)標(biāo)簽渲染。
當(dāng)然我們用它來轉(zhuǎn)換js語句：
script
????| var cli = document.getElementById("content");
????| cli.onclick=function(){
????| alert("aaa");
????| }
他將會變?yōu)椋?/p>
<script>
? ? var cli = document.getElementById("content");
? ? cli.onclick=function(){
? ? ? ? alert("aaa");
? ? }
</script>
3、識別js語句：
可以通過 script. 來識別js語法：
script.
????var cli = document.getElementById("content");
????cli.onclick=function(){
????????alert("aaa");
????}
他也會變?yōu)椋?/p>
<script>
? ? var cli = document.getElementById("content");
? ? cli.onclick=function(){
? ? ? ? alert("aaa");
? ? }
</script>
我們可以看到，相比于用 | 使用script. 更加方便快捷。
4、引入其他js文件：
想在jade的js標(biāo)簽中引入其他js文件？沒錯(cuò)，它也支持。前提請確保他們在同一文件夾下：
script
????include click.js
<script>var cli = document.getElementById("content");
????cli.onclick=function(){
? ? ? ???? alert("aaa");
????}
</script>
5、表達(dá)式
“-”允許我們直接寫js語法，在變量調(diào)用時(shí)，通過 #{a+b} 或 div=a+b 進(jìn)行：
html
????head
????body
????????-var a=10
????????-var b=20
????????div a+b為:#{a+b}
????????div=a+b
會得到：
<html>
????<head></head>
????<body>
????????<div>a+b為:30</div>
????????<div>30</div>
????</body>
</html>
6、for循環(huán)：
"-"也可以用于循環(huán)語句的使用
html
????head
????body
????????-var arr=0;
????????-for(var i=5;i>arr;i--)
????????????div=i
????????div the number = #{i}
得到：
<html>
????<head></head>
????<body>
????????<div>5</div>
????????<div>4</div>
? ? ? ? <div>3</div>
????????<div>2</div>
????????<div>1</div>
????????<div>the number = 0</div>
????</body>
</html>
7、case ，when
類似于switch case語句：
html
????head
????body
????????- var test = "漢子"
????????-var none = "無"
????????div The word is #{test}
????????case test
????????????when "a": div the when is a
????????????when "b": div the second is b
????????????when "漢子": div the Third is 漢子
????????????default: The words is #{none}
得到：
<html>
????<head></head>
????<body>
????????<div>The word is 漢子。</div>
????????<div>the Third is 漢子</div>
????</body>
</html>
類似于switch case，只執(zhí)行when中與case對應(yīng)的代碼塊，在匹配后面用 : 來作為要執(zhí)行的代碼，后面跟上標(biāo)簽和對應(yīng)語句
8、if else條件判斷
html
????head
????body
????????-for(var i=12;i>0;i--)
????????-if(i%2==0)
????????????div(style={background:'#eee',width:'100%',height:'20px',color: '#333'}) 偶數(shù)
????????-else
????????????div(style={background:'#333',width:'100%',height:'20px',color: '#eee'}) 奇數(shù)
得到：
<html>
????<head></head>
????<body>
????????<div style="background:#eee;width:100%;height:20px;color:#333">? ? 偶數(shù)</div>
????????<div style="background:#333;width:100%;height:20px;color:#eee">? ? 奇數(shù)</div>
????????<div style="background:#eee;width:100%;height:20px;color:#333">? ? 偶數(shù)</div>
????????<div style="background:#333;width:100%;height:20px;color:#eee">? ? 奇數(shù)</div>
????????<div style="background:#eee;width:100%;height:20px;color:#333">? ? 偶數(shù)</div>
????????<div style="background:#333;width:100%;height:20px;color:#eee">? ? 奇數(shù)</div>
????????<div style="background:#eee;width:100%;height:20px;color:#333">? ? 偶數(shù)</div>
????????<div style="background:#333;width:100%;height:20px;color:#eee">? ? 奇數(shù)</div>
????????<div style="background:#eee;width:100%;height:20px;color:#333">? ? 偶數(shù)</div>
????????<div style="background:#333;width:100%;height:20px;color:#eee">? ? 奇數(shù)</div>
????????<div style="background:#eee;width:100%;height:20px;color:#333">? ? 偶數(shù)</div>
????????<div style="background:#333;width:100%;height:20px;color:#eee">? ? 奇數(shù)</div>
????</body>
</html>
9、style的寫法：
在對style樣式進(jìn)行修改時(shí)，與script相同，也可使用 . 對其進(jìn)行編輯，之后對不同的標(biāo)簽在其后面加{}，大括號里寫css語句1，并使用 ; 隔開
html
????head
????????meta(charset="utf-8")
????????title jade測試頁面
????????style.
????????????body{margin:0;padding:0}
????????????div
????????????{width: 100px;height: 100px;background: #ccc;text-align: center;line-height: 100px;margin: 10px auto}
????????????div.last{clear:left}
????body
????????-var a=0;
????????while a<12
????????????if a%2==0 && a!=0
????????????????div.last=a++
????????????else
????????????????div=a++
得到：
<html>
? <head>
? ? <meta charset="utf-8"/>
? ? <title>jade測試頁面</title>
? ? <style>
? ? ? body{margin:0;padding:0}
? ? ? div
? ? ? {width: 100px;height: 100px;background: #ccc;text-align: center;line-height: 100px;margin: 10px auto}
? ? ? div.last{clear:left}
? ? </style>
? </head>
? <body>
? ? <div>0</div>
? ? <div>1</div>
? ? <div class="last">2</div>
? ? <div>3</div>
? ? <div class="last">4</div>
? ? <div>5</div>
? ? <div class="last">6</div>
? ? <div>7</div>
? ? <div class="last">8</div>
? ? <div>9</div>
? ? <div class="last">10</div>
? ? <div>11</div>
? </body>
</html>
10、Mixin
Mixin的作用是對模塊的復(fù)用，當(dāng)重復(fù)代碼有不同內(nèi)容時(shí)，起作用就來了：
- var num = 0;
mixin node
? ? div The number in mixin node is #{num++}
+node()
+node()
+node()
div At last, the number in mixin node is #{num++}
得到：
<div>The number in mixin node is 0</div>
<div>The number in mixin node is 1</div>
<div>The number in mixin node is 2</div>
<div>At last, the number in mixin node is 3</div>
以上則是jade的一些常用語法，如果平常使用jade作為開發(fā)，那么這些是非?；A(chǔ)的，也希望大家有所體會
