一、什么是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的應用場所
-
用JavaScript創建HTML字符串 正如我們在新手教程中所討論的，在JavaScript中拼字符串的缺點是可維護性不好。當你在JavaScript中將這些字符串拼到一起時，很難看出你正在寫的HTML是什么\---|一個你頁面展現的結構。而使用模板可以讓你通過代碼的空行和縮進來清楚地展現出你的HTML。
-
基於WebService的AJAX網站開發 EJS可以接收WebService異步傳送過來的JSON格式的數據，將這種數據直接傳入你的模板里，然后將結果插入到你的頁面中。你所需要做的只是通過以下代碼：
3. new EJS({url: 'comments.ejs'}).update('element_id', '/comments.json')
4. 程序換膚功能
如果你想給用戶自制頁面顯示的功能，EJS提供了非常適合的機制。EJS的模板只在瀏覽器里執行，因此對你的服務器沒有任何安全風險。你可以允許你的用戶上傳EJS模板以及其關聯的樣式表，從而實現定制你的網站頁面的功能