模板引擎 jade 简介

jade是超高性能的node JavaScript模板引擎,有着非常强大的API和大量杰出的特性。
jade是侵入式的模板引擎,强依赖的,用了jade就不能使用普通的HTML

下面总结一些常用的jade知识点:

  • jade 是根据缩进来规定标签的层级关系的
  • jade 里面给标签写属性像这样写在圆括号里面:input(type="text",id="input1",name="username")
  • jade 里面给标签加内容直接空格加要的内容如:a(href="http://love.haozigege.com") 我的博客
  • jade 里面套内容和子元素是可以共存的 如:

    1
    2
    3
    4
    div aaa
    span bbb
    应该解析为:
    <div>aaa<span>bbb</span></div>
  • 特殊属性 style ,因为style为一个比较特殊的属性,我们为其加样式有两种方法:

    1
    2
    3
    4
    5
    //1: 和普通标签一样如:
    //div(style="width:200px;height:200px;background-color:#f00")
    //2: 我们看style里面的css长得就很像json,我们也可以以json的方式为其定义样式如:
    //div(style={width:'200px',height:'200px';background-color:'#f00'})
    //上面两种方式的效果是相同的都将解析为:<div style="width:200px;height:200px;background-color:#f00"></div>
  • 特殊属性 class,因为 class 也是一个比较常见的属性,也有两种方法为其定义属性:

    1
    2
    3
    4
    //1:div(class="aaa bbb ccc")
    //我们看class多个的时候有点像js里面的数组,我们可以传一个数组给class
    //2:div(class=['aaa','bbb','ccc'])
    //上面两种方式的效果也是等价的都将解析为:<div class="aaa bbb ccc"></div>
  • 这里介绍简写方式:我们可以这样:div.box 显然这将解析为 <div class="box"></div> 同样的 div#div1 将解析为 <div id="div1"></div>

  • 还有一种方式:div&attributes({title:'aaa',id:'div1'}) 将解析为 <div title="aaa" id="div1"></div>
  • jade很聪明,它可以自动的识别单双标签如:input(id="input1") 会被解析为 <input id="input1"> 而且解析的内联元素会放在一行显示,不会换行(这是由于内联元素换行可能会导致显示上的问题)
  • jade支持自定义标签,并且自定义标签默认会被解析为双标签
  • 利用竖线 | 可以在如 script 标签中原样的输出东西,而不会被解析为标签
    当然这有点麻烦,有没有简单一点的办法呢??当然有的吗 如:script. 点表示它里面的东西都原样的输出为内容
    当然还有没有其他更好的办法呢?? 是有的,利用 include 把代码给包含进去
  • 使用变量:在 jade.renderFile('./views/1.jade',{pretty:true,name:'fengcheche'}) 的时候可以注入变量
    在模板中这样去使用 #{name} 之前说过特殊的属性 style 可以接受一个 json ,所以这里我们可以直接给 style 注入一个 json,当然也可以给 class 直接注入一个数组,注意这里在使用时和普通的变量不同 div(style=json) 而不是 #{json}
  • 可以在jade的模板文件里面插入代码如:直接注入变量,而不是在调用 renderFile() 的时候,在代码前面加一个横杠 - 使用该变量的时候可以这样#{a} 也可以这样: div=a
  • jade 模板文件里面使用循环:首先在renderFile的时候注入一个数组 arr1=['123','234','456'] 在模板中使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    -for(var i=0;i<arr1.length;i++){
    div=arr1[i]
    -}
    类似的可以写if else 代码块如:
    -var c = 3;
    -if (c%2 === 0) {
    div(style={background:'red'})
    -} else {
    div(style={background:'green'})
    -}
    类似的像switch case代码块是这个样子的:
    -var d = 5;
    case c
    when 0
    div aaa
    when 5
    div bbb
    default
    div ccc
  • 注入的变量中包含html标签怎么办?jade会自动为我们转换为html实体,如果不想要html实体可以这样:div!=content 这样子就不会讲content中的html标签转换为html实体了

    下面给一个较完整的示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    //server.js文件
    const fs = require('fs');
    const jade = require('jade');

    var str = jade.renderFile(
    './views/1.jade',
    {
    pretty:true,
    name:'fengcheche',
    json1:{width:'300px',height:'300px',background:'red'},
    cla1:['aaa','active','bbb'],
    arr1:['123','234','456'],
    content:'<div id="div3"></div>'
    }
    );

    console.log(str);
    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
    //模板文件1.jade
    doctype
    html
    head
    title This is my first jade file
    style
    script
    |window.onload = function() {
    | var a = 12;
    | var b = 13;
    | car c = a + b;
    | console.log(c);
    |};
    script.
    window.onload = function() {
    var a = 12;
    var b = 13;
    car c = a + b;
    console.log(c);
    };
    script
    include inc/a.js
    body
    div(style={width:'200px',height:'200px',background:'blue'})
    div#div1(class=['aaa','bbb','active'])
    div&attributes({title:'aaa',id:'div1'})
    p haha
    a(href="http://love.haozigege.com") 耗子哥哥的博客
    input(id="input1")
    div(style=json1 class=cla1)
    aaa
    div
    |aaa
    div #{name}
    -var a = 3;
    -var b = 7;
    div 结果是#{a+b}
    div=a
    -for(var i=0;i<arr1.length;i++) {
    div=arr1[i]
    -}
    div!=content
    -var c = 3;
    -if (c%2 === 0) {
    div(style={background:'red'})
    -} else {
    div(style={background:'green'})
    -}
    -var d = 5;
    case c
    when 0
    div aaa
    when 5
    div bbb
    default
    div ccc
    1
    2
    3
    4
    5
    6
    7
    //待引入的文件 a.js
    window.onload = function() {
    var a = 12;
    var b = 13;
    car c = a + b;
    console.log(c);
    };
  • 渲染出的结果:

    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
    <!DOCTYPE html>
    <html>
    <head>
    <title>This is my first jade file</title>
    <style></style>
    <script>
    window.onload = function() {
    var a = 12;
    var b = 13;
    car c = a + b;
    console.log(c);
    };
    </script>
    <script>
    window.onload = function() {
    var a = 12;
    var b = 13;
    car c = a + b;
    console.log(c);
    };
    </script>
    <script>window.onload = function() {
    var a = 12;
    var b = 13;
    car c = a + b;
    console.log(c);
    };

    </script>
    </head>
    <body>
    <div style="width:200px;height:200px;background:blue"></div>
    <div id="div1" class="aaa bbb active"></div>
    <div title="aaa" id="div1"></div>
    <p>haha</p><a href="http://love.haozigege.com">耗子哥哥的博客</a>
    <input id="input1">
    <div style="width:300px;height:300px;background:red" class="aaa active bbb">
    <aaa></aaa>
    </div>
    <div>aaa</div>
    <div>fengcheche</div>
    <div>结果是10</div>
    <div>3</div>
    <div>123</div>
    <div>234</div>
    <div>456</div>
    <div><div id="div3"></div></div>
    </body>
    <div style="background:green"></div>
    <div>ccc </div>
    </html>