Jade笔记

梦里梦外; 2022-06-04 03:51 139阅读 0赞

这只是我的Jade笔记，完整的Jade教程请参考[Jade 官方的英文文档][Jade]和[https://www.w3cplus.com/html/how-to-use-jade.html][https_www.w3cplus.com_html_how-to-use-jade.html]

## 简介 ##

Jade是编写HTML模板的简洁语言，简称`模板引擎`，其实就是 HTML 预处理语言，非常类似 Sass 之于 CSS。其特点如下：

*  生成HTML
 *  支持动态代码
 *  支持可重用性（DRY）
 *  采用对缩进敏感的语法形式，提高了可读性，省略了一些界定符号（大括号、尖括号……）

## 安装 ##

通过npm：`npm install jade -g`

查看版本：`jade -v`

## 编译 ##

通过gulp-jade编译：

## 标签 ##

标签是 HTML 的核心元素。默认情况下，文本在行的开头（或者仅在空格之后）代表一个html标记。缩进标签嵌套，创建像html结构的树。

### 一般用法 ###

在 Jade 中创建一个列表：

ul
      li Item A
      li Item B
      li Item C

生成的 HTML：

就是这么简单，再也不用顾虑标签闭合了吗、shift 键在哪啊，全程无压力高速输出！唯一需要记住的就是用统一的缩进来嵌套标签。

提示：如果环境已经正确安装，那么大多数情况下的错误都是缩进惹的祸，一定一定要保持一致的缩进格式，建议统一将 tab 键输出为空格，并采用 4 个空格作为标准缩进。

### 内联语法 ###

为了节省空间，jade提供嵌套标签的内联语法。

a: img

### 自闭合标签 ###

标签如img，meta，link等都是自动关闭（除非您使用XML文档类型）。jade能自动识别自闭合标签，input会编译成`<input/>`。您也可以通过简单地附加/字符来明确地自行关闭标签。只有在你知道你在做什么的时候才这样做。

foo/
    foo(bar='baz')/

### 标签中有大段的块内容 ###

方式一：在标签后面添加 `.`

比如一段js代码，注意是script后面有一个`.`

script.
        console.log('Welcome to join wandoujia-fe')
        console.log('We want you')

方式二：每段前面添加`|`

script
        | console.log('Welcome to join wandoujia-fe')
        | console.log('We want you')

## 注释 ##

Jade 支持两种注释：单行注释和多行注释。每种注释支持两种模式：输出到源文件和不输出到源文件。

在 Jade 中创建一个单行输出注释和单行不输出注释：

// 这个单行注释会输出到编译后的文件中
    p 单行输出注释
    //- 这个单行注释不会输出到编译后的文件中
    p 单行不输出注释

<p>单行输出注释</p>
    <p>单行不输出注释</p>

由上可见，输出和不输出的差别就在于多了一个 `-`，谨记！

相比起单行注释，多行注释的内容要在注释符号的下一行，以相同的缩进来编写。多行注释的输出和不输出模式和单行注释相同，需要使用 `-` 标记：

//
        这个多行注释会输出到编译后的文件中
        这个多行注释会输出到编译后的文件中
    p 多行输出注释
    //-
        这个多行注释不会输出到编译后的文件中
        这个多行注释不会输出到编译后的文件中
    p 多行不输出注释

<p>多行输出注释</p>
    <p>多行不输出注释</p>

Jade没有任何特别的条件注释语法。如果你的行以<开始，那么它被视为纯文本。所以只需使用普通的HTML syle条件注释：

<html lang="en">

## doctype ##

添加一个doctype只需要doctype，然后再跟一个可选的值，默认是html

doctype html

会转换为：

<!DOCTYPE html>

## 属性 ##

### 一般用法 ###

在 Jade 中填写属性，基本上和 HTML 保持了一致：

input(type='checkbox', checked)
    input(
      type='checkbox'
      name='agreement'
      checked
    )

> 注意：布尔属性没有值时默认为true。

但是，你见过可以根据条件设置属性的语法形式吗？这里就有：

- var authenticated = true
    body(class=authenticated ? 'authed' : 'anon')
    - var currentUrl = '/about'
    a(class={active: currentUrl === '/'} href='/') Home
    a(class={active: currentUrl === '/about'} href='/about') About

### 类名和ID名 ###

对于频繁使用到的类名和 ID 名，Jade 提供了两种字面量：类名字面量和 ID 字面量——非常类似 Emmet 的用法。如果不在字面量前边指定标签名，则默认使用 `div`:

.link
    a.link
    #button
    a#button

1个id和多个class，连着写即可：

a#download-btn.btn.blue-btn

也可以通过一个类名称的数组来实现：

- var classes = ['foo', 'bar', 'baz']
    a(class=classes)
    //- 也可以重复类属性来合并数组
    a.bing(class=classes class=['bing'])

### style ###

style 属性可以是一个字符串（像任何正常属性），但它也可以是一个对象。为了更方便地修改该属性，Jade 接收一个类似 JavaScript 对象类型的参数：

a(style={
       color: 'red', background: 'green'})

### &attributes ###

为了更方便地添加其他自定义属性，jade 特意增加了一个语法格式 `&attributes`：

- var attributes = {
       'data-foo': 'bar'};
    div#foo(data-bar="foo")&attributes(attributes)

> 注意：应用的属性`&attributes`不会自动转义。您必须确保对任何用户输入进行sanatize以避免 跨站点脚本。如果你的attributes是从一个mixin调用中传入的，这个就完成了。

### 非转义属性 ###

默认情况下，所有属性都被转义（用转义序列替换特殊字符）以防止诸如跨站点脚本攻击。如果你需要使用特殊字符，你可以使用!=而不是=。

div （escaped = "<code>" ）
    div （unescaped != "<code>" ）

> 注意：未转换的缓冲代码可能是危险的。您必须确保对任何用户输入进行sanatize以避免 跨站点脚本

## 文本 ##

Jade 支持三种文本输出方式：单行文本、管道文本和多行文本：

// 单行文本内容直接跟在标签名后面
    p 这里是单行文本内容
    // 管道文本使用管道符
    p
        | 这是一行管道文本，行数无限制
        | 这是一行管道文本，行数无限制
        | 这是一行管道文本，行数无限制
        | ……
    // 多行文本需要在标签名后添加点号
    p.
        这是多行文本，注意缩进
        这是多行文本，注意缩进
        这是多行文本，注意缩进

<p>这里是单行文本内容</p>
    
    <p>
      这是一行管道文本，行数无限制
      这是一行管道文本，行数无限制
      这是一行管道文本，行数无限制
      ……
    </p>
    
    <p>
      这是多行文本，注意缩进
      这是多行文本，注意缩进
      这是多行文本，注意缩进
    </p>

## 代码嵌入 ##

将 JavaScript 嵌入到 Jade 中，一共有三种方法。第一种方式是使用 `-`，代码中的特殊字符不会被转义：

- for (var x = 0; x < 3; x++)   li <a></a>

第二种方法是使用 `=`，代码中的特殊字符将会被转义：

p
      = 'This code is <escaped>!'

第三种方法是使用 `!=`，代码中的特殊字符不会被转义：

p
      != 'This code is <escaped>!'

## 插值语法 ##

使用插值语法，预先指定一个位置，方便以后插入一个新值，简称插值。

Jade 提供了字符串插值和标签插值。其中，字符串插值由于要考虑到安全性问题，所以又分成了转义和不转义两种情况：

// 转义字符串插值 `#{}`
    - var theGreat = "<span>escape!</span>";
    p This will be safe: #{theGreat}
    // 不转义字符串插值 `!{}`
    - var theGreat = "<span>escape!</span>";
    p This will be safe: !{theGreat}
    // 标签插值
    p #[a(href="jade-lang.com") Jade]

<p>This will be safe: <span>escape!</span></p>
    
    <p>This will be safe: <span>escape!</span></p>
    
    <p><a href="jade-lang.com">Jade</a></p>

如果要输出 \#\{\},那就得使用/来转义

- var name = 'yaochun' p my name is \#{
       name}

## 条件语句 ##

- var user = { description: 'foo bar baz' }
    - var authorised = false
    #user
      if user.description
        h2 Description
        p.description= user.description
      else if authorised
        h2 Description
        p.description.
          User has no description,
          why not add one...
      else
        h1 Description
        p.description User has no description

<div id="user">
      <h2>Description</h2>
      <p class="description">foo bar baz</p>
    </div>

除了`if ... else if ... else`这个经典的条件判断语句外，Jade 还提供了一个 `unless` 条件语句。如果说 `if` 可以通过判断`给定条件是否符合要求`来执行下一步，那么 `unless` 完全是相反的一件事，它会判断`给定条件是否不符合要求`，如果不符合，就执行下一步。

- var con = false unless con
      p Hello, World

<p>Hello, World</p>

## 分支语句 ##

当需要 `if` 判断的条件过多时，其他语言会提供类似 `switch` 的分支判断语句。在 Jade 中，也提供了类似的语法——`case`：

- var friends = 10
    case friends
      when 0
        p you have no friends
      when 1
        p you have a friend
      default
        p you have #{friends} friends

<p>you have 10 friends</p>

在 Jade 中并没有提供类似 `break` 的语法，对于所有的条件默认只有一种输出结果，如果没有符合条件的就输出 `defualt` 中的内容。但是，有一个特例：

- var friends = 0
    case friends
      when 0
      when 1
      default
        p you have #{friends} friends

<p>you have very 0 friends</p>

从上面的示例可以看出，当没有可输出内容时，就会执行向下查找可执行语句，一直查找到 `default`。

也可以使用块扩展：

- var friends = 1
    case friends
      when 0: p you have no friends
      when 1: p you have a friend
      default: p you have #{friends} friends

<p>you have a friend</p>

## 遍历语句 ##

Jade 使用 `each` 对数组和对象遍历，用法与 JavaScript 大同小异。

// 遍历数组
    ul
      each val, index in ['zero', 'one', 'two']
        li= index + ': ' + val
    
    // 遍历对象
    ul
      each val, index in {1:'one',2:'two',3:'three'}
        li= index + ': ' + val

<ul>
      <li>0: zero</li>
      <li>1: one</li>
      <li>2: two</li>
    </ul>
    
    <ul>
      <li>1: one</li>
      <li>2: two</li>
      <li>3: three</li>
    </ul>

## 循环语句 ##

Jade 使用 `while` 实现循环，用法与 JavaScript 相似：

- var n = 0
    ul
      while n < 4
        li= n++

## mixins ##

在 Scss 和 Jade 中，混合宏（mixins）都是举足轻重的语法。混合宏具有复用、解耦、可读、可扩。可维护等等优势。创建混合宏需要使用 `mixin` 标识符，创建混合宏实例时，需要使用 `+` 标识符：

//- Declaration
    mixin list
      ul
        li foo
        li bar
        li baz
    //- Use
    +list
    +list

上面是最基本的混合宏，此时它还不具有诸多优势，除非我们给它传递参数，才能让它具有非凡活力：

mixin pet(name)
      li.pet= name
    ul
      +pet('cat')
      +pet('dog')
      +pet('pig')

此外，还可以使用 `...` 标识符表示不定数量的参数：

mixin list(id, ...items)
      ul(id=id)
        each item in items
          li= item
    
    +list('my-list', 1, 2, 3, 4)

有时候，我们需要替换混合宏的某个部分，那么就可以使用 `block` 标识符来占位：

mixin article(title)
      .article
        .article-wrapper
          h1= title
          if block
            block
          else
            p No content provided
    
    +article('Hello world')
    
    +article('Hello world')
      p This is my
      p Amazing article

<div class="article">
      <div class="article-wrapper">
        <h1>Hello world</h1>
        <p>No content provided</p>
      </div>
    </div>
    <div class="article">
      <div class="article-wrapper">
        <h1>Hello world</h1>
        <p>This is my</p>
        <p>Amazing article</p>
      </div>
    </div>

这种可替代语法，进一步提高了 Jade 的灵活性。

最后，我们谈谈有关属性的混合宏：

mixin link(href, name)
      a(href=href)&attributes(attributes)= name
    
    +link('/foo', 'foo')(class="btn")

上面混合宏中并没有声明 `attributes`，是因为 Jade 已经隐式为其引用了所有传递给 `&attributes` 的参数。

## includes ##

实现高度复用的另一种方式就是将代码片段保存到不同文件中，然后在需要的地方导入这些片段，为此，Jade 提供了 `include` 指令，下面是一个 `index` 页面：

//- index.jade
    doctype html
    html
      include ./includes/head.jade
      body
        h1 My Site
        p Welcome to my super lame site.
        include ./includes/foot.jade

`head` 代码片段：

//- includes/head.jade
    head
      title My Site
      script(src='/javascripts/jquery.js')
      script(src='/javascripts/app.js')

`footer` 代码片段：

//- includes/foot.jade
    #footer
      p Copyright (c) foobar

生成的 HTML：

<!doctype html>
    <html>
      <head>
        <title>My Site</title>
        <script src='/javascripts/jquery.js'></script>
        <script src='/javascripts/app.js'></script>
      </head>
      <body>
        <h1>My Site</h1>
        <p>Welcome to my super lame site.</p>
        <div id="footer">
          <p>Copyright (c) foobar</p>
        </div>
      </body>
    </html>

## 继承 ##

Jade 中使用 `extends` 来继承代码片段，与 `include` 本本分分地引用代码段不同，继承可以修改代码片段。

首先，在 `layout` 页面使用 `block` 标识符，设置一个可修改的代码片段，紧跟 `block` 标识符之后的是该代码片段的名字：

//- layout.jade
    doctype html
    html
      head
        block title
          title Default title
      body
        block content

然后，在 `index` 页面继承 `layout`，并可以根据代码片段的名字修改相关代码：

//- index.jade
    extends ./layout.jade
    
    block title
      title Article Title
    
    block content
      h1 My Article

生成的 HTML：

<!doctype html>
    <html>
      <head>
        <title>Article Title</title>
      </head>
      <body>
        <h1>My Article</h1>
      </body>
    </html>

上述这种继承方式，会抹除原来代码片段的部分，如果想要追加代码片段，可以使用 `append` 和 `prepend` 指令。`append` 用于在原有代码片段之后追加，`prepend` 用于在原有代码片段之前追加。一个初始页面：

//- layout.jade
    html
      head
        title Layout
      body
        block content
          p Hello

使用 `append` ：

extend layout
    
    block append content
        p World

生成的 HTML：

<html>
      <head>
        <script src="/vendor/jquery.js"></script>
        <script src="/vendor/caustic.js"></script>
      </head>
      <body>
        <p>Hello</p>
        <p>World</p>
      </body>
    </html>

使用 `prepend`：

extend layout
    
    block prepend content
        p World

生成的 HTML：

<html>
      <head>
        <script src="/vendor/jquery.js"></script>
        <script src="/vendor/caustic.js"></script>
      </head>
      <body>
        <p>World</p>
        <p>Hello</p>
      </body>
    </html>

[Jade]: http://www.nodeclass.com/api/jade.html
[https_www.w3cplus.com_html_how-to-use-jade.html]: https://www.w3cplus.com/html/how-to-use-jade.html