学习篇：NodeJS中的模板引擎：jade

NodeJS 模板引擎作用：生成页面

在node常用的模板引擎一般是
1、jade ——破坏式的、侵入式、强依赖（对原有的html体系不友好，走自己的一套体系）
2、ejs ——温和的、非侵入式的、弱依赖

本次就汇总一下jade的一些特性和使用方法。

一、Jade

在node中，jade的编写特性有：
1、根据缩进，来划分规定层级
例如：在原始目录下建立一个views目录，来存放该 test.jade



    html

      head

       script

       style

      body

在node.js中来调用该jade（记得先用npm install jade）



const jade = require('jade') ;

var str = jade.renderFile('./views/test.jade' ,{pretty : true }) //pretty : ture 相当于beauty格式化一下输出的代码

console.log(str)

运行一下，log输出的语句便成了



&lt;html&gt;

    &lt;head&gt;

     &lt;script&gt;&lt;/script&gt;

     &lt;style&gt;&lt;/style&gt;

    &lt;/head&gt;

    &lt;body&gt;

    &lt;/body&gt;

&lt;/html&gt;

可以看到在nodejs中的jade模板引擎，是根据缩进输入的情况，来划分规定层级的。
当然，如果你想把该代码输出成一个html文件,我们可以在源目录下新建一个build目录来存放生成的文件
那就将刚才的node.js改成



const jade = require('jade');//加载jade引擎

const fs = require('fs')

var str = jade.renderFile('./views/test.jade' ,{pretty : true }); //pretty : ture 相当于beauty格式化一下输出的代码

fs.writeFile('./buuld/index.html' ,str , function(err){

        if (err)

  console.log("编译失败");

 else

  console.log("编译成功");

})

执行完毕会在build目录下生成index.html
以上就是jade初级的使用方法。

但是我们使用模板引擎的目的并不是再此，还是能够添加css/js/data等数据。

2、关于class/style的写法——属性放在（）里面，用逗号分隔
如：



html

    head

        script

        style

    body

        div(class=['aaa','bbb','ccc'])

        //class也可以写成div(style="aaa bbb ccc")

        div(style={width:'200px' ,height:'300px' ,background:'red'})

        //style也可以写成div(style="width:200px;xxxx")

运行一下node.js，则输出结果为



&lt;html&gt;

    &lt;head&gt;

     &lt;script&gt;&lt;/script&gt;

     &lt;style&gt;&lt;/style&gt;

    &lt;/head&gt;

    &lt;body&gt;

        &lt;div class="aaa bbb ccc"&gt;

       &lt;div style="width:200px;height:300px;background:red"&gt;&lt;/div&gt;

    &lt;/body&gt;

&lt;/html&gt;

关于上方输出格式，可以发现，style是可以用json传输的，class是可以采用数组传输进去的。
因此可以在node.js中直接插入相关属性数据，然后在jade文件调用，这样就可以很方便的生成不同框架的模板文件

如果你想插入相关属性数据，并调用的话，应当在node.js中的 jade.renderFile中如此添加数据



   /

var str = jade.renderFile('./views/test.jade' ,{pretty : true ,

arr:['aaa' ,'bbb' ,'ccc'], cls:{width :'200px' , height:'200px' , background :'red'}

});

并在test.jade文件中修改如下：



html

    head

        script

        style

    body

        div(class=arr)

        div(style=cls})

运行一下，结果是跟刚才的相同

3、在jade标签中输入数据时，记得在相应标签后，加一个空格

我们通常前端编程的时候，一般都会写到



  &lt;div&gt;名称：DobTink&lt;/div&gt; //在标签内添加“名称：”之类的数据

  &lt;div&gt;年龄：15&lt;/div&gt;

  &lt;script src='a.js'&gt;&lt;/script&gt;

  &lt;script&gt; //或者在jade中编写JavaScript

      window.onload = function(){

          console.log('测试输出');

      }

  &lt;/script&gt;

  &lt;a href="http://www.dobtink.com"&gt;首页&lt;/a&gt; //编写a标签、img标签给其src赋予属性

  ///等等

而在jade中，我们需要这样来写



   div 名称：DobTink

   div 年龄：15

   script(src='a.js' ,xx = '')

   script.  //注意在script后面加个点"."

       window.onload = function(){

          console.log('测试输出');

      }

   a(href="http://www.dobtink.com") 首页

执行一下，便如上所示。

4、在jade中使用if else switch while 等语句

有些情况下，我们需要从后天拿取数据，并对数据在jade中进行数据处理操作，而在jade中的这些语句还是很方便地
代码如下：

4.1 、jade中的 if 使用



html

  head

  body

      -var a = 15;

      -if(a%2==0)

        div(style={background:'red'}) 偶数

      -else

        div(style={background:'green'}) 奇数

4.2 、jade中的 switch 使用



    html

      head

      body

          -var a = 3;

          case a

            when 0

              div aaa

            when 1

              div bbb

            when 2

              div ccc

            when 3

              div ddd

            default

              |默认

在jade中，switch是不存在的，被转义成了case,使用方法跟switch一致。
在该段代码中 “|”符号，是直接输出后面数据， "-"号之后的语句，jade会默认为是逻辑执行代码语句，之后的语句它并不会要求每行都需要添加"-"符号。

来源：https://segmentfault.com/a/1190000016281552