jade的使用

发表于 分类于

jade（Pug）

由于商标版权问题，jade 已经改名为 Pug，github 地址为https://github.com/pugjs/pug。
jade 是一个高性能的模版引擎。
文件后缀名是.pug(.jade)。

jade 的优点

  • 可读性高
  • 灵活缩进
  • 块展开
  • 代码默认经过编码处理，安全性高
  • 运行时和编译时上下文错误报告
  • 支持命令行编译
  • 支持 html5 模式
  • 在内存中缓存（可选）
  • 原生支持 express
  • 合并动态和静态标签类
  • 过滤器

jade 的编译方法

1
2
3
4
5
6
7
8
9
pug xxx.jade //xxx为要编译的文件名

pug -- help
    Options:
        -p,--pretty     compile pretty HTML output //输出漂亮结构的HTML
        -D,--no-debug   compile without debugging(smaller functions) //不带调试的编译
        -w,--watch      watch files for changes and automatically re-render //对某个文件的变动保持监控
        -E,--extension <ext>    specify the output file extension //指定输出文件扩展名
        -s,--silent     don't output logs //不输出日志

jade 与 express

jade 完全集成了一个流行的 node.js Web 框架 Express，作为支持的视图引擎。

jade 的 API

标签属性

  • id,class 写法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 编译前

    p.title class写法1
    p(class='title') class写法2
    p#tit id写法1
    p(id='tit2') id写法2

    // 编译后

    <p class="title">class写法1</p>
    <p class="title">class写法2</p>
    <p id="tit">id写法</p>
    <p id="tit2">id写法2 </p>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 编译前

    - var classArr = ['small','medium','large']
    a(class= classArr)
    a.test(class = classArr class=['add'])

    // 编译后

    <a class="small medium large"></a>
    <a class="test small medium large add"></a>
    1
    2
    3
    4
    5
    6
    7
    8
    //编译前

    - var active = 'select'
    a(class={active: active === 'select'} )

    // 编译后

    <a class="active"></a>

  • 其他属性
    通过()来依次编写属性，多个用逗号分开

    1
    2
    3
    4
    5
    6
    7
    //编译前

    a(class='baidu' ,title='baidu' href='www.baidu.com') 百度

    //编译后

    <a class="baidu" title="baidu" href="www.baidu.com">百度</a>

  • 也支持所有正常的 javascript 表达式

    1
    2
    3
    4
    5
    6
    7
    8
    // 编译前

    - var flag  = true   //注意这里使用变量要记得添加-符号.
    h2(class=flag ? 'flag': '')

    // 编译后

    <h2 class="flag"></h2>

  • 多个属性的另外写法

其实就是换行缩进
pug // 编译前 a( title='baidu', href='www.baidu.com', class='links' ) // 编译后 <a class="links" title="baidu" href="www.baidu.com"></a>

  • 引用属性
    如果你的属性名称包含了与 javascript 语法冲突的字符，请使用”或’引用，或者使用逗号分隔不同的属性。

    1
    2
    3
    4
    5
    6
    7
    //(click)='play()',这里(click)会被当作一个函数调用而不是一个属性名字来解析.

    // 编译前
    div(class='div-class' (click)='play()')

    // 编译后报错
    div(class='div-class' (click)='play()')

    正确写法

    1
    2
    3
    4
    5
    6
    7
    // 编译前
    div(class='div-class' '(click)'='play()')
    div(class='div-class', (click) = 'play()')

    // 编译后
    <div class="div-class" (click)="play()"></div>
    <div class="div-class" (click)="play()"></div>

  • 属性插值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 编译前
    - var url = 'demo.com'
    a(href='/' + url) links
    - var url2 = 'www.baidu.com'
    a(href = url2 ) 百度

    // 编译后
    <a href="/demo.com">links</a>
    <a href="www.baidu.com">百度  </a>

    如果你的 javascript 运行环境支持 ES 2015.那么 Pug 支持模板字符串语法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 编译前
    - var size1 = 'small'
    - var size2 = 'medium'
    - var size3 = 'large'
    button(
    type='button',
    class='btn btn-' + size1 + ' ' +  'btn-' + size2 + ' ' + 'btn-' + size3
    )
    button(
    type='button',
    class=`btn btn-$(size1) btn-$(size2) btn(size3)`
    )
    // 编译后
    <button class="btn btn-small btn-medium btn-large" type="button"></button>
    <button class="btn btn-small btn-medium btn-large" type="button"></button>

  • 未转义属性

默认情况下，会转义所有属性（用转义序列代替特殊字符），以防止诸如跨站点脚本之类的攻击。 如果必须需要使用特殊字符，可以使用！=而不是=。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// 编译前
div(title="<code>")
div(title!="<code>")

    // 编译后
    <div title="&lt;code&gt;"></div>
    <div title="<code>"></div>
    ```

- **布尔属性**

布尔属性由 Pug 镜像，并接受布尔值（true 和 false）。 当没有指定值时，默认为 true。
```pug
// 编译前
input(type='radio' checked)
input(type='radio' checked=true)
input(type='radio' checked=false)

    // 编译后
    <input type="radio" checked>
    <input type="radio" checked>
    <input type="radio">
    ```

- **style 属性**

style 属性可以是一个字符串（像任何普通属性），但它也可以是一个对象
```pug
// 编译前
p(style={fontSize: '14px',color: 'red'})

    // 编译后
    <p style="fontSize:14px;color:red;"></p>
    ```

### case

case 语句是 JavaScript Switch 语句的缩写，并采用以下形式：
```pug
// 编译前 - var friendsNum = 4
case friendsNum
when 0
p you have not friend
when 1
p you has one friend
default
p you has #{friendsNum} friends

    // 编译后
    <p>you has 4 friends    </p>
    ```

### code

Pug 可以在你的模板中编写内置的 JavaScript 代码。 有三种类型的代码。

1. Unbuffered Code
   不直接添加任何的输出

   ```pug
   // 编译前
   - for(var i = 0; i < 3;i++)
       li item

   // 编译后
   <li>item</li>
   <li>item</li>
   <li>item</li>
1
2
3
4
5
6
7
8
9
10
11
// 编译前

- var nameList = ['kobe','cpul','james']
    each item in nameList
        li=item

// 编译后

<li>kobe</li>
<li>cpul</li>
<li>james</li>