上一節(jié)-node.js學(xué)習(xí)（11）—cookie和session的使用
1.模板引擎
什么是模板引擎张抄，我們可以分開(kāi)理解赖淤。
模板：一個(gè)模子（結(jié)構(gòu)）管搪。供你套數(shù)據(jù)谆构，并且依據(jù)不同數(shù)據(jù)去走不同的邏輯
引擎：一個(gè)處理器（編譯、運(yùn)行）框都，最后渲染出HTML代碼
所以搬素，合起來(lái)理解模板引擎使用模板文件來(lái)動(dòng)態(tài)生成HTML文件，在生成時(shí)又可以按照一定的規(guī)則將應(yīng)用程序里的數(shù)據(jù)整合進(jìn)HTML文件魏保。類似后臺(tái)的jsp語(yǔ)言熬尺。
nodejs中比較流行的模板引擎有2個(gè)——jade和ejs。
本章節(jié)我們先了解下jade谓罗。
2.jade( pug )
背景： 以前叫jade粱哼，因?yàn)楹妥?cè)商標(biāo)重名，從2.0.0開(kāi)始檩咱，已經(jīng)改名成（pug）揭措，所有新版本都將在pug下發(fā)布胯舷。但是以前舊版本jade仍可以安裝使用，只不過(guò)無(wú)法使用新版本的功能了绊含。
特點(diǎn)： jade屬于破壞式（侵入式）引擎桑嘶。它將原本的雙標(biāo)簽省略,尖括號(hào)也不見(jiàn)了，使用縮進(jìn)來(lái)表示層級(jí)躬充，然后再會(huì)把縮進(jìn)后的字母變?yōu)闃?biāo)簽逃顶。這樣易讀、簡(jiǎn)潔充甚，但是如果想移植 html 文件到 jade 就得重寫(xiě)以政，很影響效率，現(xiàn)在看來(lái)大多人普遍會(huì)采用 ejs 來(lái)開(kāi)發(fā)項(xiàng)目伴找。具體為什么重寫(xiě)盈蛮、破壞式，學(xué)習(xí)了下面的語(yǔ)法就可以明白了疆瑰。
3.渲染html
目錄結(jié)構(gòu)如下：
我們?cè)趈ade.js里面增加如下代碼：
const jade=require('jade');
var str=jade.render('div a')
console.log(str) //<div>a</div>
上面我們引入jade（也可以使用pug眉反，用法一樣），執(zhí)行jade自帶的jade.render()方法穆役，運(yùn)行該文件寸五，發(fā)現(xiàn)輸出結(jié)果為我們常見(jiàn)的html結(jié)構(gòu)。<div></div>,但是實(shí)際開(kāi)發(fā)中耿币，這種不會(huì)使用梳杏，我們需要渲染很多層結(jié)構(gòu)。
4.渲染文件
現(xiàn)在我們新建一個(gè)文件夾（這我叫views）淹接，專門放咱們的jade文件（也可以使用.pug文件十性，用法一樣）。目錄結(jié)構(gòu)如下：
我們知道jade是以縮進(jìn)來(lái)展示html的塑悼，那么我們?cè)?code>1.jade文件增加一段簡(jiǎn)單的代碼
doctype html
html
head
body
div
p
span
然后在1.js文件中增加下面代碼
const jade=require('jade');
var str=jade.renderFile('./views/1.jade',{
pretty:true //格式化
})
console.log(str);
//str為
<!DOCTYPE html>
<html>
<head>
<body>
<div></div>
<p></p><span></span>
</body>
</head>
</html>
很簡(jiǎn)潔吧劲适，所以理解了之前為什么將jade是破壞性、移植需重寫(xiě)厢蒜，因?yàn)檎Z(yǔ)法已經(jīng)和html完全不一樣霞势，即破壞了原有的語(yǔ)法，移植過(guò)來(lái)的html代碼必須要安裝jade自己的語(yǔ)法來(lái)寫(xiě)才行斑鸦，否則無(wú)法識(shí)別愕贡。
我們使用
jade.renderFile()來(lái)渲染jade文件成html結(jié)構(gòu)-
上面代碼增加
{pretty:true}，表示格式化輸出的代碼巷屿，如果不加固以，默認(rèn)顯示在一行<html><head><body><div></div><p></p><span></span></body></head></html> 如果是行內(nèi)元素(默認(rèn)排成一行)，jade會(huì)自動(dòng)識(shí)別嘱巾，就算格式化憨琳，也會(huì)顯示在一行
jade通過(guò)縮進(jìn)來(lái)識(shí)別诫钓，所以只要有縮進(jìn)（不管相差幾格），都會(huì)識(shí)別栽渴。一般我們用2格
學(xué)習(xí)了jade的簡(jiǎn)單語(yǔ)法后尖坤，下面我們講解下jade的基本語(yǔ)法規(guī)則。
5.id與class
div#test.test1.test2 或者 #foo.bar
//轉(zhuǎn)換為
<div id="test" class="test1 test2"></div>
上面#foo.bar為語(yǔ)法糖寫(xiě)法（只渲染成div標(biāo)簽）闲擦，目前的版本已經(jīng)被很好地支持了慢味。
6.標(biāo)簽文本
div 文本
div 文本
div 文本
//轉(zhuǎn)換為
<div>文本</div>
<div> 文本</div>
<div> 文本</div>
使用一個(gè)空格+文本來(lái)渲染標(biāo)簽中的文本內(nèi)容，假若有多段文本怎么辦墅冷？有兩種寫(xiě)法：
-
使用
|來(lái)渲染多行文本纯路，該符號(hào)表示原樣輸出。div |文本1 |文本2 |文本3 script |document.getElementById('test').onClick=function(){ | alert(1) | console.log(1) |} //轉(zhuǎn)換為 <div> 文本1 文本2 文本3 </div> <script> document.getElementById('test').onClick=function(){ alert(1) console.log(1) } </script> -
使用
.來(lái)渲染多行文本寞忿。該符號(hào)在誰(shuí)后面（沒(méi)有空格驰唬，有的話相當(dāng)于單行標(biāo)簽文本），誰(shuí)下面的所有子節(jié)點(diǎn)都原樣輸出腔彰。div. div文本1 文本2 文本3 div . script. doucment.getElementById('test').onClick=function (){ alert(1) console.log(1) } //轉(zhuǎn)換為 <div> div文本1 文本2 文本3 </div> <div>.</div> <script> doucment.getElementById('test').onClick=function(){ alert(1) console.log(1) } </script>
上面例子叫编，. 跟在div和script后面，所以它們下面的子節(jié)點(diǎn)都原樣輸出
7.屬性
div(data-href='/login', title='登錄' test1=undefined test2=null) 登錄
div(style="width:100px;height:100px")
div(style={width:"100px",height:"100px"})
div(class="test1 test2")
div(class=["test1","test2"])
//渲染為
<div data-href="/login" title="登錄" test3="null">登錄</div>
<div style="width:100px;height:100px"></div>
<div style="width:100px;height:100px"></div>
<div class="test1 test2"></div>
<div class="test1 test2"></div>
- 使用
( )來(lái)渲染屬性霹抛，所以之前講的id以及class也可以改成這種寫(xiě)法（喜歡這種寫(xiě)法的話） - 當(dāng)一個(gè)屬性值是
undefined或者null不會(huì)被渲染出來(lái) - 在jade中style屬性很特殊（像json）搓逾，既可以使用
( )來(lái)渲染屬性，也可以使用json格式來(lái)渲染 - 在jade中style屬性很特殊（像數(shù)組）杯拐，既可以使用
( )來(lái)渲染屬性霞篡，也可以使用數(shù)組格式來(lái)渲染
8.include
上面我們講解了jade屬性的用法，所以我們引用外部js可以這樣寫(xiě)
doctype html
html
head
meta(charset="UTF-8")
script(src="1.js")
body
//轉(zhuǎn)換后
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="1.js"></script>
</head>
<body></body>
</html>
如果我不想引用外部js（因?yàn)槎嘣黾右粋€(gè)http請(qǐng)求）端逼，想直接寫(xiě)在script標(biāo)簽里面朗兵，我們之前也講解了多行文本（使用|或者'.'）。假如我不想使用多行文本顶滩，但是想使用屬性寫(xiě)法余掖，但又不想讓屬性寫(xiě)法生成一個(gè)http請(qǐng)求，該怎么辦礁鲁？jade中有個(gè)include標(biāo)簽可以讓我們把js代碼導(dǎo)入script標(biāo)簽中(類似sass中的import)盐欺，而不生成http請(qǐng)求。
假設(shè)1.js文件中的代碼為：
console.log(1)
執(zhí)行下面代碼：
doctype html
html
head
meta(charset="UTF-8")
script
include 1.js
body
//轉(zhuǎn)換后
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>console.log(1)</script>
</head>
<body></body>
</html>
上面只講解了jade的基本語(yǔ)法救氯，下面一節(jié)我們講解如何根據(jù)不同數(shù)據(jù)渲染不同的模板。
