常用的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判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 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
用js得到网页中所有的div的id
2020/10/19 Javascript
用js做一个小游戏平台 (一)
2009/12/29 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
python分析作业提交情况
2017/11/22 Python
python Celery定时任务的示例
2018/03/13 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
建筑专业毕业生推荐信
2013/11/21 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
运动会入场词100字
2014/02/06 职场文书
销售经理岗位职责
2015/01/31 职场文书