来分享一个我本身写的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...没什么好说的，提早祝你们新年大吉吧。