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