一、什麽是EJS

EJS是一個JavaScript模板庫，用來從JSON數據中生成HTML字符串。

二、為什麽要使用EJS

與最初的JavaScript相比較，一些不太了解你的代碼的人可以更容易地通過EJS模板代碼看得懂你的代碼。 讓我們放松一下，一起來享受下令人激動的幹凈簡潔的感覺。

總之可以讓代碼更加幹凈整潔，讓人易懂。

可以看如下的例子：

這是用javascript實現的代碼

var html = "<h1>"+data.title+"</h1>"

html += "<ul>"

for(var i=0; i<data.supplies.length; i++) {

html += "<li><a href=‘supplies/"+data.supplies[i]+"‘>"

html += data.supplies[i]+"</a></li>"

}

html += "</ul>"

最終要實現的效果如下

但是上面的代碼看起來很亂，雖然實現了功能，但是不容易讓人弄懂。不僅代碼醜陋，而且你的HTML結構完全在JavaScript代碼中丟失。

下面學習EJS同樣實現上面的功效，它的工作原理如下：

使用EJS來找回你的明確、維護性良好的HTML代碼結構。

註:data是json對象，不能使json字符串。

在HTML中引入EJS,以使javascript能夠使用它，引入EJS的語句如下：

<script type="text/javascript" src="/js/ejs.js"></script>

創建一個EJS模板,命名為cleaning.ejs文件，內容如下：

<h1><%=title %></h1> <ul> <% for ( var i=0; i<supplies.length; i++) { %>

<li>

<a href= ‘supplies/<%=supplies[i] %>‘

<%= supplies[i] %> </a>

</li>

<% } %> </ul>

我的HTML文檔如下，引入EJS,並更加我們的提供EJS模板創建EJS對象，然後調用EJS對象成員函數解析JSON對象到模板中。

< html > < head > < script type = "text/javascript" src = "/js/ejs.js" ></ script >< script type = "text/javascript" > function myfunction(){var data=‘{"title":"cleaning","supplies":["mop","broom","duster"]}‘ var html = new EJS({url: ‘/js/tmpl/cleaning.ejs‘}).render(JSON.parse(data)); //JSON.parse(data) 把JSON字符串解析為原生的javascript值。 alert(html); document.getElementById("div1").innerHTML=html; } </ script > </ head > < body > <button onclick = "myfunction()" >點擊</ button > < div id = "div1" ></ div > </ body> < html >

從上面這個例子我們可以看到EJS模板的基本用法。

三、下面介紹下EJS的語法和功能：

1、緩存功能，能夠緩存已經解析好的html模版；

2、<% code %>用於執行其中javascript代碼。

<% alert(‘hello world‘) %>

3、<%= code %>會對code進行html轉義；

<h1><%=title %></h1> 註：會把title裏面存的值給顯示出來在h1中。 <p><%= ‘hello world‘ %></p> 註：會把hello world顯示在h1中。 <h1><%= ‘<b>hello world</b>‘ %></h1> 註：會把hello world變粗，然後顯示在h1中。 <h1><%=title %></h1> 註：會把title裏面存的值給顯示出來在h1中。 <p><%= ‘hello world‘ %></p> 註：會把hello world顯示在h1中。 <h1><%= ‘<b>hello world</b>‘ %></h1> 註：會把hello world變粗，然後顯示在h1中。

4、<%- code %>將不會進行轉義；，這一行代碼不會執行，像是被註釋了一樣，然後顯示原來的html。也不會影響整個頁面的執行。

<h1><%-title %>asd</h1> 最後顯示asd，及顯示原網頁 <p><% # ‘hello world‘ %>asd</p> 最後顯示asd，及顯示原網頁

5、支持自定義標簽，比如‘<%‘可以使用‘{{‘，‘%>‘用‘}}‘代替；

ejs 裏，默認的閉合標記是 <% .. %>，我們也可以定義自己的標簽。例如：

app.set("view options",{                                                                                  
   "open":"{{",                                                                                  
   "close":"}}"
});

6、提供一些輔助函數，用於模版中使用
1)、first，返回數組的第一個元素；
2)、last，返回數組的最後一個元素；
3)、capitalize，返回首字母大寫的字符串；
4)、downcase，返回字符串的小寫；
5)、upcase，返回字符串的大寫；
6)、sort，排序（Object.create(obj).sort()？）；
7)、sort_by:‘prop‘，按照指定的prop屬性進行升序排序；
8)、size，返回長度，即length屬性，不一定非是數組才行；
9)、plus:n，加上n，將轉化為Number進行運算；
10)、minus:n，減去n，將轉化為Number進行運算；
11)、times:n，乘以n，將轉化為Number進行運算；
12)、divided_by:n，除以n，將轉化為Number進行運算；
13)、join:‘val‘，將數組用‘val‘最為分隔符，進行合並成一個字符串；
14)、truncate:n，截取前n個字符，超過長度時，將返回一個副本
15)、truncate_words:n，取得字符串中的前n個word，word以空格進行分割；
16)、replace:pattern,substitution，字符串替換，substitution不提供將刪除匹配的子串；
17)、prepend:val，如果操作數為數組，則進行合並；為字符串則添加val在前面；
18)、append:val，如果操作數為數組，則進行合並；為字符串則添加val在後面；
19)、map:‘prop‘，返回對象數組中屬性為prop的值組成的數組；
20)、reverse，翻轉數組或字符串；
21)、get:‘prop‘，取得屬性為‘prop‘的值；
22)、json，轉化為json格式字符串

7、利用<%- include filename %>加載其他頁面模版；

四、使用創建好的EJS模板

基於我們之前寫的模擬生成一個EJS對象

new EJS({url: ‘/js/tmpl/cleaning.ejs‘})

對象有下面兩個成員函數

1、ejs.compile(str, options); 將返回內部解析好的Function函數
2、ejs.render(str, options); 返回經過解析的字符串

ejs的render函數有兩個參數 第一個是字符串，第二個是可選的對象，和其他javascript模版一樣需要渲染的數據也是包含在option對象中的。

ejs.render(str,option); // 渲染字符串 str 一般是通過nodejs文件系統的readfile方法讀取 ejs.render(str,{ data : user_data // 需要渲染的數據 });

其中options的一些參數為：
1、cache：是否緩存解析後的模版，需要filename作為key；
2、filename：模版文件名；
3、scope：complile後的Function執行所在的上下文環境；
4、debug：標識是否是debeg狀態，debug為true則會輸出生成的Function內容；
5、compileDebug：標識是否是編譯debug，為true則會生成解析過程中的跟蹤信息，用於調試；
6、client，標識是否用於瀏覽器客戶端運行，為true則返回解析後的可以單獨運行的Function函數；
7、open，代碼開頭標記，默認為‘<%‘；
8、close，代碼結束標記，默認為‘%>‘；
9、其他的一些用於解析模版時提供的變量。
在express中使用時，options參數將由response.render進行傳入，其中包含了一些express中的設置，以及用戶提供的變量值。

五、最後總結一下EJS的應用場所

1. 用JavaScript創建HTML字符串 正如我們在新手教程中所討論的，在JavaScript中拼字符串的缺點是可維護性不好。當你在JavaScript中將這些字符串拼到一起時，很難看出你正在寫的HTML是什麽\---|一個你頁面展現的結構。而使用模板可以讓你通過代碼的空行和縮進來清楚地展現出你的HTML。

2. 基於WebService的AJAX網站開發 EJS可以接收WebService異步傳送過來的JSON格式的數據，將這種數據直接傳入你的模板裏，然後將結果插入到你的頁面中。你所需要做的只是通過以下代碼：

3. new EJS({url: ‘comments.ejs‘}).update(‘element_id‘, ‘/comments.json‘)

4. 程序換膚功能

如果你想給用戶自制頁面顯示的功能，EJS提供了非常適合的機制。EJS的模板只在瀏覽器裏執行，因此對你的服務器沒有任何安全風險。你可以允許你的用戶上傳EJS模板以及其關聯的樣式表，從而實現定制你的網站頁面的功能

EJS 是什麽 ，怎麽用，以及優點