原文地址:
JavaScript模板引擎简介
现状
好吧,悲剧的是,JavaScript的前端模板引擎多如牛毛,让人眼花缭乱, 以致于还有人做一个。 但大致来说,js的模板引擎可以分为两大类: 一类是“嵌入式”的,意思是说你可以将js直接写在模板里面,从而实现一些复杂的渲染逻辑; 另一类是“无逻辑(Logic-less)”的,这种模板引擎的哲学是模板应当同逻辑尽可能的分离, 因此,你不能在模板中随意加入js代码,而只能利用模板引擎本身提供的机制来实现一些简单的功能。
我选择了几个个人觉得比较有意思或者比较流行的js模板引擎(大部分是Logic-less类型的),下面来一一介绍下。
说起来,mustache其实是一套与语言无关的模板系统规范,有多种的语言的实现,包括js。 由于用其写成的模板中大量使用{
,倒过来看像胡子,所以取名mustache。 来看看demo:
模板:
{ {header}}
{ {#bug}}{ {/bug}}{ {#items}} { {#first}}
The list is empty.
{ {/empty}}数据:
{ "header": "Colors", "items": [ {"name": "red", "first": true, "url": "#Red"}, {"name": "green", "link": true, "url": "#Green"}, {"name": "blue", "link": true, "url": "#Blue"} ], "empty": false}
渲染结果:
Colors
mustache是logic-less的,所以其一大特点是模板中没有任何if,for结构, 而是通过数据的值来实现分支和循环的。这种分离带来的好处是模板清晰,易于维护。
handlebars, 是一种胡子的样式,从名字你就能猜出,它肯定和mustache有联系。 是的,handlebars的模板与mustache的兼容,可直接使用,并且handlebars提供了更多的功能。
handlerbars最大的特点是,它的模板是可以预先编译的。编译过程可以在浏览器端, 甚至还可以通过node.js在服务器端进行。这样做的好处是,大大提高了模板渲染时的性能, 而且handlebars在浏览器运行时的库依赖也可以减小。
另外,handlebars还在模板中支持一些新的语法结构。
hogan是来自于twitter的开源模板引擎,品质自然也不会差。同handlebars一样, hogan兼容mustache的规范,可以直接使用mustache的模板,而且也支持对模板的编译。
icanhaz是另一个基于mustache的模板引擎,icanhaz的一大特性是, 可以自动扫描并绑定模板代码,这样,你就不用显式的调用渲染函数了。
Demo:
模板:
渲染代码:
// I Can Haz User?var user = ich.user(user_data_object)
在demo中,icanhaz自动导入的模板,并根据其id,在ich下生成同名的对象以供调用。
dust的语法不兼容的mustache,但有它自己的一些特点,官方文档中说明如下。
- 异步/流式操作
- 浏览器/node兼容
- 增强的mustache/ctemplate语法
- 干净,底层的API
- 高性能
- 模板可组合
linkedin还选用它做为其正式的前端模板引擎()
但dust貌似很久没有更新了,一直停留在0.3版,最近的一次更新已经是在1年前了。
John Resig是jQuery的创建者,这位大牛写了一个微型的模板引擎,很有点意思:
// Simple JavaScript Templating// John Resig - http://ejohn.org/ - MIT Licensed(function(){ var cache = {}; this.tmpl = function tmpl(str, data){ // Figure out if we're getting a template, or if we need to // load the template - and be sure to cache the result. var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) : // Generate a reusable function that will serve as a template // generator (and which will be cached). new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" + // Introduce the data as local variables using with(){} "with(obj){p.push('" + // Convert the template into pure JavaScript str .replace(/[\r\t\n]/g, " ") .split("<%").join("\t") .replace(/((^|%>)[^\t]*)'/g, "$1\r") .replace(/\t=(.*?)%>/g, "',$1,'") .split("\t").join("');") .split("%>").join("p.push('") .split("\r").join("\\'") + "');}return p.join('');"); // Provide some basic currying to the user return data ? fn( data ) : fn; };})();
模板的例子:
模板里还可以嵌入js代码:
这个模板引擎实现的大致原理是:
- 把传入的模板中的静态文本,根据特定的标识符拆分为若干的片断,并压入数组中
- 将模板中的js代码解析出来,并在压入相关静态文本前执行,以实现渲染逻辑
- 将模板中的变量通过with展开为传入数据对象的对应值,并压入数组中
- 最后通过join函数一并输出最终渲染结果
而且,它还支持缓存和预编译哦,是不是很巧妙啊?