之前使用過的模板有ejs與jade（後來改名叫pug）。前者設計得很容易上手，而且文法跟HTML比較接近。後者讓人望而生畏，而且我沒記錯的話，jade對縮排有嚴格的要求，因為它是基於縮進來判斷標籤層級關係的，這樣的設計讓人編寫的時候幾乎是如履薄冰如寫Python（我的遊標卡尺呢？？？），所以我當時還是一直用ejs來開發的。
所以，這次我還是大致按照ejs的語法規格來實作Leopard。
這裡是github位址，歡迎大家看完之後在issue裡提建議與bug，同時也歡迎提PR 。
大家也可以透過npm來下載Leopard：
<span style="font-size: 14px;">$ npm install leopard-template<br></span>
##目前而言，Leopard實作了以下功能點：
插值：包含文字內插與HTML插值
邏輯判斷：<span style="font-size: 14px;"></span>if#與<span style="font-size: 14px;"></span>else
循環：<span style="font-size: 14px;"></span>for」循環，可以用來循環輸出範本
過濾器：支援在插值中加入過濾器，同時過濾器可以串連使用。引擎內建了兩個過濾器，<span style="font-size: 14px;"></span>capitalize與<span style="font-size: 14px;">##reverse</span>。 Leopard同時支援自訂過濾器，可以使用<span style="font-size: 14px;">Leopard.filter(filter, handler)</span>來全域註冊一個過濾器。在過濾器上，Leopard可能跟ejs的不太同，跟Vue的比較相似。
<span style="font-size: 14px;">var Leopard = require('leopard-template')<br>var leo = new Leopard()<br><br>var template = '<% if (isOk) { %>' +<br> '<span class=\"nickname\"><%= nickname | capitalize %></span>' +<br> '<% } else { %>' +<br> '<span class=\"realname\"><%= realname | capitalize %></span>' +<br> '<% } %>'<br><br>var html = leo.compile(conditions, {<br> isOk: false,<br> nickname: 'leo',<br> realname: 'leopard'<br>})<br><br>// html就是最终编译成功的的html了，可以直接通过document的方法渲染到页面上<br></span>其實字串模板引擎的性能大家都知道的，在現在的硬體條件下，幾乎可以說是非常快的。 （飽受虛擬DOM服務端渲染效能上不去的孩子哭暈在廁所，鄙人的公司專案就是卡在了這裡上不了線）
##我做了一個簡單的benchmark，循環輸出50,000個li<span style="font-size: 14px;"></span>#耗時大概是60ms左右。當然，Leopard現在也只支援將模板字串解析編譯成HTML字串，所以這裡的循環輸出指的是字串編譯這一環。
<span style="font-size: 14px;"># benchmark<br>$ npm run benchmark<br></span>
雖然說是個造輪子的項目，而且長得跟ejs幾乎一毛一樣，所以也不太可能投入生產環境使用（再者說現在都用MVVM框架來開發專案），但是我還是希望能按照開源專案的規格來開發Leopard。我給Leopard寫了100%覆蓋率的測試案例，每次提交commit也是跑完測試之後通過了才提交，也是希望這個項目不會太水。
<span style="font-size: 14px;"># unit test<br>$ npm run test<br><br># coverage<br>$ npm run coverage<br></span>
以上是一個簡單的HTML模板引擎的詳細內容。更多資訊請關注PHP中文網其他相關文章！
