NodeJs——（9）jade的基础和进阶

灰太狼 2022-09-22 04:56 156阅读 0赞

**（28）jade的简单说明**

正好我也是刚学，我会尽量结合实例和效果进行说明，如果有多种方式的话，我会尽量都写到。（另外，或许因为版本问题，有些结果和之前是有一定差异的，我写的都是经过我测试，目前最新版本Express所使用的jade）。

注：jade的文件创建，同

①对照的两端代码：

HTML版：

<!DOCTYPE html>
    <html>
    <head><title>Express</title>
        <link rel="stylesheet" href="/stylesheets/style.css">
    </head>
    <body></body>
    </html>

jade版：

doctype html
    html
      head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')
      body

②说明：

【1】第一行不解释，直接这么写就行了，知道两行等价就行（等后面就明白意思了）；

【2】<html></html>变为了html；

<head></head>变成了head

head相对于html有缩进，head是html的下级标签；

**最简单直接的说明是：**html是树形结构，写在jade里，下级标签比上级标签多缩进一格；

**如果不懂的继续看下面：**

我们知道，html是树形结构的，树的根是html，

然后是head和body两个一级子；

而像title之类，又依赖于head或者body这两个一级子，成为二级子；

然后还有三级子，四级子等，无论如何，下级子肯定会有一个上级的父。

在写HTML的时候，我们为了方便识别，必然是下级子相对于上一级父要多缩进一格。而在jade里，我们也是这么写的；

根节点html不缩进，一级子head和body相对于html缩进一格（2个或者4个空格），二级的title和link标签，是head的子，因此相对于head再缩进一格；

然后依次类推，比如某个div是五级子，因此他缩进5格，而input是这个div的子，因此他缩进6格；

这样就解释了如何缩进的问题了。

【3】我们的标签往往会有属性，比如class，或者id，或者name，或者link那样的rel、href等属性。

在写成jade格式时，这些属性需要紧跟标签，比如link或者是div等；

例如：

写成jade格式就是：

link(rel='stylesheet', href='/stylesheets/style.css')

用括号将属性包含起来，用逗号分隔不同的属性。

假如我们要写class、id、name属性，那么就这么写：

div(class="aaa",name="bb",id="cc") ppp

其表示：

<divname="bb" id="cc" class="aaa">ppp</div>

当然，我们也可以这么写：

div#cc.aaa(name="bb") ppp

和上面是等价的

于是，我们就会简单的jade模板写法了。

③其他说明：

**以下两个和标签写在一起（中间无空格）**

\#            表示id

.             表示class，

**写在括号里的：**

class=变量名             可以是一个数组（数组成员需要是字符串）

**注释：**

//           必须写在单独一行，不能写在块内，输出在html时会以注释形式输出

如：

h1!= title
    //aaa
    div First line.

正常输出，但由于是注释，因此浏览器不会显示

h1!= title
    
    div First line.

条件注释，如代码

按照说明，条件注释只有在IE10，和以下版本的浏览器才会支持。

比如if IE 8就是指IE8。具体等实际使用的时候再行查看。

**输出非转义字符**

假如我们需要输出<script><script>这样的字符，方法有

【1】注意，不能省略引号，不然会出错，等号后可以空格也可以不空格；

div= "<script></script>"

【2】同样，空格可有可无（如果是!=的话，<script>将被解释为一个标签，即不显示）

- var html = "<script></script>"
    div= html

【3】但不能用<script></script>来替代html

- var html = "<script></script>"
    div This is #{html}

【4】使用管道“|”符号

-var m ="<script></script>"
    p.
    |   #{m}

应该除此之外还有其他的，不过我还没搞懂\#\{\}，!\{\}，=，!=之间的区别

注：= 、!=之间的区别见进阶版最后

**（32）jade进阶**

①较长的jade文本：

假如有一段文本，有两行（或者实际换行了），那么在jade里我们显然是不能写在一行的；

但是又不能简单的另起一行缩进写，因为这样的话，第一个单词会被认为是标签名。如：

div
         Welcome to #{title},
         this is another row in div

显示结果为：

<div>

<welcome>toExpress,</welcome>

<this>is another row indiv</this>

</div>

显然不是我们想要的。因此这么做：

【方法一】

div Welcome to #{title},
        | this is another row in div

**每个新起的一行，都以“|”开头，缩进。**

显示结果：

<div>Welcometo Express,

this is anotherrow in div</div>

正是我们想要的。

【方法二】

div.
        Welcome to #{title},
        this is another row in div

注意，标签名后以英文句号为结尾，但是后面不跟任何单词（因此不是类名）；

内容另起一行（不然同行的无法显示）。

②jade的变量调用

【方法一】\#\{表达式\}     ——如\#\{title\}

【方法二】=表达式          ——返回表达式的值

【方法三】!=表达式        ——这个的具体效果，参照最后

③if else判断语句

【1】首先，标签的父子兄弟关系，根据if和else的缩进情况决定；

【2】if else的内部语句，是不能由“\{\}”包住的。

【3】标签相对于if和else要缩进一格；

【4】if和else，可以以“-”开头，外加一个额外的空格（或者直接以if、else为开头）

【5】if和else的缩进程度要相同（同样的空格数量）

【6】unless关键字表示if的判断语句结果取反。假设原判断语句是unless(a==1)，那么相当于if(a!=1)

如代码：（title为“Express”，不包含引号）

【1】例如：

extends layout
    
    block content
        h1!= title
        div First line.
        if ( title == "express" )
            div.
                Welcome to #{title},
                this is another row in div
        else
            div another line.
        div Last line

输出

# Express #

First line.

another line.

Last line

【2】例如：

extends layout
    
    block content
        h1!= title
        div First line.
        - if ( title == "express" )
            div.
                Welcome to #{title},
                this is another row in div
        - else
            div another line.
        div Last line

输出同上。

例如：

extends layout
    
    block content
        h1!= title
        div First line.
        unless ( title == "express" )
            div.
                Welcome to #{title},
                this is another row in div
        else
            div another line.
        div Last line

输出：

# Express #

First line.

Welcome to Express, this is another row in div

Last line

需要注意，unless前面不能有“-”，这点和if else不同。

**④循环语句**

**【1】for in语句      ：**

在JavaScript中，for in语句是遍历对象的key，然后根据key值来取得value。

**在jade不同！**他在for后，有两个参数，第一个参数是遍历获取对象的value，第二个参数才是key。简单来说，如代码：

- var obj = {a:"111",b:"222",c:"333",d:"444"};
    for value, key in obj
        div The key is #{key}, the value is #{value}

这段代码如果在js中，输出的是a、b、c、d这样。但是在jade里，输出的是：

The key is a, the value is 111

The key is b, the value is 222

The key is c, the value is 333

The key is d, the value is 444

说明这里的i是value，而非key。

另外，标签的兄弟关系，根据for的缩进情况而定

**【2】for循环**

需要在for之前加“-”；

for循环内部的需要缩进，其兄弟关系根据for而定；

可以改变外部变量的值；

如代码：

- var num = 0;
    - for(; num < 5; num++)
        div num = #{num}
    div At last , the num = #{num}

输出内容为：

num = 0

num = 1

num = 2

num = 3

num = 4

At last , the num = 5

**【3】each in**

each in和for in几乎是相同的，（事实上我没发现有什么不同）

所以略过

**【4】case ，when**

类似switch case，但具体还是有所不同。如代码：

- var str = "test"
    div The word is #{str},now is case begin.
    case str
        when "a": div first when is a
        when "test": div second row is test
        when "b"
            div third when is b
        default: The words is #{str}
    div It's end.

结果为：

The word is test,now is case begin.

second row is test

It's end.

特点：

《1》只执行符合条件的一行（c++的switch中，是从匹配那行开始执行到结尾）

《2》两种写法，标签写在when后面的，用冒号加空格分隔；或者另起一行然后缩进写。

《3》匹配失败的情况下，执行default那行的代码

**⑤过滤器  
没看懂，待补充**

**⑥Mixin：**

简单来说，就是jade里，某一个模块可以复用。比如有一行<div>A line</div>，

如果我想让他连续出现100次，我可以直接使用for循环；

但假如我需要出现30次，然后插入一行代码，再出现10次，再插入一行代码，最后出现60次呢？当然，你可以说可以写3个for循环。

那么假如这块div有100行长呢？复制这100行代码去三个地方么？虽然也可以，但显然不美观。

因此解决办法是，使用mixin，具体看代码：

- var num = 0;
    mixin node
        div The number in mixin node is #{num++}
    +node()
    +node()
    +node()
    div At last, the number in mixin node is #{num++}

解释：

《1》node是一个html块，可以理解为声明一个html块，在声明时是不会被展现在页面上的。

《2》+node() 是调用这个html块，可以理解为将这个html块插入到某一个位置。他会实质的对变量、页面产生影响。

《3》记得缩进！

《4》显然是可以用for循环的，比如这样

-for (var i = 0 ; i < 10;i++)
      +node()

**⑦模板继承和包含**

假如，我们有A模板，然后B、C模板都要复用A模板，我们有两种做法：

【1】在A模板里进行判断，然后决定调用B模板还是C模板；

【2】在B模板和C模板里调用A模板。

前者的缺陷在于，假如有不定数个模板要调用A模板，那么A模板会很复杂，所以弃用。

因此，我们通常采用方法【2】。