Node 開(kāi)源模板的選擇很多，但推薦像我這樣的老人去用
EJS，有 Classic ASP/PHP/JSP 的經(jīng)驗用起 EJS 來(lái)的確可以很自然，也就是說(shuō)，你能夠在 <%...%> 塊中安排 JavaScript 代碼，利用最傳統的方式 <%=輸出變量%>（另外 <%-輸出變量是不會(huì )對 & 等符號進(jìn)行轉義的）。安裝 EJS 命令如下：
npm install ejsJS 調用
JS 調用的方法主要有兩個(gè)：
[javascript]
view plaincopy<code>ejs.compile(str, options);
// => Function
ejs.render(str, options);
// => str</code>
實(shí)際上 EJS 可以游離于 Express 獨立使用的，例如：
[javascript]
view plaincopyvar ejs = require('')， str = require('fs').readFileSync(__dirname + '/list.ejs', 'utf8');
var ret = ejs.render(str, {
names: ['foo', 'bar', 'baz']
});
console.log(ret);
見(jiàn) ejs.render()，第一個(gè)參數是 模板 的字符串，模板如下。[html]
view plaincopy<% if (names.length) { %>
<ul>
<% names.forEach(function(name){ %>
<li foo='<%= name + "'" %>'><%= name %></li>
<% }) %>
</ul>
<% } %>
names 成了本地變量。
選項參數
第二個(gè)參數是數據，一般是一個(gè)對象。而這個(gè)對象又可以視作為選項，也就是說(shuō)數據和選擇都在同一個(gè)對象身上。
如果不想每次都都磁盤(pán)，可需要緩存模板，設定 options.filename 即可。例如：
[javascript]
view plaincopyvar ejs = require('../')
, fs = require('fs')
, path = __dirname + '/functions.ejs'
, str = fs.readFileSync(path, 'utf8');
var users = [];
users.push({ name: 'Tobi', age: 2, species: 'ferret' })
users.push({ name: 'Loki', age: 2, species: 'ferret' })
users.push({ name: 'Jane', age: 6, species: 'ferret' })
var ret = ejs.render(str, {
users: users,
filename: path
});
console.log(ret);
相關(guān)選項如下：
cache Compiled functions are cached, requires filename
filename 緩存的鍵名稱(chēng)
scope 函數執行的作用域
debug Output generated function body
compileDebug When false no debug instrumentation is compiled
client Returns standalone compiled function
inculde 指令
而且，如果要如
<ul> <% users.forEach(function(user){ %> <% include user/show %> <% }) %></ul>般插入公共模板，也就是引入文件，必須要設置 filename 選項才能啟動(dòng) include 特性，不然 include 無(wú)從知曉所在目錄。
模板：
[javascript]
view plaincopy<h1>Users</h1>
<% function user(user) { %>
<li><strong><%= user.name %></strong> is a <%= user.age %> year old <%= user.species %>.</li>
<% } %>
<ul>
<% users.map(user) %>
</ul>
EJS 支持編譯模板。經(jīng)過(guò)模板編譯后就沒(méi)有 IO 操作，會(huì )非?？?，而且可以公用本地變量。下面例子 user/show 忽略 ejs 擴展名：[html]
view plaincopy<ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul>
自定義 CLOSE TOKEN
如果打算使用 <h1>{{= title }}</h1> 般非 <%%>標識，也可以自定義的。
[javascript]
view plaincopyvar ejs = require('ejs');
ejs.open = '{{';
ejs.close = '}}';
格式化輸出也可以哦。[javascript]
view plaincopyejs.filters.last = function(obj) {
return obj[obj.length - 1];
};
調用[html]
view plaincopy<p><%=: users | last %></p>
EJS 也支持瀏覽器環(huán)境。[html]
view plaincopy<html>
<head>
<script src="../ejs.js"></script>
<script id="users" type="text/template">
<% if (names.length) { %>
<ul>
<% names.forEach(function(name){ %>
<li><%= name %></li>
<% }) %>
</ul>
<% } %>
</script>
<script>
onload = function(){
var users = document.getElementById('users').innerHTML;
var names = ['loki', 'tobi', 'jane'];
var html = ejs.render(users, { names: names });
document.body.innerHTML = html;
}
</script>
</head>
<body>
</body>
</html>
不知道 EJS 能否輸出多層 JSON 對象呢？
對了，有網(wǎng)友爆料說(shuō)，jQ 大神 John 若干年前寫(xiě)過(guò)
20 行的模板，汗顏，與 EJS 相似但短小精悍！
這里順便貼一個(gè)高手寫(xiě)的（
http://www.jiangkunlun.com/2012/05/js_%E6%A8%A1%E6%9D%BF/）：
簡(jiǎn)單實(shí)用的js模板引擎
不足 50 行的 js 模板引擎，支持各種 js 語(yǔ)法：
[html]
view plaincopy<script id="test_list" type="text/html">
<%=
for(var i = 0, l = p.list.length; i < l; i++){
var stu = p.list[i];
=%>
<tr>
<td<%=if(i==0){=%> class="first"<%=}=%>><%==stu.name=%></td>
<td><%==stu.age=%></td>
<td><%==(stu.address || '')=%></td>
<tr>
<%=
}
=%>
</script>
“<%= xxx =%>”內是 js 邏輯代碼，“<%== xxx =%>”內是直接輸出的變量，類(lèi)似 php 的 echo 的作用?！皃”是調用下面 build 方法時(shí)的 k-v 對象參數，也可以在調用 “new JTemp” 時(shí)設置成別的參數名
調用：
[javascript]
view plaincopy$(function(){
var temp = new JTemp('test_list'),
html = temp.build(
{list:[
{name:'張三', age:13, address:'北京'},
{name:'李四', age:17, address:'天津'},
{name:'王五', age:13}
]});
$('table').html(html);
});
上面的 temp 生成以后，可以多次調用 build 方法，生成 html。以下是模板引擎的代碼：
[javascript]
view plaincopyvar JTemp = function(){
function Temp(htmlId, p){
p = p || {};//配置信息，大部分情況可以缺省
this.htmlId = htmlId;
this.fun;
this.oName = p.oName || 'p';
this.TEMP_S = p.tempS || '<%=';
this.TEMP_E = p.tempE || '=%>';
this.getFun();
}
Temp.prototype = {
getFun : function(){
var _ = this,
str = $('#' + _.htmlId).html();
if(!str) _.err('error: no temp!!');
var str_ = 'var ' + _.oName + '=this,f=\'\';',
s = str.indexOf(_.TEMP_S),
e = -1,
p,
sl = _.TEMP_S.length,
el = _.TEMP_E.length;
for(;s >= 0;){
e = str.indexOf(_.TEMP_E);
if(e < s) alert(':( ERROR!!');
str_ += 'f+=\'' + str.substring(0, s) + '\';';
p = _.trim(str.substring(s+sl, e));
if(p.indexOf('=') !== 0){//js語(yǔ)句
str_ += p;
}else{//普通語(yǔ)句
str_ += 'f+=' + p.substring(1) + ';';
}
str = str.substring(e + el);
s = str.indexOf(_.TEMP_S);
}
str_ += 'f+=\'' + str + '\';';
str_ = str_.replace(/\n/g, '');//處理?yè)Q行
var fs = str_ + 'return f;';
this.fun = Function(fs);
},
build : function(p){
return this.fun.call(p);
},
err : function(s){
alert(s);
},
trim : function(s){
return s.trim?s.trim():s.replace(/(^\s*)|(\s*$)/g,"");
}
};
return Temp;
}();
核心是將模板代碼轉變成了一個(gè)拼接字符串的 function，每次拿數據 call 這個(gè) function。
因為主要是給手機（webkit）用的，所以沒(méi)有考慮字符串拼接的效率問(wèn)題，如果需要給 IE 使用，最好將字符串拼接方法改為 Array.push() 的形式。
網(wǎng)友作品：
cocoTemplate附：connect + ejs 的一個(gè)例子。
[javascript]
view plaincopyvar Step = require('../../libs/step'),
_c = require('./utils/utils'),
fs = require('fs'),
ejs = require('ejs'),
connect = require('connect');
exports.loadSite = function(request, response){
var siteRoot = 'C:/代碼存檔/sites/a.com.cn';
// _c.log(request.headers.host);
var url = request.url;
// 如果有 html 的則是動(dòng)態(tài)網(wǎng)頁(yè)，否則為靜態(tài)內容
if(url == '/' || ~url.indexOf('/?') || url.indexOf('.asp') != -1 || url[url.length - 1] == '/'){
var tplPath;
if(url == '/' || ~url.indexOf('/?') || url[url.length - 1] == '/'){
// 默認 index.html
tplPath = siteRoot + request.url + 'default.asp';
}else{
tplPath = siteRoot + request.url.replace(/\?.*$/i,''); // 只需要文件名
}
// 從文件加載模板
Step(function(){
_c.log('加載模板：' + tplPath);
fs.exists(tplPath, this);
}, function(path_exists){
if(path_exists === true)fs.readFile(tplPath, "utf8", this);
else if(path_exists === false) response.end404(request.url);
else response.end500('文件系統異常', '');
},function(err, tpl){
var bigfootUrl, cssUrl, projectState = 0; // 0 = localhot/ 1 = Test Server / 2 = Deployed
switch(projectState){
case 0:
bigfootUrl = "http://127.0.0.1/bigfoot/";
cssUrl = "http://127.0.0.1/lessService/?isdebug=true";
break;
case 1:
bigfootUrl = "http://112.124.13.85:8080/static/";
cssUrl = "/asset/style/";
break;
case 2:
bigfootUrl = "http://localhost:8080/bigfoot/";
break;
}
var sitePath = request.getLevelByUrl(require(siteRoot + '/public/struct')),
first = sitePath[0];
var htmlResult = ejs.render(tpl, {
filename : tplPath,
bigfootUrl: bigfootUrl,
cssUrl : cssUrl,
projectState: projectState,
query_request: request.toJSON(),
request: request,
config: require(siteRoot + '/public/config'),
struct: require(siteRoot + '/public/struct'),
sitePath : sitePath,
firstLevel : first
});
// _c.log(first.children.length)
response.end200(htmlResult);
});
}else{
connect.static(siteRoot)(request, response, function(){
// if not found...
response.writeHead(404, {'Content-Type': 'text/html'});
response.end('404');
});
}
}
