Nodejs中的模板引擎之jade2

上节中我们讲了一些jade的基本用法，这一节，我们继续补充jade的一些用法。

jade可以自动识别单双标签，看如下jade代码

div
  input

js代码

const jade=require('jade');
var str=jade.renderFile('./views/1.jade',{pretty:true});
console.log(str);

然后我们执行以上js代码，我们会发现input自动被解析成了单标签

1.png

如果我们的代码不符合规范，jade在解析的时候也会自动报错，假如我们有如下jade代码

input
  div

我们再次执行上面的js，我们发现会报错

2.png

在jade中，所有自定义的标签都默认为双标记

假如我们有如下jade代码,我们添加了自定义标签aaa

div
  input
  aaaa

然后我们再次执行上面的js代码

1.png

我们发现aaaaa会自动被解析成双标签

通过上一个案例我们知道如果我们在div下面再添加一个aaa,那么会被自动解析为一个双标记，但是如果我们只想把aaa作为div中的内容，而不是标签，这时我们需要做以下操作

html
    head
    body
        |aaa
        |bbb
        |ccc

我们想要让什么成为内容，即在当前内容前面添加“|”即可

“|” 在jade中代表原样输出

这时我们发现aaa bbb ccc已经成为body中的内容，而不是标签

2.png

但是这样比较麻烦，如果我们的内容比较多，那么我们要添加很多“|”，所以还有比如上方法更简单的
看如下代码：

html
  head
    script.
      window.onload=function (){
        var oBtn=document.getElementById('btn1');
        oBtn.onclick=function (){
          alert('aaaa');
        };
      };
  body
    |abc
    |ddd
    |213

script中的内容我们想要原样输出。这时我们只需要在script后面加个点就可以了
这时我们会发现输出了我们想要的

3.png

但是上面的方法还是有点麻烦，因为日如果我们的js代码比较多，我们不可能把所有的js代码都放在头部，这时就需要引入一个外部的js了。
我们新建一个1.js,把上面的js代码放进去，

jade代码

html
  head
    script
     include a.js
  body
    |abc
    |ddd
    |213

然后我们再次执行一下如下代码

const jade=require('jade');
var str=jade.renderFile('./views/13.jade',{pretty:true});
console.log(str);

然后我们会发现输出的js代码同样在scripet中

3.png

如何在Jade中解析变量

有如下jade代码：

html
    head
    body
        div 我的名字叫：#{name}

现在我们要把name解析出来，所以我们需要创建一个js，代码如下

const jade=require('jade');
console.log(jade.renderFile('./views/jade13-2.js',{pretty:true,name:'amy'}));

然后我们执行以上js代码我们会发现会输出如下结果 1.png

jade中不仅可以输出变量，还可以做运算
假如我们有如下jade代码：

html
    head
    body
        div 我的年龄是:#{a+b}

js代码如下:

const jade=require('jade');
console.log(jade.renderFile('./views/133.jade',{pretty:true,a:3,b:5}));

执行以上js代码我们会发现jade给我们自动做运算了

2.png

接下来我们要给一个元素添加样式或class
有如下js代码

const jade=require('jade');
console.log(jade.renderFile('./views/134.jade',{pretty:true,
    json:{width:'100px',height:'100px',background:'red'},
    arr:['box','content']
}))

现在我们要把json中的样式添加给div,把arr中的值天加给元素作为class
jade代码如下

html
    head
    body
        div(style=json)
        div(class=arr)
        div(class=arr class='active')

代码执行完的结果如下：

3.png

我们发现json中的样式与arr中的class自动添加到了div中

在jade语法中想要解析并执行一段js代码该怎么做,接下来有如下 jade代码

html
    head
    body
        var a=13;
        var b=12;
        div：结果是：#{a+b}

jade中解析变量的两种方法:
有如下js代码:

const jade=require('jade');
console.log(jade.renderFile('./views/135.jade',{pretty:true,a:3,b:5}));

我们执行以上上述jade代码发现输出如下结果 1.png

我们是想把var a=13;var b=12;当成一段js代码来解析，但是我们发现程序给我们解析成了标签。所以我们需要对jade代码做以下操作，代码如下：

html
    head
    body
        -var a=13;
        -var b=12;
        div：结果是：#{a+b}

在变量前面加一个'-',然后执行出来的结果如下图所示: 2.png

这才是我们所要的结果

我们现在要把a 和b解析到标签中去
jade代码如下

html
    head
    body
        span #{a}
        span #{b}

        div=a
        div=b

执行上述代码，输出的结果如下

1.png

我们发现使用span #{a}和使用span=a这种方式解析出来的结果一样，而且第二种方式还更简单

jade中的循环

有如下js代码

const jade=require('jade');
console.log(jade.renderFile('./views/137.jade',{pretty:true,
 arr:['a','b','c','d','e','f','g']
}));

现在我们要把arr中的值分别输出在7个div中，在jade代码中该如何实现呢，看如下代码：

html
    head
    body
        -for(var i=0;i<arr.length;i++)
            div=arr[i] 

上述代码执行完的结果如下图所示

3.png

在jade中如何解析标签

有如下js代码：

const jade=require('jade');
console.log(jade.renderFile('./views/138.jade',{pretty:true,
    content:'<h1>标题</h1><p>这是一段内容这是一段内容这是一段内容</p>'
}));

jade代码如下

html
    head
    body
        div!=content

使用

div!=content那解析出来的标签是标签，内容是内容

结果如下图所示

在jade中使用if条件判断

有如下jade代码：

html
  head
  body
    -var a=19;
    if(a%2==0)
      div(style={background:'red'}) 偶数
    else
      div(style={background:'green'}) 奇数

执行完如下代码输出的结果如下

2.png

在jade中使用switch.....case语句

jade中的switch和原生js中的switch语句不一样，jade中的switch.....case语法

 case a
      when 0
        div aaa
      when 1
        div bbb
      when 2
        div ccc
      default
        |不靠谱

有如下 jade代码

html
  head
  body
    -var a=1;
    case a
      when 0
        div aaa
      when 1
        div bbb
      when 2
        div ccc
      default
        |不靠谱