常用的JavaScript模板引擎介绍

最近工作内容慢慢接近我的理想化（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;

赞 (0)

相关推荐

  • 高性能JavaScript模板引擎实现原理详解

    高性能JavaScript模板引擎实现原理详解

    随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来.javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,近一年来在开源社区中更是百花齐放,在 Twitter.淘宝网.新浪微博.腾讯QQ空间.腾讯微博等大型网站中均能看到它们的身影. 本文将用最简单的示例代码描述现有的 javascript 模板引擎

  • laytpl 精致巧妙的JavaScript模板引擎

    laytpl 精致巧妙的JavaScript模板引擎

    laytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统前端引擎的几乎所有功能.所有的变身魔法都由不到1KB的代码创造,这仿佛是一场革命,又或者不是,但毋庸置疑的是,laytpl的确在用最轻量的方式呈现给世人.如果你从未接触这方面的应用,没关系,下面的讲述将会让你迫不及待地选择laytpl,从此更好地把握页面的数据渲染,走上人生巅峰! laytpl优势 •性能卓绝,执行速度比号称性能王的artTemplate.doT还

  • 详解Javascript模板引擎mustache.js

    详解Javascript模板引擎mustache.js

    本文总结它的使用方法和一些使用心得,内容不算很高深,纯粹是入门内容,看看即可.不过要是你还没有用过此类的javascript引擎库,那么本文还是值得你一读的,相信在你了解完它强大的功能和简单用法之后,一定会迫不及待地将之用于你的工作当中. 1. 从一个简单真实的需求讲起 目前公司做了一个统一的开发平台,后台封装了MVC的接口和数据增删改查的接口,前端我自己用bootstrap+手写各类组件的方式弄了一套开发框架:集成了CAS,在CAS的基础上,首先做了一套统一权限管理系统,这个系统是我们开发平台

  • 教你使用javascript简单写一个页面模板引擎

    于是我又想着能不能写一些简单的代码来完善这个模板引擎,又能与其它现有的逻辑协同工作.AbsurdJS本身主要是以NodeJS的模块的形式发布的,不过它也会发布客户端版本.考虑到这些,我就不能直接使用现有的引擎了,因为它们大部分都是在NodeJS上运行的,而不能跑在浏览器上.我需要的是一个小巧的,纯粹以Javascript编写的东西,能够直接运行在浏览器上.当我某天偶然发现John Resig的这篇博客,我惊喜地发现,这不正是我苦苦寻找的东西嘛!我稍稍做了一些修改,代码行数差不多20行左右.其中的

  • node.js 使用ejs模板引擎时后缀换成.html

    这是一个小技巧,看着.ejs的后缀总觉得不爽,使用如下方法,可以将模板文件的后缀换成我们习惯的.html. 1.在app.js的头上定义ejs: 复制代码 代码如下: var ejs = require('ejs'); 2.注册html模板引擎: 复制代码 代码如下: app.engine('html',ejs.__express); 3.将模板引擎换成html: 复制代码 代码如下: app.set('view engine', 'html'); 4.修改模板文件的后缀为.html. 好了,任

  • JavaScript模版引擎的基本实现方法浅析

    模板分离了数据与展现,使得展现的逻辑和效果更易维护.利用javascript的Function对象,一步步构建一个极其简单的模板转化引擎 模板简介 模板通常是指嵌入了某种动态编程语言代码的文本,数据和模板通过某种形式的结合,可以变化出不同的结果.模板通常用来定义显示的形式,能够使得数据展现更为丰富,而且容易维护.例如,下面是一个模板的例子: <ul> <% for(var i in items){ %> <li class='<%= items[i].status %&

  • 浅谈轻量级js模板引擎simplite

    浅谈轻量级js模板引擎simplite

    模板地址:https://github.com/zhangshaolong/simplite欢迎各位提出宝贵意见及贡献代码.特点: 1:代码量少,学习成本低: 2:默认jsp语法标签方式,熟悉jsp的朋友可以直接按照jsp的语法书写模板: 3:使用原生js语法进行逻辑处理,只要熟悉js语法即可直接上手,没有学习成本. 4:支持原生js的所有语法作为代码逻辑片段,支持宽泛的书写格式. 5:支持重定义模板语言的标签符,默认的逻辑标签为<%和%>,默认的属性标签为<%=和%>. 6:支持

  • 探究Javascript模板引擎mustache.js使用方法

    我们将为大家详解Mustache.js轻量级JavaScript模版引擎使用方法. 简单示例 function show(t) { $("#content").html(t); } var view = { title: 'YZF', cacl: function () { return 6 + 4; } }; $("#content").html(Mustache.render("{{title}} spends {{cacl}}", view

  • PHP针对常规模板引擎中与CSS/JSON冲突的解决方法

    本文实例讲述了PHP针对常规模板引擎中与CSS/JSON冲突的解决方法,有一定的实用价值,具体分析如下: 本文主要针对对象为Smarty与Dwoo 在Smarty中经常会出现和CSS/JS的语法存在冲突的情况,因为二者都需要使用大括号{}.虽然可以改Smarty的界定符,但你在一个现存系统中,去修改所有相关代码,是不划算的.解决方法如下: 1. 避免同时出现 通过外部引用的方式避免.问题是避无所避.所以这种情况只适合少量简单的情况. 2. 修改Smarty界定符 3.可以使用Smarty的lit

  • javascript轻量级模板引擎juicer使用指南

    使用方法 编译模板并根据数据立即渲染出结果 juicer(tpl, data); 仅编译模板暂不渲染,返回一个可重用的编译后的函数 var compiled_tpl = juicer(tpl); 根据给定的数据对之前编译好的模板进行渲染 var complied_tpl = juicer(tpl); var html = complied_tpl.render(data); 注册/注销自定义函数(对象) juicer.register('function_name', function); ju

  • JavaScript模板引擎用法实例

    本文实例讲述了JavaScript模板引擎用法.分享给大家供大家参考.具体如下: 这里介绍的这个模板引擎写得短小精悍,非常值得一看 tmpl.js文件如下: // Simple JavaScript Templating // John Resig - http://ejohn.org/ - MIT Licensed (function() { var cache = {}; this.tmpl = function tmpl(str, data) { // Figure out if we'r

随机推荐