1、EJS是一個簡單高效的模板語言，通過數據和模板，可以生成HTML標記文本。可以說EJS是一個JavaScript庫，EJS可以同時運行在客戶端和服務器端，客戶端安裝直接引入文件即可，服務器端用npm包安裝
2、EJS的特點：
- 快速編譯和渲染
- 簡單的模板標簽
- 自定義標記分隔符
- 支持文本包含
- 支持瀏覽器端和服務器端
- 模板靜態緩存
- 支持express視圖系統
3、EJS成員函數：
- Render(str,data,[option]):直接渲染字符串並生成html
str：需要解析的字符串模板
data：數據
option：配置選項 - Compile(str,[option]):編譯字符串得到模板函數
str：需要解析的字符串模板
option：配置選項
兩個函數包括的配置選項如下：
4、EJS常用標簽
- <% %>流程控制標簽
- <%= %>輸出標簽（原文輸出HTML標簽）
- <%- %>輸出標簽（HTML會被瀏覽器解析）
- <%# %>注釋標簽
- % 對標記進行轉義
- -%>去掉沒用的空格
說明：ejs中的邏輯代碼全部用JavaScript
5、接下來看一個例子就可以明白EJS的簡單語法了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>EJS Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="ejs.min.js"></script>
<script >
var data={flag:false,
data1:["====1","====2","====3"],
data2:["====4","====5","====6"]
};
window.onload=function(){
var tem=document.getElementById("tem").innerHTML;
var html=ejs.render(tem,data);
document.getElementsByTagName("body")[0].innerHTML=html;
}
</script>
</head>
<body>
<script type="text/javascript" id="tem">
<ul>
<%if(flag){%>
<%for (var i=0;i<data1.length;i++){%>
<li><%=data1[i]%></li>
<%}%>
<%}else{%>
<%for(var i=0;i<data2.length;i++){%>
<li><%=data2[i]%></li>
<%}%>
<%}%>
</ul>
</script>
</body>
</html>
運行后結果如下：
4、過濾器（把結果進一步加工的函數）：
語法如下：
<%=: data.age | plus:5%>
注意:和|兩個符號:
此外，還有文件包含的語法：
<%- include(path) %>
接下來用這個寫一個服務器端的，文件目錄如下：
app.js文件內容如下：
var http=require("http"); var express=require("express"); var app=express(); var tem={ message:"我是中間部分" } //創建服務器 http.createServer(app).listen(3000,function(){ console.log("Server is listening port 3000"); }); //掛載靜態資源處理中間件 app.use(express.static(__dirname+"/public")); //設置模板視圖的目錄 app.set("views","./public/views"); //設置是否啟用視圖編譯緩存，啟用將加快服務器執行效率 app.set("view cache",true); //設置模板引擎的格式即運用何種模板引擎 app.set("view engine","ejs"); //設置路由 app.get("/ejs",function(req,res){ res.render("ejs1",{title:tem.message}); });
ejs1.ejs文件內容如下這里引用了頭部和尾部：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>EJS</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="../css/main.css" rel="stylesheet"> </head> <body> <%- include("./header.ejs") %> <h1><%=title%></h1> <%- include("./footer.ejs") %> </body> </html>
頭部和尾部都是一行代碼如下：
<h1>我是頭部</h1>
<h1>我是尾部</h1>啟動服務器后，我們輸入http://localhost:3000/ejs，顯示內容如下：
這說明我們利用ejs模板做到了正確輸出，這既可以大大增加代碼的復用性，而且當data為數據庫中的數據時，我們就可以做到實時更新網站數據了，這樣一個簡單動態網站就完成了，聽起來是不是很簡單，不過還有很長一段路要走滴，先睡了，下次再更。