Jade學習（三）之語法規則下

時間  2019-11-18
標籤 jade 學習 語法 規則 欄目 Node.js 简体版
原文   原文鏈接

jade能夠自動識別單雙標籤

// 1.jade內容：
input(type="button", value="點擊") div // 此時輸出❌error:input is self closing and should not have content，input爲單標籤不能有內容

 

Jade中全部自定義標籤都認爲是雙標籤

// 2.jade內容：
html head body div aaa // 此時輸出：
<html>
  <head></head>
  <body>
    <div>
      <aaa></aaa>
    </div>
  </body>
</html>

 

Jade中原樣輸出方法一使用「|」

// 3.jade內容：
html head script |window.onload = function(){   // ⚠️必定要相對script縮進，才能出如今script裏面
            |   var oBtn = document.getElementById("btn1"); |   oBtn.onClick = function(){ |       alert(1); | } |} body |aaa |bbb |ccc // 此時輸出：
<html>
  <head>
    <script> window.onload = function(){ var oBtn = document.getElementById("btn1"); oBtn.onClick = function(){ alert(1); } } </script>
  </head>
  <body> aaa bbb ccc </body>
</html>

 

Jade中原樣輸出方法二使用「.」

// 4.jade內容：
html head script. window.onload = function(){ var oBtn = document.getElementById("btn1"); oBtn.onClick = function(){ alert(1); } } body. aaa bbb ccc // 此時輸出：
<html>
  <head>
    <script> window.onload = function(){ var oBtn = document.getElementById("btn1"); oBtn.onClick = function(){ alert(1); } } </script>
  </head>
  <body> aaa bbb ccc </body>
</html>

 

Jade中原樣輸出方法三使用include：能夠將html、style、head部分、script等等當成一個整個文件引入到頁面中

// 5.jade內容：
html head script include ../a.js body include ../a.txt // a.js內容：
window.onload = function(){ var oBtn = document.getElementById("btn1"); oBtn.onClick = function(){ alert(1); } } // a.txt內容：
aaa bbb ccc // 此時輸出：
<html>
  <head>
    <script>window.onload = function(){ var oBtn = document.getElementById("btn1"); oBtn.onClick = function(){ alert(1); } } </script>
  </head>
  <body>aaa bbb ccc </body>
</html>

 

jade中賦值使用「#{}」

// 6.jade內容：
html head script body div 個人名字：#{name} // jade2.js內容：
const jade = require('jade'); var str = jade.renderFile('./work/lesson13/view/6.jade',{pretty:true,name:'blue'}); console.log(str); // 此時輸出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div>個人名字：blue</div>
  </body>
</html>

 

jade中簡寫使用「=」賦值

// 簡寫： // 11.jade內容：
html head script body span=a span=b // Jade7.js內容：
const jade = require('jade'); var str = jade.renderFile('./work/lesson13/view/11.jade',{ pretty:true, a:12, b:56 }); console.log(str); // 此時輸出：
<html>
  <head>
    <script></script>
  </head>
  <body><span>12</span><span>56</span></body>
</html>

 

jade中的數據傳遞（能夠作一些運算）

// 7.jade內容：
html head script body div 計算結果爲：#{a + b} // jade3.js內容：
const jade = require('jade'); var str = jade.renderFile('./work/lesson13/view/7.jade',{pretty:true,a:12,b:13}); console.log(str); // 此時輸出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div>計算結果爲：25</div>
  </body>
</html>

 

jade中的數據傳遞（作更多的事情）

// 8.jade內容：
html head script body div(style=json) div(class=arr) // jade4.js內容：
const jade = require('jade'); var str = jade.renderFile('./work/lesson13/view/8.jade',{ pretty:true, json:{ width:'200px', height:'200px', background:'red' }, arr:["aaa","bbb","ccc"] }); console.log(str); // 此時輸出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div style="width:200px;height:200px;background:red"></div>
    <div class="aaa bbb ccc"></div>
  </body>
</html>

 

jade能夠加多個class

// 9.jade內容：
html head script body div(style=json) div(class=arr) div(class=arr class="active") // 這個active將融入進去
        div(class=arr) div(class=arr) // 此時輸出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div style="width:200px;height:200px;background:red"></div>
    <div class="aaa bbb ccc"></div>
    <div class="aaa bbb ccc active"></div>
    <div class="aaa bbb ccc"></div>
    <div class="aaa bbb ccc"></div>
  </body>
</html>

 

jade中識別代碼使用「-」（直接定義變量，直接寫js）

// 10.jade內容：
html head script body -var a=12; -var b=13; div 計算結果爲：#{a + b} // 此時輸出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div>計算結果爲：25</div>
  </body>
</html>

 

jade中的循環

// 12.jade內容：
html head script body -for(var i=0; i<arr.length; i++) div=arr[i] // ⚠️必定要相對for縮進 // Jade8.js內容：
const jade = require('jade'); var str = jade.renderFile('./work/lesson13/view/12.jade',{ pretty:true, arr:["jhkh","bhiysia","hihn"] }); console.log(str); // 此時輸出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div>jhkh</div>
    <div>bhiysia</div>
    <div>hihn</div>
  </body>
</html>

 

jade中如何輸出html標籤？

// 13.jade內容：
html head script body div #{content} // jade9.js內容：
const jade = require('jade'); var str = jade.renderFile('./work/lesson13/view/13.jade',{ pretty:true, content:"<div>留言</div><p>口紅口紅打底好看的話</p>" }); console.log(str); //此時輸出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div>&lt;div&gt;留言&lt;/div&gt;&lt;p&gt;口紅口紅打底好看的話&lt;/p&gt;</div>
  </body>
</html>

⚠️此時咱們發現jade自動幫咱們將html標籤轉換成了html實體，防止注入式攻擊 html

❗️注入式攻擊：好比留言的時候寫了一些標籤，作了一些破壞性的操做，若是直接就顯示標籤會可能帶來很大的危害node

 

jade中非轉義輸出html標籤使用「!=」或「!{}」

// 14.jade內容：
html head script body div!=content ⚠️也能夠寫成div !{content}// 此時輸出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div><div>留言</div><p>口紅口紅打底好看的話</p></div>
  </body>
</html>

 

jade中使用if-else if-else

// 15.jade內容：
html head script body -var a=13; -if(a%2==0) div(style={width:'200px',height:'200px'}) -else div(style="width:300px;height:300px") // 此時輸出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div style="width:300px;height:300px"></div>
  </body>
</html>


// other
- var isTrue = true
- var lessons = ['jade','js'] if lessons if lessons.length>2 p more than 2: #{lessons.join(',')} else if lessons.length>1 p more than 1: #{lessons.join(',')} else p no1 lessons else p no2 lessons

 

jade中使用unless（爲false就繼續執行）

- var isTrue = true unless !isTrue ⚠️此時判讀爲false因此繼續往下執行 p #{lessons.length}

 

jade中使用case-when（js的swith）

// 16.jade內容：
html head script body -var a=3; ⚠️由於此處加了「-」因此下面不須要再加了，jade會自動識別代碼，若是前面是代碼後面也一直是代碼就不須要加，目前只在此處作了實驗，但10.jade不能夠 case a when 1 div aaa ⚠️這些都沒加「-」，緣由見上面 when 2 div bbb when 3 div ccc default
                |不靠譜 // 此時輸出：
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div>ccc</div>
  </body>
</html>

⚠️jade都支持js中的語法
npm

 

jade中使用each-in(js的for-in)

// 遍歷對象
-var json={ a:1, b:2 } each value,key in json p #{key}:#{value} // 遍歷數組
-var arr = ["aaa","bbb"] each value in arr p= value ⚠️也能夠寫成p #{value} // 嵌套循環
- var sections = [{id:0,items:['a','b']},{id:1,items:['c','d']}] dl each section in sections dt= section.id each items in section.items dd= items

 

jade完整實例

// index.jade內容：
doctype html meta(charset="utf-8") title jade測試 head style. div{ width:100px; height:100px; line-height:100px; background:"#ccc"; text-align:center; float:left; } div.last{ background:red; } script body -var a=12; while a < 30
                if(a%4==0 && a!=0) div.last=a++   / div.last #{a++} else div=a++ / div #{a++} // main.js內容：
const jade = require('jade'); const fs = require('fs'); var str = jade.renderFile('./work/lesson13/view/index.jade',{ pretty:true }); fs.writeFile("./work/lesson13/build/index.html",str,function(err){ if(err){ console.log("編譯失敗"); }else{ console.log("成功"); } }) // build內容：
<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <title>jade測試</title>
  <head>
    <style> div{ width:100px; height:100px; line-height:100px; background:"#ccc"; text-align:center; float:left; } div.last{ background:red; } </style>
    <script></script>
  </head>
  <body>
    <div class="last">12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div class="last">16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div class="last">20</div>
    <div>21</div>
    <div>22</div>
    <div>23</div>
    <div class="last">24</div>
    <div>25</div>
    <div>26</div>
    <div>27</div>
    <div class="last">28</div>
    <div>29</div>
  </body>
</html>

 

jade中使用mixin來寫代碼塊(有點像js函數)

案例一：基礎json

doctype html html head title hello jade body mixin lesson // 聲明一個mixins
 p hello world +lesson // 使用+加上mixins的名字來調用 // 輸出
<!DOCTYPE html>
<html>
 <head> 
   <title>hello jade</title>
 </head>
 <body>
   <p>hello mixin</p>
 </body>
</html>

案例二：傳參api

html head script body mixin lesson2(name,arr) p #{name} ul each value in arr li #{value} +lesson2("wang",["111","222"]) // 輸出
<html>
  <head>
    <script></script>
  </head>
  <body>
        <p>wang</p>
        <ul>
          <li>111</li>
          <li>222</li>
        </ul>
  </body>
</html>

案例三：嵌套數組

html head script body mixin lesson2(name,arr) p #{name} ul each value in arr li #{value} mixin lesson3(json) p #{json.name} +lesson2(json.name,json.arr) +lesson3({name:"wang",arr:["111","222"]}) // 輸出
<html>
  <head>
    <script></script>
  </head>
  <body>
        <p>wang</p>
            <p>wang</p>
            <ul>
              <li>111</li>
              <li>222</li>
            </ul>
  </body>
</html>

案例四：傳遞代碼塊使用blocksass

html head script body mixin lesson4(text) h4 #{text} if block block else p no text +lesson4('testing') p hello world // 輸出
<html>
  <head>
    <script></script>
  </head>
  <body>
        <h4> testing </h4>
        <p>block</p>
  </body>
</html>

案例五：傳屬性，實際上傳過來的屬性參數被存在一個attributes對象中markdown

方法一：less

html head script body mixin lesson5(text) p #{text} h4(class=attributes.class,id=attributes.id) +lesson5('testing')(class="attr",id="id") // 輸出
<html>
  <head>
    <script></script>
  </head>
  <body>
        <p>testing</p>
        <h4 id="id" class="attr"></h4>
  </body>
</html>

方法二：使用&attributes函數

html head script body mixin lesson5(text) p #{text} h4&attributes(attributes) +lesson5('testing')(class="attr",id="id") // 輸出
<html>
  <head>
    <script></script>
  </head>
  <body>
        <p>testing</p>
        <h4 id="id" class="attr"></h4>
  </body>
</html>

案例六：不肯定傳參使用"..."

html head script body mixin lesson5(text,...items) ul(class="#{text}") each value in items li= value +lesson5('testing','aa','bb','cc') // 輸出
<html>
  <head>
    <script></script>
  </head>
  <body>
        <ul class="testing">
          <li>aa</li>
          <li>bb</li>
          <li>cc</li>
        </ul>
  </body>
</html>

 

jade中block的使用

block的默認輸出

html head script body block test p 哈哈哈 // 輸出
<html>
  <head>
    <script></script>
  </head>
  <body>
    <p>哈哈哈</p>
  </body>
</html>

block的調用

html head script body block test p 哈哈哈 block test block test block test // 輸出
<html>
  <head>
    <script></script>
  </head>
  <body>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
  </body>
</html>

⚠️block能夠嵌套

 

jade使用extends和block實現繼承

實例一：基礎

// 新建一個文件extend.jade（被繼承文件）
html head script body block desc // 定義block h4 繼承 block test // 調用blcok(test) // jade文件內容（繼承文件）
extends extend.jade block test // 定義block(test) p 哈哈哈 // 輸出
<html>
  <head>
    <script></script>
  </head>
  <body>
    <h4>繼承</h4>
    <p>哈哈哈</p>
  </body>
</html>

實例二：繼承文件裏的block會覆蓋被繼承文件裏的block

// 繼承文件
extends extend.jade block test p 哈哈哈 block desc h4 覆蓋 // 被繼承文件
html head script body block desc h4 繼承 block test // 輸出

<html>
  <head>
    <script></script>
  </head>
  <body>
    <h4>覆蓋</h4>
    <p>哈哈哈</p>
    <h4>覆蓋</h4>
  </body>
</html>

⚠️繼承文件裏的block必須在被繼承文件裏調用，不然不會輸出，而且在繼承文件中entends要和block同級

 

jade中的過濾（即便用插件語言less或sass或markdown等）

首先安裝相應的插件語言

npm install less sass markdown

以後就能夠在jade中使用less了，但不能在其中使用動態數據

style
    :less
        body{
            p{
               color:#ccc 
        }
    }

 ⚠️使用:less、:sass、:markdown等

 

額外內容

一、變量仍是賦值

foo = "hello" tmp = "world" + "!" h1= foo span= tmp

對於上面的代碼，可能不少人第一眼看到都會有一個疑問，Jade怎麼知道等號左邊是變量名仍是標籤呢？
再仔細看看，很快就會發現，又是傳說中的空格在做祟，變量後面等號前必須加空格，而標籤直接接等號，不能加空格！

二、有三種方法能夠原樣輸出文本，其中「|」和「.」有什麼區分？
對於多行文本，若是同時具備子元素的話，使用.會致使沒法識別子元素，故須要使用另外一種標識符|，但在使用「.」時若是直接是以尖括號開頭仍是能夠識別的


三、若是隻有一個子元素，可使用「:」來嵌套

ul#books li: a(href="#book-a") Book A li: a(href="#book-b") Book B

⚠️冒號後面必定要有空格

 

四、jade中能夠對變量進行一些js操做

- var b = "hello" p #{b.toUpperCase()} world //編譯的結果
<p>HELLO world</p>

 

五、jade中有四種賦值語句

  • =

  • #{}

  • != (!=不是條件語句中的不等於邏輯運算符，而是非轉義html) 

  • !{} (非轉義輸出html)

 

六、想要輸出"#"、"!"、"{}"，使用反斜線「\」

div \!{content} div \#{content} // 輸出
<div>\!{content}{/div} <div>\#{content}{/div}

 

七、jade中的註釋

  • 「//」單行註釋 解析後  

html head // 哈哈
 script body div(style=json) div(class=arr) div(class=arr class="active") div(class=arr) div(class=arr) // 輸出
<html>
  <head>
    <!-- 哈哈-->
    <script></script>
  </head>
  <body>
    <div style="width:200px;height:200px;background:red"></div>
    <div class="aaa bbb ccc"></div>
    <div class="aaa bbb ccc active"></div>
    <div class="aaa bbb ccc"></div>
    <div class="aaa bbb ccc"></div>
  </body>
</html>

⚠️單行註釋要和下面的標籤同級，不然下面的標籤也會被註釋

  • 「//-」緩衝註釋 解析後 不會顯示，也就是不會輸出

html head //- 
 script body div(style=json) div(class=arr) div(class=arr class="active") div(class=arr) div(class=arr) // 輸出
<html>
  <head></head>
  <body>
    <div style="width:200px;height:200px;background:red"></div>
    <div class="aaa bbb ccc"></div>
    <div class="aaa bbb ccc active"></div>
    <div class="aaa bbb ccc"></div>
    <div class="aaa bbb ccc"></div>
  </body>
</html>

　　

html head //- 哈哈
 script body div(style=json) div(class=arr) div(class=arr class="active") div(class=arr) div(class=arr) // 輸出
<html>
  <head>
    <script></script>
  </head>
  <body>
    <div style="width:200px;height:200px;background:red"></div>
    <div class="aaa bbb ccc"></div>
    <div class="aaa bbb ccc active"></div>
    <div class="aaa bbb ccc"></div>
    <div class="aaa bbb ccc"></div>
  </body>
</html>

⚠️若是咱們想要註釋掉script，那麼註釋就不能與script同級，咱們發現script和哈哈並無輸出，符合預期

  • 「//」或「/-」塊註釋 解析後 

html head script //body
        div(style=json) div(class=arr) div(class=arr class="active") div(class=arr) div(class=arr) // 輸出
<html>
  <head>
    <script></script>
  </head>
  <!--body div(style=json) div(class=arr) div(class=arr class="active") div(class=arr) div(class=arr) -->
</html>

  • 條件註釋[if IE8]......[end if]

總結：

一、單行註釋和多行註釋都使用「//」，至因而單行仍是多行取決於「//」所在的位置，在有子元素的標籤前或嵌套該標籤，那麼就是塊註釋也就是多行註釋，若是在子元素的前面或嵌套該子元素，而且該子元素沒有子元素，那麼就是單行註釋

二、對於三種註釋來講，若是和標籤同級，那麼不會註釋掉任何標籤，能夠在裏面寫咱們平時寫的一些註釋

參考：http://www.nodeclass.com/api/jade.html#includes

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程