學習篇：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會默認爲是邏輯執行代碼語句，以後的語句它並不會要求每行都須要添加"-"符號。