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；
標簽：
- 默認在每行文本開頭(或緊跟白字符部分)書寫html標簽的名稱；
- 使用縮進來表示標簽之間的嵌套關系
- 自動識別閉合和非閉合標簽，也可以在標簽后加上/顯示聲明閉合標簽
內容
- 管道文本：最簡單的向模板添加純文本的方法，在空白或標簽后加上一個|字符，如：p | 這里是管道文本；
- 標簽內文本：標簽內添加文本，在索要添加的文本和標簽元素之間輸入一個空格即可，如：p 這里是標簽內文本；
- 嵌入大段文本：在標簽后輸入一個.即可，注意標簽和.之間無空格，如插入腳本：
- 單行屬性：標簽屬性與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'})
- 單行注釋：與javascript注釋類似,采用//此時注釋會輸出，//-此時注釋不會輸出；
- 塊注釋：與javascript類似，采用//換行即可；
- 條件注釋：
- 不輸出的代碼：用-符號開始一段不直接輸出的代碼;
- 輸出的代碼： 用=符號開始一段代碼；
- 不轉義的輸出代碼：用!=開始的代碼不會被轉義；
變量
pug文件中變量來源有三種，其內部變量優先級最高，其余兩種按命令先后順序，以后面的為準：
①pug文件內部，直接使用，如：-var name='內部變量'；
②命令行參數：使用--obj參數在命令行中傳遞，如pug test.pug -P -w --obj "{name:'命令行參數'}"；
③外部json文件：使用-O 跟隨一個文件路徑名，如pug test.pug -P -w -O test.json
- 內容變量：使用=或#{}來進行真實變量的替換，如：
pug的條件語句類似于JavaScipt,不同之處在于不用書寫()和{}符號；
pug目前支持兩種主要迭代方式：each和while
- each:如'each value,index in [1,2,3,4,5]';
- while:
混入
混入允許pug中重復使用一整個代碼塊、傳入參數的方法,同時也支持屬性方式傳入參數；如：
文件包含
包含(include)功能允許把另外的文件內容插入進當前文件,如果包含文件為js或css則會當做文本引入如：
文件繼承
- 覆蓋：使用block和extends關鍵字進行模板的繼承，一個稱之為塊的代碼塊，可以被字模板覆蓋替換。該過程是遞歸的。
- 擴展：語序去替換(默認的行為)，prenpend(向頭部添加內容）、或appned(向尾部追加內容)
--end
轉載于:https://www.cnblogs.com/hbzyin/p/7752542.html
總結
以上是生活随笔為你收集整理的pug模板引擎——jade的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： wxparse加载本地html,微信小程
- 下一篇： POJ 2395 Out of Hay