Node.js的Web模板引擎ejs的入門使用教程
Node 開源模板的選擇很多，但推薦像我這樣的老人去用 EJS，有 Classic ASP/PHP/JSP 的經驗用起 EJS 來的確可以很自然，也就是說，你能夠在 <%...%> 塊中安排 JavaScript 代碼，利用最傳統的方式 <%=輸出變量%>（另外 <%-輸出變量是不會對 & 等符號進行轉義的）。安裝 EJS 命令如下：
npm install ejs
JS 調用
JS 調用的方法主要有兩個：
ejs.compile(str, options); // => Function ejs.render(str, options); // => str
實際上 EJS 可以游離于 Express 獨立使用的，例如：
var ejs = require('')， str = require('fs').readFileSync(__dirname + '/list.ejs', 'utf8');
var ret = ejs.render(str, {
names: ['foo', 'bar', 'baz']
});
console.log(ret);
見 ejs.render()，第一個參數是 模板 的字符串，模板如下。
<% if (names.length) { %>
<ul>
<% names.forEach(function(name){ %>
<li foo='<%= name + "'" %>'><%= name %></li>
<% }) %>
</ul>
<% } %>
names 成了本地變量。
選項參數
第二個參數是數據，一般是一個對象。而這個對象又可以視作為選項，也就是說數據和選擇都在同一個對象身上。
如果不想每次都都磁盤，可需要緩存模板，設定 options.filename 即可。例如：
var 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);
inculde 指令
而且，如果要如
<ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul>
般插入公共模板，也就是引入文件，必須要設置 filename 選項才能啟動 include 特性，不然 include 無從知曉所在目錄。
模板：
<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 支持編譯模板。經過模板編譯后就沒有 IO 操作，會非常快，而且可以公用本地變量。下面例子 user/show 忽略 ejs 擴展名：
<ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul>
自定義 CLOSE TOKEN
如果打算使用 <h1>{{= title }}</h1> 般非 <%%>標識，也可以自定義的。
var ejs = require('ejs');
ejs.open = '{{';
ejs.close = '}}';
ejs.filters.last = function(obj) {
return obj[obj.length - 1];
};
<p><%=: users | last %></p>
<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>
對了，有網友爆料說，jQ 大神 John 若干年前寫過 20 行的模板，汗顏，與 EJS 相似但短小精悍！
簡單實用的js模板引擎
不足 50 行的 js 模板引擎，支持各種 js 語法：
<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 =%>”內是直接輸出的變量，類似 php 的 echo 的作用?！皃”是調用下面 build 方法時的 k-v 對象參數，也可以在調用 “new JTemp” 時設置成別的參數名
調用：
$(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。以下是模板引擎的代碼：
var 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語句
str_ += p;
}else{//普通語句
str_ += 'f+=' + p.substring(1) + ';';
}
str = str.substring(e + el);
s = str.indexOf(_.TEMP_S);
}
str_ += 'f+=\'' + str + '\';';
str_ = str_.replace(/\n/g, '');//處理換行
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;
}();
核心是將模板代碼轉變成了一個拼接字符串的 function，每次拿數據 call 這個 function。
因為主要是給手機（webkit）用的，所以沒有考慮字符串拼接的效率問題，如果需要給 IE 使用，最好將字符串拼接方法改為 Array.push() 的形式。
ejs模板布局 layout
1. 如果不愿意使用默認的layout.ejs，可自行指定。例如：
res.render("index",{"title":"test","layout":"main"});
// 或
res.render("index",{"title":"test","layout":"main.ejs"});
2. 如果不愿意使用layout，則可以設置layout為false，例如:
res.render("index",{"layout":false});
3. 如果不想每個請求都單獨設置一次?？梢允褂萌衷O置：
app.set("view options",{
"layout":false
});
4. ejs 里，默認的閉合標記是 <% .. %>，我們也可以定義自己的標簽。例如：
app.set("view options",{
"open":"{{",
"close":"}}"
});
5. 局部布局
在web應用中，經常會需要重復顯示某個內容，例如：用戶評論功能，需要重復顯示出每一條用戶的評論，這個時候，我們可以通過循環(huán)來實現。但是也可以使用【局部模版】( partial)來實現。例如：
首先我們建一個局部的模版 ./views/comment.ejs：
<div class="comment_item"> <div class="comment_user"><%=comment.user%></div> <div class="comment_content"><%=comment.content%></div> </div>
注意：這里是 comment.xxxx
然后在./views/index.ejs中，通過partial調用comment
this is <%=title%>!
<br/>
<%- partial("comment", comments)%>
注意：這里是 partial("comment.ejs", comments); <-- 單詞要用復數。
最后是在router中，調用index.ejs。
app.get("/",function(req,res){
res.render("index",{"title":"test","layout":false,"comments":[
{"user":"gainover","content":"test1"},
{"user":"zongzi","content":"test2"},
{"user":"maomao","content":"test3"}
]});
});
注意：代碼里的 comments 和 index.ejs的 comments變量名稱一致，而partial所調用的comment.ejs中，則采用 comment 的單數形式。
在列表顯示時，我們通常會遇到的場景是，對第一個元素或者最后一個元素加以特殊顯示。在partial中，我們可以通過express內置的變量來判斷當前對象是否是第一個元素或者最后一個元素，例如:
<div class="comment_item<%if(firstInCollection){%> firtitem <%}%>">
<div class="comment_user"><%=comment.user%></div> :
<div class="comment_content"><%=comment.content%></div>
</div>
這樣第一條評論的 class 里就會多一個firstitem。
類似的內置變量還有：
（1）firstInCollection 如果是數組的第一個元素，則為true
（2）indexInCollection 當前元素在數組里的索引
（3）lastInCollection 如果是數組的最后一個元素，則為true
（4）collectionLength 數組的長度
最后是partial調用模版時的路徑查找問題：
（1）partial("edit") 會查找同目錄下的edit.ejs文件。
（2）partial("../message") 會查找上一級目錄的message.ejs文件。
（3）partial("users") 會查找 users.ejs文件，如果不存在users.ejs, 則會查找 /users/index.ejs文件。
（4）<%= users %> 會對內容進行轉義，想不轉義，可以用 <%- users %>
相關文章
本文主要介紹了websocket結合node.js實現雙向通信的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要介紹了node運行js獲得輸出的三種方式，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了nodejs中操作mysql數據庫示例,本文演示了如何在NodeJS中創(chuàng)建創(chuàng)建mysql連接、mysql數據庫、插入數據、查詢數據等功能,需要的朋友可以參考下2014-12-12
Node.js中的Promise是一種異步編程方式，可以解決回調地獄問題，提高代碼可讀性和可維護性。通過掌握Promise的使用方法，可以更好地進行異步編程，避免一些常見的錯誤和陷阱2023-05-05
詳解通過源碼解析Node.js中cluster模塊的主要功能實現
這篇文章主要介紹了詳解通過源碼解析Node.js中cluster模塊的主要功能實現，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
path模塊包含一系列處理和轉換文件路徑的工具集，通過 require('path') 可用來訪問這個模塊。本文將詳細介紹path模塊2020-02-02
本篇文章主要介紹了實戰(zhàn)node靜態(tài)文件服務器的示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了nodejs獲取微信小程序帶參數二維碼實現代碼的相關資料,需要的朋友可以參考下2017-04-04
nodejs如何在package.json中設置多條啟動命令
這篇文章主要介紹了nodejs如何在package.json中設置多條啟動命令，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
基于promise.js實現nodejs的promises庫
promise是JavaScript實現優(yōu)雅編程的一個非常不錯的輕量級框架。該框架可以讓你從雜亂的多重異步回調代碼中解脫出來，并把精力集中到你的業(yè)務邏輯上。2014-07-07