Express全系列教程之(十)：jade模板引擎
1、前言
隨着前端業務的不斷髮展，頁面交互邏輯的不斷提升，讓數據和界面實現分離漸漸被提了出來。JavaScript的MVC思想也流行了起來，在這種背景下，基於node.js的模板引擎也隨之出現。javascript
什麼是模板引擎？
它用於解析動態數據和靜態頁面所生成的視圖文件，將本來靜態的數據變爲動態，快速地實現頁面交互；
目前使用較廣的模板引擎有如下幾種：Jade / Pug、EJS、Handlebars。css
jade模板引擎
jade模板引擎相較於原來的html會顯得更加簡潔，它將標籤本來的"<>"符號去掉，用括號代替，層級使用tab縮進來分，而且也支持js語法；html
2、jade的基本使用
安裝jade：前端
cnpm install jade --save
在程序中引入jade：java
app.set('views',"public"); //設置視圖的對應目錄
app.set("view engine","jade"); //設置默認的模板引擎
app.engine('jade', require('jade').__express); //定義模板引擎
特定路由渲染：node
app.use("/",function(req,res){
res.render("index.jade");
});
完整實例：express
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文件夾下：npm
在執行res.render時，會自動渲染public中的index.jade文件，以後轉換爲HTML5進行dom渲染顯示。app
3、jade基礎語法
一、jade對不少html操做進行了簡化，以下：
html head style body div(class="content") h1 正文
瞭解過html語句的，從結構上必定會發現，它將本來的雙標籤省略了，尖括號也不見了，而層級的劃分則由縮進實現，默認的，jade會把幾乎全部縮進後的字母變爲標籤(行內元素)。如下代碼會變爲：dom
<html>
<head>
<style></style>
</head>
<body>
<div class="content">
<h1>正文</h1>
</div>
</body>
</html>
<div class="content"></div>也將用div(class="content")表明，簡化了代碼的書寫；
二、「|」符號的做用
有時咱們想讓咱們的標籤成爲文字，那麼「|」成爲了絕好的工具：
div(class="content",id="content") | center
咱們能夠看到，他將center做爲文字原封不動的寫入了html中，而不是做爲一個標籤渲染。
固然咱們用它來轉換js語句：
script
| var cli = document.getElementById("content");
| cli.onclick=function(){
| alert("aaa");
| }
他將會變爲：
<script>
var cli = document.getElementById("content");
cli.onclick=function(){
alert("aaa");
}
</script>
三、識別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. 更加方便快捷。
四、引入其餘js文件：
想在jade的js標籤中引入其餘js文件？沒錯，它也支持。前提請確保他們在同一文件夾下：
script include click.js
獲得：
<script>var cli = document.getElementById("content");
cli.onclick=function(){
alert("aaa");
}
</script>
五、表達式
「-」容許咱們直接寫js語法，在變量調用時，經過 #{a+b} 或 div=a+b 進行：
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>
六、for循環：
"-"也能夠用於循環語句的使用
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>
七、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，只執行when中與case對應的代碼塊，在匹配後面用 : 來做爲要執行的代碼，後面跟上標籤和對應語句
八、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'}) 偶數
-else
div(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>
九、style的寫法：
在對style樣式進行修改時，與script相同，也可以使用 . 對其進行編輯，以後對不一樣的標籤在其後面加{}，大括號裏寫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>
十、Mixin
Mixin的做用是對模塊的複用，當重複代碼有不一樣內容時，起做用就來了：
- 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做爲開發，那麼這些是很是基礎的，也但願你們有所體會
相關文章
- 1. Express全系列教程之(十)：jade模板引擎
- 2. Express全系列教程之(十)：渲染jade模板引擎
- 3. Express全系列教程之(十一)：渲染ejs模板引擎
- 4. Express---jade模板引擎(一)
- 5. Express---jade模板引擎(二)
- 6. JADE模板引擎教程
- 7. Jade模板引擎教程
- 8. express 應用模板引擎jade,ejs
- 9. 模板引擎之-jade
- 10. Jade模板引擎入門教程
- 更多相關文章...
- • Maven 項目模板 - Maven教程
- • Eclipse 代碼模板 - Eclipse 教程
- • Java 8 Stream 教程
- • YAML 入門教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
