使用artTemplate模板开发网站（node.js + express环境）

本文详细说明了如何利用artTemplate模板引擎开发网站，主要是搭配node.js、express环境进行讲解。同时在文章开头会简单介绍了模板、模板引擎概念，以及artTemplate模板引擎的发展史，比较熟悉模板、模板引擎的读者可以跳过这部分。artTemplate的语法将放在文章最后稍作说明，因为语法不是本文的重点所在，可以参考其它文章详细了解语法知识。

为什么要写作这篇文章？

在学习artTemplate模板时，大家自然而然地想到参考artTemplate官方公布的文档，也就是托管在GitHub中的项目的README。然而README中的讲解对于初次接触artTemplate，尤其是对初次接触模板引擎的初学者来说，略显深奥。本文的宗旨，就是详细地描述出使用artTemplate的具体步骤和做法，使初学者可以迅速地看到使用artTemplate所能达到的效果，为进一步学习和使用模板引擎作铺垫。

本文只是将许多参考资料加以整理而已，并不包含全新的思想等。本文中的许多例子，包括文字说明、代码等，也都是引用网络上的现成的。引用较多，在文章最后有列出主要的参考文章。

目录

• 模板与模板引擎的概念

• artTemplate模板引擎

• 作为前端引擎的artTemplate的使用方法

• 作为后端引擎的artTempalte的使用方法（搭配node.js）

• artTemplate搭配express使用

• artTemplate的语法

模板与模板引擎的概念

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎会生成一个标准的HTML文档。模板引擎不属于特定技术领域，它是跨领域跨平台的概念。在Asp下有模板引擎，在PHP下也有模板引擎，在C#下也有，甚至JavaScript、WinForm开发都会用到模板引擎技术。

模板引擎按实现方式，可以分类“置换型引擎 ”、“解释型引擎 ”、“编译型引擎 ”三类。
置换型引擎只是将指定模板内容（字符串）中的特定标记（子字符串）替换一下便生成了最终需要的业务数据，它实现简单，但其效率低下，无法满足高负载的应用需求。
模板引擎按运行在客户端还是运行在服务器端，可以分为“前端引擎”、“后端引擎”两类。

模板引擎可以让（网站）程序实现界面与数据分离，这就大大提升了开发效率，良好的设计也使得代码重用变得更加容易。我们司空见惯的模板安装卸载等概念，基本上都和模板引擎有着千丝万缕的联系。模板引擎不只是可以让你实现代码分离（业务逻辑代码和用户界面代码），也可以实现数据分离（动态数据与静态数据），还可以实现代码单元共享（代码重用），甚至是多语言、动态页面与静态页面自动均衡（SDE）等等与用户界面可能没有关系的功能。

artTemplate模板引擎

artTemplate是一款性能卓越的 javascript 模板引擎。它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。除了性能优势外，调试功能也值得一提。模板调试器可以精确定位到引发渲染错误的模板语句，解决了编写模板过程中无法调试的痛苦，让开发变得高效，也避免了因为单个模板出错导致整个应用崩溃的情况发生。

artTemplate引擎 原本是这原本是腾讯内部公用组件之一，现已在MIT、BSD、GPL协议下开源，广大群众都可以使用了。

artTemplate引擎属于“前端引擎”同时又属于“后端引擎”，还支持预编译。

目前artTemplate的版本是3.0.3，可以从https://github.com/yourcaptai... 获得源码（forked from aui/artTemplate）。

作为前端引擎的artTemplate的使用方法

artTemplate作为前端引擎使用，上手特别快。
主要步骤有，下载template.js，制作模板，渲染模板。接下来一一详细说明。

首先需要下载：
template.js (简洁语法版, 2.7kb)

然后是创建一个html文件，比如创建一个名为sample.html的文件。
我们将在其中嵌入模板。
该html文件可以比较简单如下，在头文件中引用刚刚下载的template.js（注意引用路径须根据你的环境下该文件所存放的路径进行适当调整），然后再正文中放置一个id为content的div标签（也可以是其它块标签），用来存放接下来根据模板动态生成的html内容。

然后是制作模板：
本例使用一个type=”text/html”的script标签存放模板，<script>

将模板内容放到<script>后面你将看到不将模板内容放到<script>

这样sample.html将变为如下样子

然后是渲染模板的工作
即将数据等应用到模板上，以得到最终显示的效果（html文档）。

渲染模板的代码如下：

var data = {
title: '标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById(‘content’).innerHTML = html;

渲染代码中用到了template(id, data)方法，该方法是在template.js文件中定义的。
template(id, data) 方法根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。
如果没有 data 参数，那么将返回一渲染函数。
此时知道为什么要把模板放在<script>标签中了吧，因为渲染模板时，template可以根据<script>标签的id来查找模板啦。

这样sample.html将变为如下样子

然后在浏览器中打开sample.html，就会看到由artTemplate根据给定的数据将模板渲染成功的样子了。
http://aui.github.io/artTempl...

作为后端引擎的artTempalte的使用方法（搭配node.js）

artTemplate不仅可以作为前端引擎，还可以作为后端引擎使用。
artTemplate是出色的javascript引擎，搭配出色的javascript运行时环境node.js一起使用，将会非常顺畅。
所以要求读者需掌握node.js的基础知识。
本小节将详细说明node.js环境下artTemplate的使用方法，包括安装node.js、创建工作区、初始化工作区、使用npm安装NodeJS版artTemplate、创建http服务器框架、编写artTemplate模板、渲染模板

安装node.js 和 npm

可参考官方文档：https://nodejs.org/en/download/
安装最新版的node.js时会自动同时安装npm。
此处读者需掌握node.js和npm基础知识

创建工作区
创建工作区，就是指定一个空文件夹，作为工作区。 假定我们的工作区的目录名叫“myWork”，MS windows操作系统下，可以放到公共文档目录下“C:UsersPublicDocumentsmyWork”，Linux等操作系统下请自行在可用的目录下创建“myWork”文件夹。
然后进入工作区，即进入“myWork”文件夹。

初始化工作区

进入工作区，即进入“myWork”文件夹，然后执行以下命令，依据提示填入信息即可。MS Windows下可在命令行工具中进行。Linux下请注意确认是否需要root权限。
此处读者需掌握node.js和npm基础知识

npm init

执行完毕后，工作区下会出现一个package.json文件。

使用npm安装NodeJS版artTemplate
此处读者需掌握node.js和npm基础知识
进入工作区，即进入“myWork”文件夹，然后执行以下命令。MS Windows下可在命令行工具中进行。Linux下请注意确认是否需要root权限。

npm install art-template --save

执行完毕后，工作区下会出现一个node_modules文件夹。

创建http服务器框架
然后我们创建一个最简单的http服务器框架。
此处读者需掌握node.js和npm基础知识

进入工作区，即进入“myWork”文件夹，然后执行以下命令。MS Windows下可在命令行工具中进行。
然后新建文件：server.js
编写代码如下：

var http = require(“http”);
var os = require(“os”);
http.createServer(function(request, response) {
    console.log(“New request arrived.”);
    response.end();
}).listen(3000);
console.log(“Server is running, listening on port 3000….”);

在Windows命令行下，进入工作区，执行 node server.js ，服务器就启动了。
此时在本地机器上使用浏览器访问http://localhost:3000将不会收到任何返回信息，不过服务器端的命令行工具上会显示“New request arrived.”字样。
按Ctl+C退出服务器

编写artTemplate模板

在工作区下，创建index.html，并将如下代码输入index.html，并保存。
其中<ul>标签中的内容，就是模板代码。

 

     

          

               {{each list}}
               
编号：{{$value.id}}   姓名：{{$value.name}}
               {{/each}}
          
     

渲染模板

现在，我们要改造刚才创建的创建http服务器框架。在response.end()调用之前，加上渲染模板的代码，使得服务器框架代码变为如下的样子。

var http = require(“http”);
var os = require(“os”);
http.createServer(function(request, response) {
console.log(“New request arrived.”);var template = require(‘art-template’);
     //数据
     var data = {list: [{id:’1′, name:’张三’}, {id:’2′, name:’李四’}]};
     //渲染模板
     var html = template(‘./index’, data);

response.writeHead(200, {“Content-Type”: “text/html”});
response.write(html);
response.end();
}).listen(3000);
console.log(“Server is running, listening on port 3000….”);

还记得template(id, data)方法吗？这是在前端DOM环境下的用法。 其实在NodeJS环境下，它就相当于template(filename, data)了，可以将需要渲染的模板文件名当作路径传给它的第一个参数。

在Windows命令行下，进入工作区，执行 node server.js ，服务器就启动了。
此时在本地机器上使用浏览器访问http://localhost:3000将会看到Html输出了，服务器端的命令行工具上同时也会显示“New request arrived.”字样。

按Ctrl+C退出服务器

artTemplate搭配express使用

express框架是由javascript语言开发的，基于Node.js平台的，快速、开放、极简的web开发框架。

安装express

express中文网上有详尽的安装手册，可以参考：http://www.expressjs.com.cn/s...

改造app.js

app.js是express的主要文件，这个文件里包含了指定模板引擎、指定视图文件默认路径的代码。需要将指定模板引擎的代码改为指定用art-template引擎。视图文件默认路径保持不变，因此无需改动。
以

     //——————————————start 
     //——————————————end  

围起来的区域，是新增的内容。
代码app.set(‘view engine’, ‘jade’); 这一行是app.js默认的内容，需要注释掉，因此在前面加上了//注释符。
代码最后的“app.listen(3000);”必须加上，否则服务启动后将不会监听任何端口。
express3.0以上版本默认框架中不再包含监听端口的代码了。

//app.js
 
var express = require(‘express’);
var path = require(‘path’);
var favicon = require(‘serve-favicon’);
var logger = require(‘morgan’);
var cookieParser = require(‘cookie-parser’);
var bodyParser = require(‘body-parser’);//——————————————start
//引用artTemplate模块
var template = require(‘art-template’);
//——————————————end

var routes = require(‘./routes/index’);
var users = require(‘./routes/users’);var app = express();
// view engine setup
app.set(‘views’, path.join(__dirname, ‘views’));
//——————————————start
//用art-template引擎替换默认的jade引擎
//app.set(‘view engine’, ‘jade’);
template.config(‘base’, ”);
template.config(‘extname’, ‘.html’);
app.engine(‘.html’, template.__express);
app.set(‘view engine’, ‘html’);
//——————————————end

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, ‘public’, ‘favicon.ico’)));
app.use(logger(‘dev’));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, ‘public’)));

app.use(‘/’, routes);
app.use(‘/users’, users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error(‘Not Found’);
err.status = 404;
next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get(‘env’) === ‘development’) {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render(‘error’, {
message: err.message,
error: err
});
});
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render(‘error’, {
message: err.message,
error: {}
});
});

module.exports = app;

app.listen(3000);

编写artTemplate模板

在工作区下，进入express文件夹中的views子文件夹，创建index.html，并将如下代码输入index.html，并保存。

注意，views文件夹下会有index.jade等三个后缀是.jade的文件存在，可以忽视它们。因为express默认支持的模板引擎是jade，所以初始化的框架中的模板是以.jade结尾的文件。也可以删除它们。

其中<ul>标签中的内容，就是模板代码。

 

     

          

               {{each list}}
               
编号：{{$value.id}}   姓名：{{$value.name}}
               {{/each}}
          
     

渲染模板

express默认访问index路由。我们需要在index路由方法中，渲染模板。

进入routes文件夹，打开index.js，增加渲染模板的代码，如下：

var express = require(‘express’);
var router = express.Router();
 
router.get(‘/’, function(req, res, next) {
 
     //数据
     var data = {
     title: ‘国内要闻’,
     time: (new Date).toString(),
     list: [
          {
               id: ‘1’,
               name: ‘张三’
          },
          {
               id: ‘2’,
               name: ‘李四’
          }
     ]
     };
 
     //渲染模板
     res.render(‘index’, data);
 
});
 
module.exports = router;

代码中的res.render(‘index’, data)调用，会调用artTemple模块中的template.__express方法，并传入模板文件名、数据。
template.__express方法是在app.js中注册给express框架的。

在Windows命令行下，进入工作区，执行 node app.js ，服务器就启动了。
此时在本地机器上使用浏览器访问http://localhost:3000将会看到Html输出了，服务器端的命令行工具上同时也会显示“New request arrived.”字样。

按Ctl+C退出服务器

artTemplate的语法

以下是语法的简单说明。
简洁语法 —— artTemplate的开发者推荐使用简洁语法，简单实用，利于读写。
template.js (简洁语法版, 2.7kb)
{{if admin}}
{{include 'admin_content'}}{{each list}}

{{$index}}. {{$value.user}}

{{/each}}
{{/if}}

简洁语法详细说明：https://github.com/aui/artTem...

原生语法
template-native.js (原生语法版, 2.3kb)
<%if (admin){%>
<%include('admin_content')%><%for (var i=0;i

<%=i%>. <%=list[i].user%>

<%}%>
<%}%>

原生语法详细说明：https://github.com/aui/artTem...

后记

本文是依据作者的实践经验整理而成。
作者的开发环境如下

• windows 7 64bit 中文版

• node.js 0.12.7

• npm 2.11.3

• express 4.13.1

文中的代码如在读者本地无法运行，请检查运行环境与作者的是否一致，不一致的话，请参考各工具版本间的变化，对代码加以修正。

如发现文中错误还请不吝赐教。

作者联系方式：[email protected] 袁艾青

参考资料

artTemplate的Github托管
JS模板引擎介绍搜集
高性能JavaScript模板引擎原理解析
百度百科-模板引擎
为Express开发模板引擎