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

时间 2019-11-09

标签学习 nodejs 模板引擎 jade 栏目 Node.js 繁體版

原文原文链接

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

在node经常使用的模板引擎通常是
一、jade ——破坏式的、侵入式、强依赖（对原有的html体系不友好，走本身的一套体系）
二、ejs ——温和的、非侵入式的、弱依赖css

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

1、Jade

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

html
      head
       script
       style
      body

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

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

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

<html>
    <head>
     <script></script>
     <style></style>
    </head>
    <body>
    </body>
</html>

能够看到在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初级的使用方法。json

可是咱们使用模板引擎的目的并非再此，仍是可以添加css/js/data等数据。数组

二、关于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，则输出结果为测试

<html>
    <head>
     <script></script>
     <style></style>
    </head>
    <body>
        <div class="aaa bbb ccc">
       <div style="width:200px;height:300px;background:red"></div>
    </body>
</html>

关于上方输出格式，能够发现，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})

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

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

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

<div>名称：DobTink</div> //在标签内添加“名称：”之类的数据
  <div>年龄：15</div>
  <script src='a.js'></script>
  <script> //或者在jade中编写JavaScript
      window.onload = function(){
          console.log('测试输出');
      }
  </script>
  <a href="http://www.dobtink.com">首页</a> //编写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") 首页

执行一下，便如上所示。

四、在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会默认为是逻辑执行代码语句，以后的语句它并不会要求每行都须要添加"-"符号。