当前位置: 首页 > news >正文

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

Leopard

背景

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

相关文章:

  • VS2010下静态链接FreeImage
  • 网站开放平台发布-开创应用个人创业
  • python自动化学习笔记(八)
  • 毕业设计记录(四)一个form里有两个image的input提交按钮,servlet咋处理?
  • 关联容器
  • Hibernate注解方式的抓取策略
  • GNU gcc package link
  • 你不知道的JavaScript-原型
  • socket编程入门教程(三)TCP原理:5、TCP的三次握手three-way handshake
  • 构建二叉树进行数值数组的去重及优化
  • MySQL 存储引擎
  • 组件化方案调研
  • Android ListView 长按列表弹出菜单
  • 此地址使用了一个通常用于网络浏览以外的端口。出于安全原因,Firefox 取消了该请求...
  • Android平台游戏开发引擎使用指引
  • C++入门教程(10):for 语句
  • Java编程基础24——递归练习
  • k8s 面向应用开发者的基础命令
  • supervisor 永不挂掉的进程 安装以及使用
  • Synchronized 关键字使用、底层原理、JDK1.6 之后的底层优化以及 和ReenTrantLock 的对比...
  • 官方新出的 Kotlin 扩展库 KTX,到底帮你干了什么?
  • 看域名解析域名安全对SEO的影响
  • 设计模式(12)迭代器模式(讲解+应用)
  • 通过几道题目学习二叉搜索树
  • 微信公众号开发小记——5.python微信红包
  • 限制Java线程池运行线程以及等待线程数量的策略
  • 在weex里面使用chart图表
  • ​520就是要宠粉,你的心头书我买单
  • ​批处理文件中的errorlevel用法
  • ​中南建设2022年半年报“韧”字当头,经营性现金流持续为正​
  • #AngularJS#$sce.trustAsResourceUrl
  • #调用传感器数据_Flink使用函数之监控传感器温度上升提醒
  • (1)常见O(n^2)排序算法解析
  • (3)STL算法之搜索
  • (NSDate) 时间 (time )比较
  • (大众金融)SQL server面试题(1)-总销售量最少的3个型号的车及其总销售量
  • (附源码)小程序 交通违法举报系统 毕业设计 242045
  • (九十四)函数和二维数组
  • (免费分享)基于springboot,vue疗养中心管理系统
  • (七)Java对象在Hibernate持久化层的状态
  • (转)LINQ之路
  • *(长期更新)软考网络工程师学习笔记——Section 22 无线局域网
  • .NET C# 使用 SetWindowsHookEx 监听鼠标或键盘消息以及此方法的坑
  • .NET CF命令行调试器MDbg入门(二) 设备模拟器
  • .NET DataGridView数据绑定说明
  • .net连接MySQL的方法
  • .Net中wcf服务生成及调用
  • .so文件(linux系统)
  • @ModelAttribute 注解
  • @RequestParam @RequestBody @PathVariable 等参数绑定注解详解
  • [ vulhub漏洞复现篇 ] Grafana任意文件读取漏洞CVE-2021-43798
  • [AR]Vumark(下一代条形码)
  • [ArcPy百科]第三节: Geometry信息中的空间参考解析
  • [C#] 基于 yield 语句的迭代器逻辑懒执行
  • [C++]C++类基本语法