常用的JavaScript模板引擎介绍


Posted in Javascript onFebruary 28, 2015

最近工作内容慢慢接近我的理想化(web前端),所以关注比较多的是前端性能!后台同事介绍使用ajax模板引擎,提高渲染速度!

下面介绍几款 JavaScript 模板引擎

1. Mustache

基于javascript 实现的模板引擎,类似于 Microsoft's jQuery template plugin,但更简单易用!

2. doT.js

doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎。

3. jSmart

jSmart 是著名的 PHP 模板引擎 Smarty 的 JavaScript 移植版本。

4. dom.js

dom.js 是一款可用在客户端和服务器端的 JavaScript 模板引擎

5. jade

Jade是受Haml的影响以JavaScript实现用于node的高性能模板引擎。

6. Hogan.js

来自 Twitter 的 JavaScript 模板引擎。

7. Handlebars

Handlebars 是一个 JavaScript 的页面模板库

8. artTemplate

artTemplate 是新一代 javascript 模板引擎,它在 v8 中的渲染效率可接近 javascript 性能极限,在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。引擎支持调试。若渲染中遇到错误,调试器可精确定位到产生异常的模板语句,解决前端模板难以调试的问题。

独有模板编译工具,它能把前端模板编译成不依赖模板引擎运行的JS文件,让前端模板可以突破浏览器的限制,实现像后端模板一样按文件与目录的方式组织、按需加载、include嵌套等。这一切都在 2kb(gzip) 中实现!

也许你会觉得这个插件名似曾相识,没错!这个也是artDialog的作者糖饼

博客地址:http://www.planeart.cn/

引用引擎

<script src="js/template.js"></script>

编写模板

<script id="test" type="text/html">

//使用一个type="text/html"的script标签存放模板:

<h1><%=title%></h1>

<ul>

  <%

    for(i=0;i<list.length;i++){%>

      <li>itemL <%=i+1%>:<%=list[i]%></li>

    <%}%>

</ul>

//模板逻辑语法开始与结束的界定符号为<% 与%>,若<%后面紧跟=号则输出变量内容

</script>

渲染模板

var data = {

    title: '标签',

    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']

};

var html=template.render("test",data);

document.getElementById('content').innerHTML = html;
Javascript 相关文章推荐
js 目录列举函数
Nov 06 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
JavaScript操作Cookie详解
Feb 28 #Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 #Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 #Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 #Javascript
浅谈JavaScript数据类型及转换
Feb 28 #Javascript
javaScript基础语法介绍
Feb 28 #Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 #Javascript
You might like
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
php面向对象重点知识分享
2019/09/27 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
firefo xml 读写实现js代码
2009/06/11 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
详解Python self 参数
2019/08/30 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
个人优缺点自我评价
2014/01/27 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
安全保证书范文
2014/04/29 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server