jade模板引擎

時間 2019-11-30

標籤 jade 模板引擎欄目 Node.js 简体版

原文原文鏈接

jade是使用JavaScript實現，可供nodejs使用的高性能模板引擎（性能高不高，有些爭議。姑且稱之爲高性能吧！）。模板引擎有不少，主要使用比較普遍的是jade和ejs，modejs項目默認使用jade做爲模板引擎，我也就很少說了至於如何選擇，仍是得就事論事綜合各類因素來考慮。在此不對優缺點進行分析。插一句嘴，ejs的語法更像jsp、asp這樣的技術而jade更像python的語法風格，縮進來縮進去，有點繞。不過這並不影響代碼的可讀性（我是這麼認爲的）。不論是jade仍是ejs語法都比較簡單，因此不存在哪一個容易上手，就算你沒使用過jsp或者Python也不會影響學習，只是接觸過jsp或者Python的人看jade代碼可能比較親切罷了，我以爲把一個技術語言和另外一個技術語言來作比較的這麼學習是不太明智的，起碼不能什麼都去比較。每種語言都有本身的風格和獨立性，不混在一塊爲妙。css

jade是nodejs一個重要模塊，jade文件能夠被預編譯成爲.js文件，也能夠被編譯成爲目標html代碼，仍是很友好的。若是你獲得的是預編譯後的js文件，那麼你徹底能夠在客戶端去調用執行，沒有任何問題！下面簡單的記錄一下jade的基本使用規則和一些示例代碼：html

1，代碼縮進、文檔申明、標籤的屬性書寫、標籤元素的內容書寫java

以上簡單的列出了一些jade的基本語法，不寫元素的狀況下，jade默認解析成爲div元素。屬性通常寫在一對括號中間，兩個屬性使用逗號分隔。node

2，jade的文檔註釋和內容換行python

行註釋很清楚，塊註釋是沒有見過的！不過也不麻煩。文本換行使用元素後邊加. 或者文本前邊加|。可是必要的縮進是得明確的。git

3，jade的變量申明和變量引用github

沒有什麼可說的！npm

4，jade的編譯api

原諒我老是這麼馬虎，jade是node生態之中的一個模塊，你可使用npm 安裝到本地。npm install jade -g。建議使用-g來安裝到全局使用。jade的使用也很簡單。jade fileName.jade –P –w 就能夠了。-P表示pretty也就是漂亮的格式化的，-w表示修改檢查和自動編譯。好了，插播完畢。數組

5，內部聲明的變量會被優先執行，若是有繼承那麼你也能夠說是被複寫了。

6，變量是有方法提供使用的哦！例如數組變量就有length能夠用。具體就不列舉了，大體和js差很少。遇到錯誤直接去查API就行了。

7，jade的轉義和非轉義

上面好像也已經很清楚了。可是須要注意的是 p=varName 這種形式的狀況下後面是不能再追加內容的！可是必定不能追加嗎？不必定。呵呵，由於原來p=varName若是varName沒有被定義會輸出undefined，可是如今輸出的是空串哦！因此再插一句嘴：jade包括node在內的全部框架工具集合的更新速度很是之快。因此再生產環境中須要本身去測試或者去看官方的解釋文檔來作判斷。

8，條件語句、循環語句、switch語句

9，mixin

如今開始搞點有比較好玩的，對，沒錯，就叫迷信。

等等，mixin 還有點沒說完！

有點凌亂不過看起來很是的犀利！

10，block和extends

block blockName 換行定義的全部jade模板都是blockName的內容。在jade文件中能夠隨意調用（本文件中）。extends可使得jade實現繼承關係。假設index.jade中定義了頭部和尾部，那麼在頭尾之間能夠插入對block的調用，block blockName 而後再blockName的定義文件中在文檔首部寫上extend index.jade 。那麼index.jade文件就會是包括頭尾合blockName塊的完整代碼。對，沒錯。這樣的話就實現了代碼的簡單的模塊化處理。

11，include

搞過jsp的都知道<%@page include=」java.util.*」%>這樣來引入java包。jade的include也差很少是這麼個意思！include fileName 這樣能夠引入一些靜態文件。這些靜態文本包括，html、css、js。。。fileName若是沒有寫後綴的話默認是jade文件。也就是說會被編譯。很顯然include很是有用的一個命令。配合block、extends完美的實現各類模塊化的代碼管理。

12，jade在node中的渲染

var http = require('http')
        var jade = require('jade')
        // var html2jade = require('html2jade')

        http.createServer(function(req, res) {
          res.writeHead(200, {
            'Content-Type': 'text/html'
          })

          // html2jade.convertDocument(document, {}, function(err, jade) {

          // })
          // 1. jade.compile
          // var fn = jade.compile('div #{course}', {})
          // var html = fn({course: 'jade'})

          // 2. jade.render
          // var html = jade.render('div #{course}', {course: 'jade render'})

          // 3. jade.renderFile
          var html = jade.renderFile('index.jade', {course: 'jade renderFile', pretty: true})


          res.end(html)
        }).listen(1337, '127.0.0.1')

        console.log('Server running at 1337')

這裏使用到了一些jade的核心API，有renderFile render compile 這些接口能夠實如今node中對jade文件的編譯輸出控制。還有HTML2Jade這個模塊的使用，顧名思義，HTML和Jade之間的互相轉化。貌似很是有用，先標記備用吧！renderFile好像比較經常使用一點吧！

13，jade的擴展：filter

filter的做用就是插入其餘語言的腳本而且對其進行解釋。好比：

：markdown
    Hi,this is **huazi** [link](http://huazihear.github.io)
:less
    body{
        p{
            color:red;                
        }            
    }

14，jade的客戶端使用！

jade文件的目標編譯語言是HTML，可是咱們知道jade使用JavaScript實現的編譯系統，因此jade可使用相似預編譯的功能，使其目標代碼指向js。呵呵，js是能夠在客戶端來調用的，so，jade的客戶端使用問題解決了！

瞭解完這些，估計算是基本的開發需求差很少知足了，固然對於jade的描述只是一部分。並且jade和其餘node生態平臺中的模塊一下在不停的發展，因此在使用的過程當中最好仍是對照API使用保險一點。