來分享一個我本身寫的HTML模板引擎，Leopard

Leopard

背景

Leopard, yet another HTML template engine!

本着造輪子的初衷，我花了兩天時間寫了一個基於字符串的HTML模板引擎，取名叫「豹」，Leopard，但願它能像豹子同樣靈活敏捷。

以前使用過的模板有ejs與jade（後來更名叫pug）。前者設計得很容易上手，並且語法跟HTML比較接近。後者讓人望而生畏，並且我沒記錯的話，jade對縮進有嚴格的要求，由於它是基於縮進來判斷標籤層級關係的，這樣的設計讓人編寫的時候幾乎是如履薄冰如寫Python（個人遊標卡尺呢？？？），因此我當時仍是一直用ejs來開發的。

因此，此次我仍是大體按照ejs的語法規範來實現Leopard。

下載與使用

這裏是github地址，歡迎你們看完以後在issue裏提建議與bug，同時也歡迎提PR。

你們也能夠經過npm來下載Leopard：

$ npm install leopard-template

特性

目前而言，Leopard實現瞭如下功能點：

• 插值：包括文本插值與HTML插值
• 邏輯判斷：if與else
• 循環：for循環，能夠用來循環輸出模板
• 過濾器：支持在插值里加入過濾器，同時過濾器能夠串聯使用。引擎內置了兩個過濾器，capitalize與reverse。Leopard同時支持自定義過濾器，可使用Leopard.filter(filter, handler)來全局註冊一個過濾器。在過濾器上，Leopard可能跟ejs的不太同，跟Vue的比較類似。

舉個栗子

var Leopard = require('leopard-template')
var leo = new Leopard()

var template = '<% if (isOk) { %>' +
  '<span class=\"nickname\"><%= nickname | capitalize %></span>' +
  '<% } else { %>' +
  '<span class=\"realname\"><%= realname | capitalize %></span>' +
  '<% } %>'

var html = leo.compile(conditions, {
  isOk: false,
  nickname: 'leo',
  realname: 'leopard'
})

// html就是最終編譯成功的的html了，能夠直接經過document的方法渲染到頁面上

性能

其實字符串模板引擎的性能你們都知道的，在如今的硬件條件下，幾乎能夠說是很是快的。（飽受虛擬DOM服務端渲染性能上不去的孩子哭暈在廁所，鄙人的公司項目就是卡在了這裏上不了線）

我作了一個簡單的benchmark，循環輸出50,000個li耗時大概是在60ms左右。固然，Leopard如今還只支持將模板字符串解析編譯成HTML字符串，因此這裏的循環輸出指的是字符串編譯這一環。

# benchmark
$ npm run benchmark

開源

雖說是個造輪子的項目，並且長得跟ejs幾乎一毛同樣，因此也不太可能投入到生產環境中使用（再者說如今都用MVVM框架來開發項目），可是我仍是但願能按照開源項目的規範來開發Leopard。我給Leopard寫了100%覆蓋率的測試用例，每次提交commit也是跑完測試以後經過了才提交，也是但願這個項目不會太水。

# unit test
$ npm run test

# coverage
$ npm run coverage

結語

emmm...沒什麼好說的，提早祝你們新年大吉吧。