前面的話 nodejs的模板引擎有很多， EJS是比較簡單和容易上手的。本文將詳細介紹EJS 概述 EJS是一個簡單高效的模板語言，通過數據和模板，可以生成HTML標記文本。可以說EJS是一個JavaScript庫，EJS可以同時運行在客戶端和伺服器端，客戶端安裝直接引入文件即可，伺服器端用npm包 ...
前面的話
nodejs的模板引擎有很多， EJS是比較簡單和容易上手的。本文將詳細介紹EJS
概述
EJS是一個簡單高效的模板語言，通過數據和模板，可以生成HTML標記文本。可以說EJS是一個JavaScript庫，EJS可以同時運行在客戶端和伺服器端，客戶端安裝直接引入文件即可，伺服器端用npm包安裝
【安裝】
ejs可以配合express框架使用，或直接在node中/瀏覽器中使用
$ npm install ejs
【特點】
1、快速編譯和渲染
2、簡單的模板標簽
3、自定義標記分隔符
4、支持文本包含
5、支持瀏覽器端和伺服器端
6、模板靜態緩存
7、支持express視圖系統
用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div1"></div>
<script src="ejs.min.js"></script>
<script>
var html = ejs.render('<%=123 %>','');
document.getElementById('div1').innerHTML = html;
</script>
</body>
</html>
方法
【ejs.compile(str,[option])】
編譯字元串得到模板函數，參數如下
str：需要解析的字元串模板
option：配置選項
var template = ejs.compile('<%=123 %>'); var result = template(); console.log(result);//123
【ejs.render(str,data,[option])】
直接渲染字元串並生成html，參數如下
str：需要解析的字元串模板
data：數據
option：配置選項
var result = ejs.render('<%=123 %>'); console.log(result);//123
兩個函數包括的配置選項參數options如下：
cache 緩存編譯後的函數(ejs.compile(..) ,需要 filename參數作為緩存的key filename 用於緩存的key，和include context 函數的執行上下文 compileDebug 輸出compile的信息來跟蹤調試 client 返回編譯後的函數 delimiter <% .. %> 指這裡的% debug 輸出ejs.compile()得到函數的函數體 strict ejs.compile()返回的函數是否執行在嚴格模式 _with 是否使用 with(){..} 來訪問本地變數 localsName 保存本地變數的對象名，預設為locals rmWhitespace 移除多餘空格
常用標簽
【js】
所有使用 <% %> 括起來的內容都會被編譯成 Javascript，可以在模版文件中像寫js一樣Coding
//test.ejs <% var a = 123 %> <% console.log(a); %> //test.js var ejs = require('ejs'); var fs = require('fs'); var data = fs.readFileSync('test.ejs'); var result = ejs.render(data.toString()); console.log(result);//123
或者，像下麵這樣寫
var ejs = require('ejs'); var result = ejs.render('<% var a = 123 %><%console.log(a); %>'); console.log(result);//123
【變數】
用<%=...%>輸出變數，變數若包含 '<' '>' '&'等字元會被轉義
var ejs = require('ejs'); var result = ejs.render('<%=a%>',{a:'<div>123</div>'}); console.log(result);//<div>123</div>
如果不希望變數值的內容被轉義，那就這麼用<%-... %>輸出變數
var ejs = require('ejs'); var result = ejs.render('<%-a%>',{a:'<div>123</div>'}); console.log(result);//<div>123</div>
【註釋】
用<%# some comments %>來註釋，不執行不輸出
【include】
include 可以引用絕對路徑或相對路徑的模板文件
//test.ejs <% var a = 123 %> <% console.log(a); %> //test.js var ejs = require('ejs');var result = ejs.render('<% include test.ejs %>'); //throw new Error('`include` use relative path requires the \'filename\' option.'); console.log(result);
由上面的提示可知，使用相對路徑時，必須設置'filename'選項
//test.ejs <% var a = 123 %> <% console.log(a); %> //test.js var ejs = require('ejs');var result = ejs.render('<% include test.ejs %>',{filename:'test.ejs'}); console.log(result);//123
