Express全系列教程之(十)：渲染jade模板引擎
一、前言
隨著前端業務的不斷發展，頁面交互邏輯的不斷提高，讓數據和界面實現分離漸漸被提了出來。JavaScript的MVC思想也流行了起來，在這種背景下，基于node.js的模板引擎也隨之出現。
什么是模板引擎？
它用于解析動態數據和靜態頁面所生成的視圖文件，將原本靜態的數據變為動態，快速地實現頁面交互；
目前使用較廣的模板引擎有以下幾種：Jade / Pug、EJS、Handlebars。
jade模板引擎
jade模板引擎相較于原來的html會顯得更加簡潔，它將標簽原本的"<>"符號去掉，用括號代替，層級使用tab縮進來分，并且也支持js語法；
二、jade的基本使用
安裝jade：
cnpm install jade --save在程序中引入jade：
app.set('views',"public"); //設置視圖的對應目錄 app.set("view engine","jade"); //設置默認的模板引擎 app.engine('jade', require('jade').__express); //定義模板引擎特定路由渲染：
app.use("/",function(req,res){res.render("index.jade"); });完整實例：
const express=require("express"); const jade=require("jade"); const fs=require('fs'); var app=express();//引用jade app.set('views',"public"); //設置視圖的對應目錄 app.set("view engine","jade"); //設置默認的模板引擎 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文件夾下：
在執行res.render時，會自動渲染public中的index.jade文件，之后轉換為HTML5進行dom渲染顯示。
三、jade基礎語法
1、jade對很多html操作進行了簡化，如下：
htmlheadstylebodydiv(class="content")h1 正文了解過html語句的，從結構上一定會發現，它將原本的雙標簽省略了，尖括號也不見了，而層級的劃分則由縮進實現，默認的，jade會把幾乎所有縮進后的字母變為標簽(行內元素)。以下代碼會變為：
<html><head><style></style></head><body><div class="content"><h1>正文</h1></div></body> </html>也將用div(class="content")代表，簡化了代碼的書寫；
2、“|”符號的作用
有時我們想讓我們的標簽成為文字，那么“|”成為了絕好的工具：
div(class="content",id="content")| center我們可以看到，他將center作為文字原封不動的寫入了html中，而不是作為一個標簽渲染。
當然我們用它來轉換js語句：
他將會變為：
<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");}他也會變為：
<script>var cli = document.getElementById("content");cli.onclick=function(){alert("aaa");} </script>我們可以看到，相比于用 | 使用script. 更加方便快捷。
4、引入其他js文件：
想在jade的js標簽中引入其他js文件？沒錯，它也支持。前提請確保他們在同一文件夾下：
5、表達式
“-”允許我們直接寫js語法，在變量調用時，通過 #{a+b} 或 div=a+b 進行：
htmlheadbody-var a=10-var b=20div a+b為:#{a+b}div=a+b會得到：
<html><head></head><body><div>a+b為:30</div><div>30</div></body> </html>6、for循環：
"-"也可以用于循環語句的使用
htmlheadbody-var arr=0;-for(var i=5;i>arr;i--)div=idiv 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語句：
htmlheadbody- var test = "漢子"-var none = "無"div The word is #{test}case testwhen "a": div the when is awhen "b": div the second is bwhen "漢子": 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，只執行when中與case對應的代碼塊，在匹配后面用 : 來作為要執行的代碼，后面跟上標簽和對應語句
8、if else條件判斷
htmlheadbody-for(var i=12;i>0;i--)-if(i%2==0)div(style={background:'#eee',width:'100%',height:'20px',color: '#333'}) 偶數-elsediv(style={background:'#333',width:'100%',height:'20px',color: '#eee'}) 奇數得到：
<html><head></head><body><div style="background:#eee;width:100%;height:20px;color:#333"> 偶數</div><div style="background:#333;width:100%;height:20px;color:#eee"> 奇數</div><div style="background:#eee;width:100%;height:20px;color:#333"> 偶數</div><div style="background:#333;width:100%;height:20px;color:#eee"> 奇數</div><div style="background:#eee;width:100%;height:20px;color:#333"> 偶數</div><div style="background:#333;width:100%;height:20px;color:#eee"> 奇數</div><div style="background:#eee;width:100%;height:20px;color:#333"> 偶數</div><div style="background:#333;width:100%;height:20px;color:#eee"> 奇數</div><div style="background:#eee;width:100%;height:20px;color:#333"> 偶數</div><div style="background:#333;width:100%;height:20px;color:#eee"> 奇數</div><div style="background:#eee;width:100%;height:20px;color:#333"> 偶數</div><div style="background:#333;width:100%;height:20px;color:#eee"> 奇數</div></body> </html>9、style的寫法：
在對style樣式進行修改時，與script相同，也可使用 . 對其進行編輯，之后對不同的標簽在其后面加{}，大括號里寫css語句1，并使用 ; 隔開
htmlheadmeta(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<12if a%2==0 && a!=0div.last=a++elsediv=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的作用是對模塊的復用，當重復代碼有不同內容時，起作用就來了：
- var num = 0; mixin nodediv 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作為開發，那么這些是非常基礎的，也希望大家有所體會
總結
以上是生活随笔為你收集整理的Express全系列教程之(十)：渲染jade模板引擎的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Gantt - attachEvent事
- 下一篇： 调查：2013年十大急需的热门IT技能