来分享一个我自己写的HTML模板引擎,Leopard
发布于 5 个月前 作者 stop2stare 1552 次浏览 来自 分享

Leopard Build Status codecov npm

背景

Leopard, yet another HTML template engine!

本着造轮子的初衷,我花了两天时间写了一个基于字符串的HTML模板引擎,取名叫“豹”,Leopard,希望它能像豹子一样灵活敏捷。

之前使用过的模板有ejsjade(后来改名叫pug)。前者设计得很容易上手,而且语法跟HTML比较接近。后者让人望而生畏,而且我没记错的话,jade对缩进有严格的要求,因为它是基于缩进来判断标签层级关系的,这样的设计让人编写的时候几乎是如履薄冰如写Python(我的游标卡尺呢???),所以我当时还是一直用ejs来开发的。

所以,这次我还是大致按照ejs的语法规范来实现Leopard

下载与使用

这里是github地址,欢迎大家看完之后在issue里提建议与bug,同时也欢迎提PR。

大家也可以通过npm来下载Leopard

$ npm install leopard-template

特性

目前而言,Leopard实现了以下功能点:

  • 插值:包括文本插值与HTML插值
  • 逻辑判断:ifelse
  • 循环:for循环,可以用来循环输出模板
  • 过滤器:支持在插值里加入过滤器,同时过滤器可以串联使用。引擎内置了两个过滤器,capitalizereverseLeopard同时支持自定义过滤器,可以使用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…没什么好说的,提前祝大家新年大吉吧。

9 回复

哈哈,早些年我也造了一个轮子, 各大html模板引擎各有各的好,唯一一点我不满意的就是都大太了,浏览器上要用,还是小巧一点的好,所以我造了个轮子.不过,我这模块速度可不怎么样. https://github.com/ugrg/jsonView

@ugrg 我都以为这帖子要沉了。。。 不过话说回来,我写这个模板基本上就是造个轮子,在过程中明白原理发现问题。顺便熟悉TDD的开发模式。

支持,向楼主学习 From Noder

mark一下。以前造过一个很简单的,只支持简单的语句的~~

@MrShenSH 哈,凑不要脸地说一句,你们支持归支持,能不能在gayhub给我一颗小星星啊。

UPDATES:

  • 在服务端的时候支持compileFile,可以直接渲染一个模板文件
  • 在渲染同一个模板文件的时候,支持缓存编译出来的Function body,这样可以省去编译的步骤,让渲染更加快速。只需要在初始化Leopard的时候传入参数new Leopard({ cache: true })

其实写到现在已经觉得API设计得有点别扭了,之前已经有过一次大的版本号变更了,估计往后开发了之后还得改动API,有可能是breaking changes。 欢迎大家一起交流,提提PR呀issues呀或者给个小星星呀。

回到顶部