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