来分享一个我自己写的HTML模板引擎，Leopard

happyhuangjinjin 发布于2019-08-26 11:41 / 2744人阅读

摘要：背景本着造轮子的初衷，我花了两天时间写了一个基于字符串的模板引擎，取名叫豹，，希望它能像豹子一样灵活敏捷。之前使用过的模板有与后来改名叫。引擎内置了两个过滤器，与。同时支持自定义过滤器，可以使用来全局注册一个过滤器。

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) { %>" +
  "<%= nickname | capitalize %>" +
  "<% } else { %>" +
  "<%= realname | capitalize %>" +
  "<% } %>"

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...没什么好说的，提前祝大家新年大吉吧。

服务器托管混合云我一个跳转代码我自己用的代码 html是谁写的 html写的if

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107380.html

retrofit - 收藏集 - 掘金

摘要：一本适合基础入门的中文翻译书掘金中文翻译版本书是对所写一书的中文翻译版本，仅供交流学习使用，严禁商业用途。我们在中使用监测事件掘金源码解析掘金看看调用的代码又是什么抱着一贯的好奇，点进去看看。一本适合 RxJava 基础入门的中文翻译书 - Android - 掘金RxJava Essentials 中文翻译版本书是对Ivan.Morgillo所写一书的中文翻译版本，仅供交流学习使...

Fourierr 2019-06-25 11:14 评论0 收藏0
#yyds干货盘点#数据可视化界的小公主：cutecharts，入门 + 实战应用

这是我参与11月更文挑战的第13天。今天给大家分享的这篇文章是19年写的，当时pyecharts作者陈老师和我分享了他们最新开发的动漫风格可视化库：cutecharts，我当即体验了下，效果确实杠杠的，可爱好看精炼，今天回顾了下，所有代码依旧能跑通（在Python 3.10上，19年写的时候环境应该是在Python3.7）。如果本文，或者历史发布文章对你学习有所帮助，请给我一个免费的点赞；如果...

番茄西红柿 2021-11-25 09:43 评论0 收藏2637
[聊一聊系列]聊一聊前端模板与渲染那些事儿

摘要：欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面不仅仅是代码作为现代应用，的大量使用，使得前端工程师们日常的开发少不了拼装模板，渲染模板。我们今天就来聊聊，拼装与渲染模板的那些事儿。一改俱改，一板两用。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog...

UCloud 2019-08-19 18:45 评论0 收藏0
[聊一聊系列]聊一聊前端模板与渲染那些事儿

摘要：欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面不仅仅是代码作为现代应用，的大量使用，使得前端工程师们日常的开发少不了拼装模板，渲染模板。我们今天就来聊聊，拼装与渲染模板的那些事儿。一改俱改，一板两用。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog...

Yangder 2019-08-01 15:25 评论0 收藏0
[聊一聊系列]聊一聊前端模板与渲染那些事儿

摘要：欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面不仅仅是代码作为现代应用，的大量使用，使得前端工程师们日常的开发少不了拼装模板，渲染模板。我们今天就来聊聊，拼装与渲染模板的那些事儿。一改俱改，一板两用。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog...

褰辩话 2019-06-24 17:50 评论0 收藏0