常用的JavaScript模板引擎介绍_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;

时间: 2024-08-03 03:26:14

常用的JavaScript模板引擎介绍_javascript技巧的相关文章

常用的JavaScript模板引擎介绍

这篇文章主要介绍了常用的JavaScript模板引擎介绍,本文介绍了8款常用JavaScript 模板引擎,着重讲解了artTemplate模板引擎,需要的朋友可以参考下     最近工作内容慢慢接近我的理想化(web前端),所以关注比较多的是前端性能!后台同事介绍使用ajax模板引擎,提高渲染速度! 下面介绍几款 JavaScript 模板引擎 1. Mustache 基于javascript 实现的模板引擎,类似于 Microsoft's jQuery template plugin,但更简

JavaScript模板入门介绍_javascript技巧

比如要在一个列表中利用ajax插入一个li的时候,我会直接把数据跟html标签拼接成一句完整的html,然后插入到ul中.无论数据是从服务器端拿回的,或者是从用户的input输入中拿到的--无论哪种方法都是一样. 这个拼接过程放在JavaScript文件中,显得非常不优雅.如果还把style也放在JavaScript中,那数据.结构还有样式整个就是一锅粥了,要维护这样的代码会让人想自杀.最过分的就是把页面上最终要生成的HTML都直接放在服务器端,ajax吐出数据就包含了<li>标签,这样的页面

详解Javascript模板引擎mustache.js_javascript技巧

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

常用的JavaScript验证正则表达式汇总_javascript技巧

下面都是我收集的一些比较常用的正则表达式,因为平常可能在表单验证的时候,用到的比较多.特发出来,让各位朋友共同使用.呵呵. 匹配中文字符的正则表达式: [u4e00-u9fa5]评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^x00-xff]评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 匹配空白行的正则表达式:ns*r评注:可以用来删除空白行 匹配HTML标记的正则表达式:< (S*?)[^>]*>.*?|<

JavaScript 命名空间 使用介绍_javascript技巧

使用过Java.C#的同学对命名空间非常的熟悉,在复杂的系统中会有N多的函数.对象,语言提供的.架构预定义的,这么多的函数和对象,由于编程规范要求起有实际意义的名字,难免会重名发生错误调用,而有了命名空间烦恼就没有了,不但可以分类组织函数与对象,还可以形成隔离,解决重名问题. 使用JavaScript就没有这么舒服了,Javascript只有函数作用域,什么块儿啊.神马文件啊统统都认为是一个命名空间的,有时候因为一些重名问题导致的错误让人莫名其妙,难以调试解决. 一个简单的例子 复制代码 代码如

javascript 事件处理程序介绍_javascript技巧

1.DOM0级事件处理程序 将一个函数值给一个事件处理程序属性. 例如: 复制代码 代码如下: var btn = document.getElementById("myBtn"); btn.onclick = funtion(){ alert(this.id); //"myBtn" } 删除事件,btn.onclick = null; -----------------------------------------------------------------

开源的javascript项目Kissy介绍_javascript技巧

kissy简介 kISSY是什么? KISSY是一个开源的javascript项目,其主体是一个前端UI开发框架,即KissyUI.本文所述的kissy是仅指其内核部分的kissy.js中的语言与框架设计思想.KISSY项目的开源网站是:http://kissyteam.github.com/ kissy怎么使用呢? 尽管在KissyUI向kissy内核化的过程中,我们提出了一些新的概念与框架模型,但事实上,我们并未改变KissyUI的任何使用惯例.从代码上来看,kissy.js和lang.js

javascript设计模式 接口介绍_javascript技巧

这本书中第一个重要的内容就是接口. 大家对接口应该都不陌生,简单的说接口就是一个契约或者规范.在强类型的面相对象语言中,接口可以很容易的实现.但是在javascript中并没有原生的创建或者实现接口的方式,或者判定一个类型是否实现了某个接口,我们只能利用js的灵活性的特点,模拟接口. 在javascript中实现接口有三种方式:注释描述.属性验证.鸭子模型. note:因为我看的是英文书,翻译水平有限,不知道有些词汇如何翻译,大家只能领会精神了. 1. 注释描述 (Describing Inte

JavaScript 高级语法介绍_javascript技巧

(function($){})(jQuery); 其实比较简单,要理解几个概念: 1.(),在JavaScript里()表示执行一个方法,如: function x(){   alert("xxx"); } var a = x;   // 没有调用,a 是一个function var a = x(); //调用了函数,a 的值是调用的结果:undefined 2.jQuery是一个jQuery对象,表示调用函数时,传入一个参数是jQuery对象. 这个没什么好说的 3.(functio