一巴元、前言
隨著前端業(yè)務(wù)的不斷發(fā)展，頁(yè)面交互邏輯的不斷提高剃允，讓數(shù)據(jù)和界面實(shí)現(xiàn)分離漸漸被提了出來(lái)。JavaScript的MVC思想也流行了起來(lái)齐鲤，在這種背景下斥废，基于node.js的模板引擎也隨之出現(xiàn)。
什么是模板引擎给郊？
它用于解析動(dòng)態(tài)數(shù)據(jù)和靜態(tài)頁(yè)面所生成的視圖文件牡肉，將原本靜態(tài)的數(shù)據(jù)變?yōu)閯?dòng)態(tài)，快速地實(shí)現(xiàn)頁(yè)面交互淆九；
目前使用較廣的模板引擎有以下幾種：Jade / Pug统锤、EJS、Handlebars炭庙。
jade模板引擎
jade模板引擎相較于原來(lái)的html會(huì)顯得更加簡(jiǎn)潔饲窿，它將標(biāo)簽原本的"<>"符號(hào)去掉，用括號(hào)代替焕蹄，層級(jí)使用tab縮進(jìn)來(lái)分逾雄，并且也支持js語(yǔ)法；
二腻脏、jade的基本使用
安裝jade：
cnpm install jade --save
在程序中引入jade：
app.set('views',"public"); //設(shè)置視圖的對(duì)應(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è)置視圖的對(duì)應(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í)，會(huì)自動(dòng)渲染public中的index.jade文件迹卢，之后轉(zhuǎn)換為HTML5進(jìn)行dom渲染顯示辽故。
三、jade基礎(chǔ)語(yǔ)法
1腐碱、jade對(duì)很多html操作進(jìn)行了簡(jiǎn)化誊垢，如下：
html
????head
????????style
????body
????????div(class="content")
????????????h1 正文
了解過(guò)html語(yǔ)句的，從結(jié)構(gòu)上一定會(huì)發(fā)現(xiàn)症见，它將原本的雙標(biāo)簽省略了喂走，尖括號(hào)也不見(jiàn)了，而層級(jí)的劃分則由縮進(jìn)實(shí)現(xiàn)谋作，默認(rèn)的芋肠，jade會(huì)把幾乎所有縮進(jìn)后的字母變?yōu)闃?biāo)簽(行內(nèi)元素)。以下代碼會(huì)變?yōu)椋?/p>
<html>
? ?<head>
? ? ? <style></style>
? ?</head>
? ?<body>
????????<div class="content">
????????????<h1>正文</h1>
????????</div>
? ?</body>
</html>
<div class="content"></div>也將用div(class="content")代表遵蚜，簡(jiǎn)化了代碼的書(shū)寫(xiě)帖池；
2奈惑、“|”符號(hào)的作用
有時(shí)我們想讓我們的標(biāo)簽成為文字，那么“|”成為了絕好的工具：
div(class="content",id="content")
????| center
我們可以看到睡汹，他將center作為文字原封不動(dòng)的寫(xiě)入了html中肴甸，而不是作為一個(gè)標(biāo)簽渲染。
當(dāng)然我們用它來(lái)轉(zhuǎn)換js語(yǔ)句：
script
????| var cli = document.getElementById("content");
????| cli.onclick=function(){
????| alert("aaa");
????| }
他將會(huì)變?yōu)椋?/p>
<script>
? ? var cli = document.getElementById("content");
? ? cli.onclick=function(){
? ? ? ? alert("aaa");
? ? }
</script>
3囚巴、識(shí)別js語(yǔ)句：
可以通過(guò) script. 來(lái)識(shí)別js語(yǔ)法：
script.
????var cli = document.getElementById("content");
????cli.onclick=function(){
????????alert("aaa");
????}
他也會(huì)變?yōu)椋?/p>
<script>
? ? var cli = document.getElementById("content");
? ? cli.onclick=function(){
? ? ? ? alert("aaa");
? ? }
</script>
我們可以看到原在，相比于用 | 使用script. 更加方便快捷。
4彤叉、引入其他js文件：
想在jade的js標(biāo)簽中引入其他js文件庶柿？沒(méi)錯(cuò)，它也支持秽浇。前提請(qǐng)確保他們?cè)谕晃募A下：
script
????include click.js
<script>var cli = document.getElementById("content");
????cli.onclick=function(){
? ? ? ???? alert("aaa");
????}
</script>
5浮庐、表達(dá)式
“-”允許我們直接寫(xiě)js語(yǔ)法，在變量調(diào)用時(shí)兼呵，通過(guò) #{a+b} 或 div=a+b 進(jìn)行：
html
????head
????body
????????-var a=10
????????-var b=20
????????div a+b為:#{a+b}
????????div=a+b
會(huì)得到：
<html>
????<head></head>
????<body>
????????<div>a+b為:30</div>
????????<div>30</div>
????</body>
</html>
6兔辅、for循環(huán)：
"-"也可以用于循環(huán)語(yǔ)句的使用
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
類(lèi)似于switch case語(yǔ)句：
html
????head
????body
????????- var test = "漢子"
????????-var none = "無(wú)"
????????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>
類(lèi)似于switch case，只執(zhí)行when中與case對(duì)應(yīng)的代碼塊懂昂，在匹配后面用 : 來(lái)作為要執(zhí)行的代碼介时，后面跟上標(biāo)簽和對(duì)應(yīng)語(yǔ)句
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的寫(xiě)法：
在對(duì)style樣式進(jìn)行修改時(shí)沸柔，與script相同，也可使用 . 對(duì)其進(jìn)行編輯铲敛，之后對(duì)不同的標(biāo)簽在其后面加{}褐澎，大括號(hào)里寫(xiě)css語(yǔ)句1，并使用 ; 隔開(kāi)
html
????head
????????meta(charset="utf-8")
????????title jade測(cè)試頁(yè)面
????????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測(cè)試頁(yè)面</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的作用是對(duì)模塊的復(fù)用工三，當(dāng)重復(fù)代碼有不同內(nèi)容時(shí)，起作用就來(lái)了：
- 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的一些常用語(yǔ)法先鱼，如果平常使用jade作為開(kāi)發(fā)俭正，那么這些是非常基礎(chǔ)的焙畔，也希望大家有所體會(huì)
