EJS模板引擎

時間 2019-11-12

標籤 ejs 模板引擎简体版

原文原文鏈接

前面的話

　　nodejs的模板引擎有不少， EJS是比較簡單和容易上手的。本文將詳細介紹EJShtml

概述

　　EJS是一個簡單高效的模板語言，經過數據和模板，能夠生成HTML標記文本。能夠說EJS是一個JavaScript庫，EJS能夠同時運行在客戶端和服務器端，客戶端安裝直接引入文件便可，服務器端用npm包安裝node

【安裝】express

　　ejs能夠配合express框架使用，或直接在node中/瀏覽器中使用npm

$ npm install ejs

【特色】瀏覽器

　　一、快速編譯和渲染緩存

　　二、簡單的模板標籤服務器

　　三、自定義標記分隔符框架

　　四、支持文本包含函數

　　五、支持瀏覽器端和服務器端ui

　　六、模板靜態緩存

　　七、支持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);//&lt;div&gt;123&lt;/div&gt;

　　若是不但願變量值的內容被轉義，那就這麼用<%-... %>輸出變量

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