pug模板引擎——jade

隨着前端項目工程化的發展，代碼結構愈來愈複雜，代碼卻愈來愈簡單，爲了將更多的精力集中在業務功能上面，對頁面的快速構建需求日益劇增，同js、css同樣，html也出現了各類各樣的工具，即模板引擎，本文不研究各類模板引擎的實現技術原理，主要介紹jade的使用；

1.常見的模板引擎的

常見的模板引擎有mustache、Handelerbars、Underscore Templates、ejs(Embeded JS Templates)、jade
各類模板的比較能夠參考個人另一篇文章傳送門
本文主要介紹pug模板引擎的使用，pug原名不叫pug,而是衆所周知的jade,jade中文含義爲美玉翡翠，其原來的logo爲一隻精靈的白兔，而pug中文含義爲哈巴狗，如今logo也改爲了憨態可掬的哈巴狗，至於爲什麼將美玉改成哈巴狗，該開源項目在github給出的解釋爲jade的商標被人搶先註冊了（這個理由也是讓人服）；

2.pug結構語法

pug模板引擎兼容html,便可以在代碼中直接書寫html；

1. 標籤：
   - 默認在每行文本開頭(或緊跟白字符部分)書寫html標籤的名稱；
   - 使用縮進來表示標籤之間的嵌套關係
   - 自動識別閉合和非閉合標籤，也能夠在標籤後加上/顯示聲明閉合標籤

   如：
            ```
                div
                    a: p 這裏是輸出字符
            ```
    渲染結果：`<div><a><p>這裏是輸出字符</p></a></div>`

2. 內容
   - 管道文本：最簡單的向模板添加純文本的方法，在空白或標籤後加上一個|字符，如：p | 這裏是管道文本；
   - 標籤內文本：標籤內添加文本，在索要添加的文本和標籤元素之間輸入一個空格便可，如：p 這裏是標籤內文本；
   - 嵌入大段文本：在標籤後輸入一個.便可，注意標籤和.之間無空格，如插入腳本：

   ```
        script. 
            if (true)
                console.log('這裏是腳本片斷1');
            else
                console.log(‘這裏是腳本片斷2’)
        ```

3. 屬性
   - 單行屬性：標籤屬性與html語法類似，及普通js表達式，多個屬性間用逗號或空格分隔，如：a(href=''baidu.com''，class='link') 百度；
   - 多行屬性：多行屬性與單行屬性相似，分多行些便可；
   - 長屬性：長屬性按照JS表達式書寫便可；
   - 特殊字符：特殊字符可用''或""括起來便可，如：div(class='box' "(click)"="play()"
   - 轉移屬性：默認狀況下，全部屬性都通過轉義(即將特殊字符串換成轉義序列)來防止跨站腳本攻擊之類方式
   - 布爾值：布爾值可直接使用，不指定值時默認爲true；
   - class和id: 類可使用.className、id使用#idname語法來使用，如：a.btn p#content
   - 行內樣式：樣式屬性與其餘屬性同樣，能夠爲字符串或對象，如：a(style={color:'red',background:'#333'})
4. 註釋
   - 單行註釋：與javascript註釋相似,採用//此時註釋會輸出，//-此時註釋不會輸出；
   - 塊註釋：與javascript相似，採用//換行便可；
   - 條件註釋：
5. JS代碼
   - 不輸出的代碼：用-符號開始一段不直接輸出的代碼;
   - 輸出的代碼： 用=符號開始一段代碼；
   - 不轉義的輸出代碼：用!=開始的代碼不會被轉義；

6. 變量
   pug文件中變量來源有三種，其內部變量優先級最高，其他兩種按命令前後順序，之後面的爲準：
   ①pug文件內部，直接使用，如：-var name='內部變量'；
   ②命令行參數：使用--obj參數在命令行中傳遞，如pug test.pug -P -w --obj "{name:'命令行參數'}"；
   ③外部json文件：使用-O 跟隨一個文件路徑名，如pug test.pug -P -w -O test.json
   - 內容變量：使用=或#{}來進行真實變量的替換，如：

   ```
        - var url='baidu.com';
        p | 連接地址爲 #{url}
        a(href=url)
        ```
    -

7. 條件
   pug的條件語句相似於JavaScipt,不一樣之處在於不用書寫()和{}符號；
8. 循環
   pug目前支持兩種主要迭代方式：each和while
   - each:如'each value,index in [1,2,3,4,5]';
   - while:

9. 混入
   混入容許pug中重複使用一整個代碼塊、傳入參數的方法,同時也支持屬性方式傳入參數；如：

   ```
        mixin list（name）
            p #{name}
   
        +list(複用1)
        +list(複用2)(class='btn'）
    ```

10. 文件包含
    包含(include)功能容許把另外的文件內容插入進當前文件,若是包含文件爲js或css則會當作文本引入如：

    ```
        //- index.html
        doctype html
            html
                include includes/header.pug
                body
                // index.html文件內容
                include includes/footer.pug
    `` `

11. 文件繼承
    - 覆蓋：使用block和extends關鍵字進行模板的繼承，一個稱之爲塊的代碼塊，能夠被字模板覆蓋替換。該過程是遞歸的。
    - 擴展：語序去替換(默認的行爲)，prenpend(向頭部添加內容）、或appned(向尾部追加內容)

--end