Jade学习（三）之语法规则下

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();

            |   }

            |}

    body

        |aaa

        |bbb

        |ccc

// 此时输出：

<html>

  <head>

    <script>

      window.onload = function(){

        var oBtn = document.getElementById("btn1");

        oBtn.onClick = function(){

            alert();

        }

      }

    </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();

               }

            }

    body.

        aaa

        bbb

        ccc

// 此时输出：

<html>

  <head>

    <script>

      window.onload = function(){

         var oBtn = document.getElementById("btn1");

         oBtn.onClick = function(){

             alert();

         }

      }

    </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();

    }

 }

// a.txt内容：

aaa

bbb

ccc

// 此时输出：

<html>

  <head>

    <script>window.onload = function(){

    var oBtn = document.getElementById("btn1");

    oBtn.onClick = function(){

        alert();

    }

 }

    </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:,

    b:

});

console.log(str);

// 此时输出：

<html>

  <head>

    <script></script>

  </head>

  <body><span></span><span></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:,b:});

console.log(str);

// 此时输出：

<html>

  <head>

    <script></script>

  </head>

  <body>

    <div>计算结果为：</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=;

        -var b=;

        div 计算结果为：#{a + b}

// 此时输出：

<html>

  <head>

    <script></script>

  </head>

  <body>

    <div>计算结果为：</div>

  </body>

</html>

jade中的循环

// 12.jade内容：

html

    head

        script

    body

        -for(var i=; 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实体，防止注入式攻击

❗️注入式攻击：比如留言的时候写了一些标签，做了一些破坏性的操作，如果直接就显示标签会可能带来很大的危害

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=;

        -if(a%==)

            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>

        p more than : #{lessons.join(',')}

    else if lessons.length>

        p more than : #{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=; ⚠️因为此处加了“-”所以下面不需要再加了，jade会自动识别代码，如果前面是代码后面也一直是代码就不需要加，目前只在此处做了实验，但10.jade不可以

        case a

            when

                div aaa ⚠️这些都没加“-”，原因见上面

            when

                div bbb

            when

                div ccc

            default

                |不靠谱

// 此时输出：

<html>

  <head>

    <script></script>

  </head>

  <body>

    <div>ccc</div>

  </body>

</html>

⚠️jade都支持js中的语法

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

// 遍历对象

-var json={

    a:,

    b:

}  

each value,key in json

     p #{key}:#{value}

// 遍历数组

-var arr = ["aaa","bbb"]

each value in arr

    p= value ⚠️也可以写成p #{value}

// 嵌套循环

- var sections = [{id:,items:['a','b']},{id:,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=;

            while a <

                if(a%== && a!=)

                    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"></div>

    <div></div>

    <div></div>

    <div></div>

    <div class="last"></div>

    <div></div>

    <div></div>

    <div></div>

    <div class="last"></div>

    <div></div>

    <div></div>

    <div></div>

    <div class="last"></div>

    <div></div>

    <div></div>

    <div></div>

    <div class="last"></div>

    <div></div>

  </body>

</html>

jade中使用mixin来写代码块(有点像js函数)

案例一：基础

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>

案例二：传参

html

    head

        script

    body

        mixin lesson2(name,arr)

            p #{name}

            ul

                each value in arr

                    li #{value}

        +lesson2("wang",["",""])

// 输出

<html>

  <head>

    <script></script>

  </head>

  <body>

        <p>wang</p>

        <ul>

          <li></li>

          <li></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:["",""]})

// 输出

<html>

  <head>

    <script></script>

  </head>

  <body>

        <p>wang</p>

            <p>wang</p>

            <ul>

              <li></li>

              <li></li>

            </ul>

  </body>

</html>

案例四：传递代码块使用block

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对象中

方法一：

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等

额外内容

1、变量还是赋值

foo = "hello"

tmp = "world" + "!"

h1= foo

span= tmp

对于上面的代码，可能很多人第一眼看到都会有一个疑问，Jade怎么知道等号左边是变量名还是标签呢？
再仔细看看，很快就会发现，又是传说中的空格在作祟，变量后面等号前必须加空格，而标签直接接等号，不能加空格！

2、有三种方法可以原样输出文本，其中“|”和“.”有什么区分？
对于多行文本，如果同时具有子元素的话，使用.会导致无法识别子元素，故需要使用另一种标识符|，但在使用“.”时如果直接是以尖括号开头还是可以识别的

3、如果只有一个子元素，可以使用“:”来嵌套

ul#books

li: a(href="#book-a") Book A

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

⚠️冒号后面一定要有空格

4、jade中可以对变量进行一些js操作

- var b = "hello"

p #{b.toUpperCase()} world

//编译的结果

<p>HELLO world</p>

5、jade中有四种赋值语句

=
#{}
!= (!=不是条件语句中的不等于逻辑运算符，而是非转义html)
!{} (非转义输出html)

6、想要输出"#"、"!"、"{}"，使用反斜线“\”

div \!{content}

div \#{content}

// 输出

<div>\!{content}{/div}

<div>\#{content}{/div}

7、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]

总结：

1、单行注释和多行注释都使用“//”，至于是单行还是多行取决于“//”所在的位置，在有子元素的标签前或嵌套该标签，那么就是块注释也就是多行注释，如果在子元素的前面或嵌套该子元素，并且该子元素没有子元素，那么就是单行注释

2、对于三种注释来说，如果和标签同级，那么不会注释掉任何标签，可以在里面写我们平时写的一些注释

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