EJS 高效的 JavaScript 模板引擎

什麼是 EJS？

"E" 表明 "effective"，即【高效】。EJS 是一套簡單的模板語言，幫你利用普通的 JavaScript 代碼生成 HTML 頁面。EJS 沒有如何組織內容的教條；也沒有再造一套迭代和控制流語法；有的只是普通的 JavaScript 代碼而已。

 

語法簡單

EJS 支持直接在標籤內書寫簡單、直白的 JavaScript 代碼。只需讓 JavaScript 輸出你所須要的 HTML ，完成工做很輕鬆

 

執行迅速

咱們都知道 V8 以及相似 JavaScript 引擎的速度有多快。EJS 可以緩存 JS 函數的中間代碼，從而提高執行速度。

 

易於調試

調試 EJS 錯誤（error）很容易：全部錯誤都是普通的 JavaScript 異常，而且還能輸出異常發生的位置。

特性

• 快速編譯與繪製輸出
• 簡潔的模板標籤：<% %>
• 自定義分割符（例如：用 <? ?> 替換 <% %>）
• 引入模板片斷
• 同時支持服務器端和瀏覽器 JS 環境
• JavaScript 中間結果靜態緩存
• 模板靜態緩存
• 兼容 Express 視圖系統

安裝

利用 NPM 安裝 EJS 很簡單。

$ npm install ejs

Use

將模板字符串和一些數據做爲參數傳遞給 EJS，Duang，HTML 出來了。

var ejs = require('ejs'), people = ['geddy', 'neil', 'alex'], html = ejs.render('<%= people.join(", "); %>', {people: people});

瀏覽器支持

從這裏下載 ，而後引入頁面便可。

<script src="ejs.js"></script> <script> var people = ['geddy', 'neil', 'alex'], html = ejs.render('<%= people.join(", "); %>', {people: people}); </script>

文檔

實例

<% if (user) { %> <h2><%= user.name %></h2> <% } %>

用法

var template = ejs.compile(str, options); template(data); // => 輸出繪製後的 HTML 字符串 ejs.render(str, data, options); // => 輸出繪製後的 HTML 字符串 ejs.renderFile(filename, data, options, function(err, str){ // str => 輸出繪製後的 HTML 字符串 });

參數

• cache 緩存編譯後的函數，須要提供 filename
• filename 被 cache 參數用作鍵值，同時也用於 include 語句
• context 函數執行時的上下文環境
• compileDebug 當爲 false 時不編譯調試語句
• client 返回獨立的編譯後的函數
• delimiter 放在角括號中的字符，用於標記標籤的開與閉
• debug 將生成的函數體輸出
• _with 是否使用 with() {} 結構。若是爲 false，全部局部數據將存儲在 locals 對象上。
• localsName 若是不使用 with ，localsName 將做爲存儲局部變量的對象的名稱。默認名稱是 locals
• rmWhitespace 刪除全部可安全刪除的空白字符，包括開始與結尾處的空格。對於全部標籤來講，它提供了一個更安全版本的 -%> (在一行的中間並不會剔除標籤後面的換行符)。
• escape 爲 <%= 結構設置對應的轉義（escape）函數。它被用於輸出結果以及在生成的客戶端函數中經過 .toString() 輸出。(默認轉義 XML)。

標籤含義

• <% '腳本' 標籤，用於流程控制，無輸出。
• <%_ 刪除其前面的空格符
• <%= 輸出數據到模板（輸出是轉義 HTML 標籤）
• <%- 輸出非轉義的數據到模板
• <%# 註釋標籤，不執行、不輸出內容
• <%% 輸出字符串 '<%'
• %> 通常結束標籤
• -%> 刪除緊隨其後的換行符
• _%> 將結束標籤後面的空格符刪除

包含（include）

經過 include 指令將相對於模板路徑中的模板片斷包含進來。(須要提供 'filename' 參數。) 例如，若是存在 "./views/users.ejs" 和 "./views/user/show.ejs" 兩個模板文件，你能夠經過 <%- include('user/show'); %> 代碼包含後者。

你可能須要可以輸出原始內容的標籤 (<%-) 用於 include 指令，避免對輸出的 HTML 代碼作轉義處理。

<ul> <% users.forEach(function(user){ %> <%- include('user/show', {user: user}); %> <% }); %> </ul>

自定義分隔符

可針對單個模板或全局使用自定義分隔符：

var ejs = require('ejs'), users = ['geddy', 'neil', 'alex']; // 單個模板文件 ejs.render('<?= users.join(" | "); ?>', {users: users}, {delimiter: '?'}); // => 'geddy | neil | alex' // 全局 ejs.delimiter = '$'; ejs.render('<$= users.join(" | "); $>', {users: users}); // => 'geddy | neil | alex'