上一節(jié)-node.js學(xué)習(xí)（11）—cookie和session的使用
1.模板引擎
什么是模板引擎，我們可以分開理解。
模板：一個模子（結(jié)構(gòu)）。供你套數(shù)據(jù)，并且依據(jù)不同數(shù)據(jù)去走不同的邏輯
引擎：一個處理器（編譯、運行），最后渲染出HTML代碼
所以，合起來理解模板引擎使用模板文件來動態(tài)生成HTML文件，在生成時又可以按照一定的規(guī)則將應(yīng)用程序里的數(shù)據(jù)整合進(jìn)HTML文件。類似后臺的jsp語言。
nodejs中比較流行的模板引擎有2個——jade和ejs。
本章節(jié)我們先了解下jade。
2.jade( pug )
背景： 以前叫jade，因為和注冊商標(biāo)重名，從2.0.0開始，已經(jīng)改名成（pug），所有新版本都將在pug下發(fā)布。但是以前舊版本jade仍可以安裝使用，只不過無法使用新版本的功能了。
特點： jade屬于破壞式（侵入式）引擎。它將原本的雙標(biāo)簽省略,尖括號也不見了，使用縮進(jìn)來表示層級，然后再會把縮進(jìn)后的字母變?yōu)闃?biāo)簽。這樣易讀、簡潔，但是如果想移植 html 文件到 jade 就得重寫，很影響效率，現(xiàn)在看來大多人普遍會采用 ejs 來開發(fā)項目。具體為什么重寫、破壞式，學(xué)習(xí)了下面的語法就可以明白了。
3.渲染html
目錄結(jié)構(gòu)如下：
我們在jade.js里面增加如下代碼：
const jade=require('jade');
var str=jade.render('div a')
console.log(str) //<div>a</div>
上面我們引入jade（也可以使用pug，用法一樣），執(zhí)行jade自帶的jade.render()方法，運行該文件，發(fā)現(xiàn)輸出結(jié)果為我們常見的html結(jié)構(gòu)。<div></div>,但是實際開發(fā)中，這種不會使用，我們需要渲染很多層結(jié)構(gòu)。
4.渲染文件
現(xiàn)在我們新建一個文件夾（這我叫views），專門放咱們的jade文件（也可以使用.pug文件，用法一樣）。目錄結(jié)構(gòu)如下：
我們知道jade是以縮進(jìn)來展示html的，那么我們在1.jade文件增加一段簡單的代碼
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>
很簡潔吧，所以理解了之前為什么將jade是破壞性、移植需重寫，因為語法已經(jīng)和html完全不一樣，即破壞了原有的語法，移植過來的html代碼必須要安裝jade自己的語法來寫才行，否則無法識別。
我們使用
jade.renderFile()來渲染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會自動識別，就算格式化，也會顯示在一行
jade通過縮進(jìn)來識別，所以只要有縮進(jìn)（不管相差幾格），都會識別。一般我們用2格
學(xué)習(xí)了jade的簡單語法后，下面我們講解下jade的基本語法規(guī)則。
5.id與class
div#test.test1.test2 或者 #foo.bar
//轉(zhuǎn)換為
<div id="test" class="test1 test2"></div>
上面#foo.bar為語法糖寫法（只渲染成div標(biāo)簽），目前的版本已經(jīng)被很好地支持了。
6.標(biāo)簽文本
div 文本
div 文本
div 文本
//轉(zhuǎn)換為
<div>文本</div>
<div> 文本</div>
<div> 文本</div>
使用一個空格+文本來渲染標(biāo)簽中的文本內(nèi)容，假若有多段文本怎么辦？有兩種寫法：
-
使用
|來渲染多行文本，該符號表示原樣輸出。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> -
使用
.來渲染多行文本。該符號在誰后面（沒有空格，有的話相當(dāng)于單行標(biāo)簽文本），誰下面的所有子節(jié)點都原樣輸出。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é)點都原樣輸出
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>
- 使用
( )來渲染屬性，所以之前講的id以及class也可以改成這種寫法（喜歡這種寫法的話） - 當(dāng)一個屬性值是
undefined或者null不會被渲染出來 - 在jade中style屬性很特殊（像json），既可以使用
( )來渲染屬性，也可以使用json格式來渲染 - 在jade中style屬性很特殊（像數(shù)組），既可以使用
( )來渲染屬性，也可以使用數(shù)組格式來渲染
8.include
上面我們講解了jade屬性的用法，所以我們引用外部js可以這樣寫
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（因為多增加一個http請求），想直接寫在script標(biāo)簽里面，我們之前也講解了多行文本（使用|或者'.'）。假如我不想使用多行文本，但是想使用屬性寫法，但又不想讓屬性寫法生成一個http請求，該怎么辦？jade中有個include標(biāo)簽可以讓我們把js代碼導(dǎo)入script標(biāo)簽中(類似sass中的import)，而不生成http請求。
假設(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的基本語法，下面一節(jié)我們講解如何根據(jù)不同數(shù)據(jù)渲染不同的模板。
