一个简单的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;">if</span>与<span style="font-size: 14px;">else</span>

  

  AiPPT模板广场

  AiPPT模板广场-PPT模板-word文档模板-excel表格模板

  147

  查看详情

• 循环：<span style="font-size: 14px;">for</span>循环，可以用来循环输出模板

• 过滤器：支持在插值里加入过滤器，同时过滤器可以串联使用。引擎内置了两个过滤器，<span style="font-size: 14px;">capitalize</span>与<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个<span style="font-size: 14px;">li</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中文网其它相关文章！