JavaScript 模板引擎对比与 artTemplate 实战指南

随着工作重心逐渐转向 Web 前端领域，前端性能优化成为关注焦点。据后台同事建议，采用 Ajax 配合模板引擎可显著提升页面渲染速度。

主流 JavaScript 模板引擎简介

以下将介绍几款主流的 JavaScript 模板引擎。

1. Mustache

Mustache 是一个基于 JavaScript 实现的模板引擎，其功能类似于 Microsoft 的 jQuery template 插件，但设计更加简洁易用。

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.js 环境。

6. Hogan.js

Hogan.js 是由 Twitter 开发的 JavaScript 模板引擎。

7. Handlebars

Handlebars 是一个基于 JavaScript 的页面模板库。

artTemplate 特性与优势

8. artTemplate

artTemplate 是新一代 JavaScript 模板引擎，在 V8 引擎中的渲染效率接近 JavaScript 的性能极限。在 Chrome 下的渲染效率测试中，其速度分别是知名引擎 Mustache 与 micro tmpl 的 25 倍和 32 倍。该引擎支持调试功能，若渲染过程中出现错误，调试器可精确定位到产生异常的模板语句，从而解决前端模板难以调试的问题。

此外，artTemplate 提供独有的模板编译工具，可将前端模板编译为不依赖模板引擎运行的 JS 文件。这使得前端模板能够突破浏览器限制，实现类似后端模板的文件与目录组织、按需加载及 include 嵌套等功能，且整个功能仅包含 2kb（gzip 压缩后）。

该插件的作者与 artDialog 的作者糖饼为同一人。

作者博客地址：http://www.planeart.cn/

artTemplate 使用示例

引入引擎

<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;