jade模板引擎


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

      jade是nodejs一個重要模塊,jade文件可以被預編譯成為.js文件,也可以被編譯成為目標html代碼,還是很友好的。如果你得到的是預編譯后的js文件,那么你完全可以在客戶端去調用執行,沒有任何問題!下面簡單的記錄一下jade的基本使用規則和一些示例代碼:

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

      QQ截圖20150524210435

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

 

 

     2,jade的文檔注釋和內容換行

QQ截圖20150524212403

    行注釋很清楚,塊注釋是沒有見過的!不過也不麻煩。文本換行使用元素后邊加. 或者文本前邊加|。但是必要的縮進是得明確的。

     3,jade的變量申明和變量引用

QQ截圖20150524215927

沒有什么可說的!

      4,jade的編譯

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

     5,內部聲明的變量會被優先執行,如果有繼承那么你也可以說是被復寫了。

     6,變量是有方法提供使用的哦!例如數組變量就有length可以用。具體就不列舉了,大致和js差不多。遇到錯誤直接去查API就好了。

     7,jade的轉義和非轉義

     QQ截圖20150524221145

      上面好像也已經很清楚了。但是需要注意的是 p=varName 這種形式的情況下 后面是不能再追加內容的!但是一定不能追加嗎?不一定。呵呵,因為原來p=varName如果varName沒有被定義會輸出undefined,但是現在輸出的是空串哦!所以再插一句嘴:jade包括node在內的所有框架工具集合的更新速度非常之快。所以再生產環境中需要自己去測試或者去看官方的解釋文檔來做判斷。

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

      10

   9,mixin

   現在開始搞點有比較好玩的,對,沒錯,就叫迷信。

   3243
         等等,mixin 還有點沒說完!

0524230821

       有點凌亂不過看起來非常的犀利!

       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使用保險一點。

本文測試環境 jade 1 .9 .2

jade API                            http://jade-lang.com/api/

github                               https://github.com/jadejs/jade


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM