EJS是一套既簡單又高效的嵌入式 JS模板語言，可以幫我們利用普通的 JS 代碼生成 HTML 頁面。其歷史悠久，曾一度得到些許大佬的青睞，現(xiàn)在雖然沒有vue、react這些項目流行，但其還是有一定的使用場合和學習價值的。
- EJS后綴名為"ejs"
- EJS 支持我們把JS代碼直接寫在標簽內(nèi)
- EJS 能夠緩存 JS函數(shù)的中間代碼，使執(zhí)行速度得到極大的提升
- EJS 調(diào)錯極其簡單：因為它所有錯誤都是普通的 JS 異常，而且也會給我們輸出異常發(fā)生的具體位置
- EJS能夠快速編譯與繪制輸出，并且其標簽很簡潔，如：<% %>
- EJS能夠自定義分割符，如：用 <? ?> 替換 <% %>
- EJS同時支持服務器端和瀏覽器 JS 環(huán)境
- EJS兼容 Express 視圖系統(tǒng)
1. EJS配置
① 安裝
npm i ejs --save② 建立views文件夾
app.set("view engine","ejs");④ 設置存放位置，即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基礎語法（凡是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'); // 加載ejs模塊const path = require('path');// 回調(diào)函數(shù)中的第二個參數(shù) str 就是 讀取到的HTML字符串ejs.renderFile(path.join(__dirname, 'demo.html'), {username: 'huangfuyk'}, (err, str) => { console.log(str); // 輸出繪制后的 HTML 字符串});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)設置對應的轉(zhuǎn)義（escape）函數(shù)。它被用于輸出結(jié)果以及在生成的客戶端函數(shù)中通過.toString()輸出。(默認轉(zhuǎn)義 XML)。outputFunctionName設置為代表函數(shù)名的字符串（例如 ‘echo’ 或 ‘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方法來復用模版。通過 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})來關閉緩存
注：此文部分內(nèi)容參考 ：EJS中文文檔
