一個簡單的HTML模板引擎

之前使用過的模板有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>

相關推薦：

Node.js模板引擎jade實例講解

php實作範本引擎功能的簡單範例

PHP設計模式之基於模板引擎的容器部署框架

以上是一個簡單的HTML模板引擎的詳細內容。更多資訊請關注PHP中文網其他相關文章！