學習篇：NodeJS中的模板引擎：jade

DobTink發表於2019-02-16
NodeJS

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輸出的語句便成了

<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初級的使用方法。

但是我們使用模板引擎的目的並不是再此，還是能夠新增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，則輸出結果為

   
<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})

執行一下，結果是跟剛才的相同

3、在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") 首頁

執行一下，便如上所示。

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會預設為是邏輯執行程式碼語句，之後的語句它並不會要求每行都需要新增”-“符號。

相關文章