登录  /  注册
首页 > web前端 > js教程 > 正文

一个简单的HTML模板引擎

小云云
发布: 2018-02-10 15:00:15
原创
2774人浏览过

之前使用过的模板有ejsjade(后来改名叫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>

  • 循环:<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 = '' +<br>  '<span class='\"nickname\"'></span>' +<br>  '' +<br>  '<span class='\"realname\"'></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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号