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