常用的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 替换Html标签实现代码
Oct 14 Javascript
javascript 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
iview实现图片上传功能
Jun 29 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安全上传图片的方法
2015/03/21 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
js 页面执行时间计算代码
2009/03/04 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
python爬虫headers设置后无效的解决方法
2017/10/21 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
基于python实现高速视频传输程序
2019/05/05 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
python中下标和切片的使用方法解析
2019/08/27 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
PyQt5实现简单的计算器
2020/05/30 Python
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
安全标准化汇报材料
2014/02/03 职场文书
陈欧的广告词
2014/03/18 职场文书
亲子活动总结
2014/04/26 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
教师自我剖析材料
2014/09/29 职场文书
会议接待欢迎标语
2014/10/08 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
教师思想工作总结2015
2015/05/13 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书