[js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义

一、转义与非转义

jade模板文件代码：

 1 doctype html
 2 html
 3     head
 4         meta(charset='utf-8')
 5         title jade学习-by ghostwu
 6     body
 7         h3  转义与非转义
 8         - var userName = 'ghostwu'
 9         - var str = '<script>alert("ghostwu");</script>'
10         div #{userName}
11         div #{str}
12         div !{str}
13         div= userName
14         div= str
15         div!= str
16         div \#{userName}
17         div \!{str}
18         div(data-innerHTML=age)
19         div(data-innerHTML='#{age}')
20         div(data-innerHTML='#{userName}')

编译之后的效果：

[js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义

解释：

#{} : 带有转义效果的输出

!{}: 不转义输出

= : 与#{}效果相同

!= : 与!{}效果相同

\#{}：原样输出#{}

属性后面跟#{age}，会把变量解释出来，如果这个变量没有定义，就会输出undefined。在实际情况中，如果没有定义的变量就不要输出，我们可以直接这样做属性=变量名，他会自动判断该变量是否设置，决定是否输出变量的值或者不要输出属性，如 div(data-innerHTML=userName) userName我们设置了，所以会编译输出<div data-innerHTML="ghostwu"></div>

二、流程控制（循环）

jade文件代码：

 1 doctype html
 2 html
 3     head
 4         meta(charset='utf-8')
 5         title jade学习-by ghostwu
 6     body
 7         h3 流程控制(for...in)
 8         - var userInfo = { userName : 'ghostwu', age : 22 };
 9         ul 用户信息
10             - for ( var key in userInfo )
11                 li= userInfo[key]
12         h3 流程控制(for...each语法糖)
13         ul 用户信息
14             - each val, key in userInfo
15                 li #{key}->#{val}
16         h3 for..each遍历数组
17         - var skills = ['php','linux','javascript','node.js'];
18         ul 技能
19             - each item in skills
20                 li #{item}
21         h3 嵌套for...each循环
22         -
23             var userList = [
24                 {
25                     user : 'ghostwu',
26                     skill : ['javascript','node.js','linux']
27                 },
28                 {
29                     user : '八戒',
30                     skill : ['吹牛b', '泡妞']
31                 }
32             ];
33         ul 用户信息
34             - each val, key in userList
35                 li #{userList[key]['user']}
36                     ul 该用户技能
37                         - each v, k in userList[key]['skill']
38                             li #{v}

View Code