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

一、转义与非转义

jade模板文件代码：

 doctype html

 html

     head

         meta(charset='utf-8')

         title jade学习-by ghostwu

     body

         h3  转义与非转义

         - var userName = 'ghostwu'

         - var str = '<script>alert("ghostwu");</script>'

         div #{userName}

         div #{str}

         div !{str}

         div= userName

         div= str

         div!= str

         div \#{userName}

         div \!{str}

         div(data-innerHTML=age)

         div(data-innerHTML='#{age}')

         div(data-innerHTML='#{userName}')

编译之后的效果：

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

解释：

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

!{}: 不转义输出

= : 与#{}效果相同

!= : 与!{}效果相同

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

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

二、流程控制（循环）

jade文件代码：

 doctype html

 html

     head

         meta(charset='utf-8')

         title jade学习-by ghostwu

     body

         h3 流程控制(for...in)

         - var userInfo = { userName : 'ghostwu', age : 22 };

         ul 用户信息

             - for ( var key in userInfo )

                 li= userInfo[key]

         h3 流程控制(for...each语法糖)

         ul 用户信息

             - each val, key in userInfo

                 li #{key}->#{val}

         h3 for..each遍历数组

         - var skills = ['php','linux','javascript','node.js'];

         ul 技能

             - each item in skills

                 li #{item}

         h3 嵌套for...each循环

         -

             var userList = [

                 {

                     user : 'ghostwu',

                     skill : ['javascript','node.js','linux']

                 },

                 {

                     user : '八戒',

                     skill : ['吹牛b', '泡妞']

                 }

             ];

         ul 用户信息

             - each val, key in userList

                 li #{userList[key]['user']}

                     ul 该用户技能

                         - each v, k in userList[key]['skill']

                             li #{v}

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

编译之后的结果：

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <title>jade学习-by ghostwu</title>

   </head>

   <body>

     <h3>流程控制(for...in)</h3>

     <ul>用户信息

       <li>ghostwu</li>

       <li>22</li>

     </ul>

     <h3>流程控制(for...each语法糖)</h3>

     <ul>用户信息

       <li>userName->ghostwu</li>

       <li>age->22</li>

     </ul>

     <h3>for..each遍历数组</h3>

     <ul>技能

       <li>php</li>

       <li>linux</li>

       <li>javascript</li>

       <li>node.js</li>

     </ul>

     <h3>嵌套for...each循环</h3>

     <ul>用户信息

       <li>ghostwu

         <ul>该用户技能

           <li>javascript</li>

           <li>node.js</li>

           <li>linux</li>

         </ul>

       </li>

       <li>八戒

         <ul>该用户技能

           <li>吹牛b</li>

           <li>泡妞</li>

         </ul>

       </li>

     </ul>

   </body>

 </html>

循环的语法跟原生js差不多，each这里的val, key是当前数组的值和键.

三、条件判断语句

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

编译之后的结果:

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

if.else很好理解，跟原生js一样

unless: 给定条件是否不符合要求，如果不符合，就执行下一步.

switch...case语句在jade中的写法

 doctype html

 html

     head

         meta(charset='utf-8')

         title jade学习-by ghostwu

     body

         h3 条件语句

         - var skill = 'linux';

         case skill

             when php

                 p 你会php

             when java

                 p 你会java

             when linux

                 p 你会linux

             default

                 p #{skill}

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

编译之后：

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

秒客网

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

相关文章