EJS是一套既簡單又高效的嵌入式 JS模板語言，可以幫我們利用普通的 JS 代碼生成 HTML 頁面。其歷史悠久，曾一度得到些許大佬的青睞，現(xiàn)在雖然沒有vue、react這些項目流行，但其還是有一定的使用場合和學(xué)習(xí)價值的。
- EJS后綴名為"ejs"
- EJS 支持我們把JS代碼直接寫在標簽內(nèi)
- EJS 能夠緩存 JS函數(shù)的中間代碼，使執(zhí)行速度得到極大的提升
- EJS 調(diào)錯極其簡單：因為它所有錯誤都是普通的 JS 異常，而且也會給我們輸出異常發(fā)生的具體位置
- EJS能夠快速編譯與繪制輸出，并且其標簽很簡潔，如：<% %>
- EJS能夠自定義分割符，如：用 <? ?> 替換 <% %>
- EJS同時支持服務(wù)器端和瀏覽器 JS 環(huán)境
- EJS兼容 Express 視圖系統(tǒng)
1. EJS配置
① 安裝
npm i ejs --save
② 建立views文件夾
③ 設(shè)置模板引擎
app.set("view engine","ejs");
④ 設(shè)置存放位置，即views文件夾，第一個參數(shù)views的意思是在路徑前加views(默認會去找項目根目錄下的views文件夾)
app.set("views",[path.jion(__dirname,"./views")]);
⑤ 告訴ejs將html文件作為模板文件來渲染
app.engine("html",require("ejs").__express)
⑥ 將ejs模板渲染成html頁面后返回給瀏覽器
path：模板文件路徑、字符串（就是找到views目錄下的 ejs的模版文件名所在路徑）
data：渲染模板時需要使用的數(shù)據(jù)、對象
app.get("/test",(req,res)=>{
res.render(path,data);
})
2. ejs基礎(chǔ)語法（凡是JS的語句則全部用<% %>括起來）
① 實例
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
② 輸出渲染后的 HTML 字符串
let template = ejs.compile(str, options);
template(data);
ejs.render(str, data, options);
ejs.renderFile(filename, data, options, function(err, str){
});
③ ejs.renderFile()方法實例
1）demo.js
const ejs = require('ejs');
const path = require('path');
ejs.renderFile(path.join(__dirname, 'demo.html'), {username: 'huangfuyk'}, (err, str) => {
console.log(str);
});
2）demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EJS模板引擎</title>
</head>
<body>
<h1><%= username %></h1>
<ul>
<% for(var i=0; i<5; i++) { %>
<li>高效的嵌入式 JavaScript 模板引擎</li>
<% } %>
</ul>
</body>
</html>
3）當我們在終端輸入node demo.js時，結(jié)果顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EJS模板引擎</title>
</head>
<body>
<h1>huangfuyk</h1>
<ul>
<li>高效的嵌入式 JavaScript 模板引擎</li>
<li>高效的嵌入式 JavaScript 模板引擎</li>
<li>高效的嵌入式 JavaScript 模板引擎</li>
<li>高效的嵌入式 JavaScript 模板引擎</li>
<li>高效的嵌入式 JavaScript 模板引擎</li>
</ul>
</body>
</html>
④ for循環(huán)語法示例
<%for(let i=0 ;i<data.length;i++){%>
<h2><%=data[i].title %></h2>
<%}%>
⑤ if 判斷語法示例
<%if (good.cate_id.toString()==cates[i]._id.toString()) {%>
<option value="<%= cates[i]._id %>" selected><%= cates[i].name %></option>
<%}else{%>
<option value="<%= cates[i]._id %>"><%= cates[i].name %></option>
<%}%>
⑥ 三目運算表達式語法示例
<select name="status" id="">
<option value="">--請選擇--</option>
<option value="0" <%= good.status==0?'selected':'' %>>手機</option>
<option value="1" <%= good.status==1?'selected':'' %>>電腦</option>
</select>
⑦ EJS所提供的參數(shù)
cache 緩存編譯后的函數(shù)，需要指定 filenamefilename 被 cache 參數(shù)用做鍵值，同時也用于 include 語句context 函數(shù)執(zhí)行時的上下文環(huán)境compileDebug 當值為 false 時不編譯調(diào)試語句client 返回獨立的編譯后的函數(shù)delimiter 放在角括號中的字符，用于標記標簽的開與閉debug 將生成的函數(shù)體輸出_with 是否使用 with() {} 結(jié)構(gòu)。如果值為 false，所有局部數(shù)據(jù)將存儲在 locals 對象上localsName 如果不使用 with ，localsName 將作為存儲局部變量的對象的名稱。默認名稱是 localsrmWhitespace 刪除所有可安全刪除的空白字符，包括開始與結(jié)尾處的空格。對于所有標簽來說，它提供了一個更安全版本的 -%> 標簽（在一行的中間并不會剔除標簽后面的換行符)。escape 為 <%= 結(jié)構(gòu)設(shè)置對應(yīng)的轉(zhuǎn)義（escape）函數(shù)。它被用于輸出結(jié)果以及在生成的客戶端函數(shù)中通過 .toString() 輸出。(默認轉(zhuǎn)義 XML)。outputFunctionName 設(shè)置為代表函數(shù)名的字符串（例如 ‘echo’ 或 ‘print’）時，將輸出腳本標簽之間應(yīng)該輸出的內(nèi)容。async 當值為 true 時，EJS 將使用異步函數(shù)進行渲染。（依賴于 JS 運行環(huán)境對 async/await 是否支持）
⑧ 標簽含義
<% :‘腳本’ 標簽，用于流程控制，無輸出。<%_ :刪除其前面的空格符（兩個下劃線）<%= :輸出數(shù)據(jù)到模板（輸出是轉(zhuǎn)義 HTML 標簽）<%- :輸出非轉(zhuǎn)義的數(shù)據(jù)到模板<%# :注釋標簽，不執(zhí)行、不輸出內(nèi)容<%% :輸出字符串 ‘<%’%> :一般結(jié)束標簽-%> :刪除緊隨其后的換行符_%> :將結(jié)束標簽后面的空格符刪除（兩個下劃線）
⑨ 包含指令（include）
因為ejs的語法不支持嵌套，所以只能通過include方法來復(fù)用模版。通過 include 指令將相對于模板路徑中的模板片段包含進來。(需要提供 ‘filename’ 參數(shù)。) 例如，如果存在 “./views/users.ejs” 和 “./views/user/show.ejs” 兩個模板文件，你可以通過 <%- include('user/show'); %> 代碼包含后者。
注意：此處可能需要能夠輸出原始內(nèi)容的標簽 (<%-) 用于 include 指令，避免對輸出的 HTML 代碼做轉(zhuǎn)義處理。
<ul>
<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}); %>
<% }); %>
</ul>
⑩ EJS默認開啟模版緩存，這樣在一個頁面中多次請求模版文件時，只會請求一次，我們可通過：EJS.config({cache: false})來關(guān)閉緩存
注：此文部分內(nèi)容參考 ：EJS中文文檔
|
