常用的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 相关文章推荐
javascript 时间比较实现代码
Oct 28 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
JS模板实现方法
Apr 03 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
vue中注册自定义的全局js方法
Nov 15 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
fgetcvs在linux的问题
2012/01/15 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
JavaScript中的Array对象使用说明
2011/01/17 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
python多重继承新算法C3介绍
2014/09/28 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
化工机械应届生求职信
2013/11/04 职场文书
安全教育感言
2014/03/04 职场文书
开业主持词
2014/03/21 职场文书
丧事主持词大全
2014/04/02 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
酒桌上的开场白
2015/06/01 职场文书