ejs

一、什麼是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的語法和功能：

一、緩存功能，可以緩存已經解析好的html模版；

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

<% alert('hello world') %>

三、<%= 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中。

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

<h1><%-title %>asd</h1>          最後顯示asd，及顯示原網頁

<p><% # 'hello world' %>asd</p>   最後顯示asd，及顯示原網頁

五、支持自定義標籤，好比'<%'可使用'{{'，'%>'用'}}'代替； 

    ejs 裏，默認的閉合標記是 <%  .. %>，咱們也能夠定義本身的標籤。例如：

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

六、提供一些輔助函數，用於模版中使用 
     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格式字符串 

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

四、使用建立好的EJS模板

基於咱們以前寫的模擬生成一個EJS對象

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

對象有下面兩個成員函數

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

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

ejs.render(str,option);  

// 渲染字符串 str 通常是經過nodejs文件系統的readfile方法讀取 

   

ejs.render(str,{  

     data : user_data   // 須要渲染的數據 

   

});

 其中options的一些參數爲： 
    一、cache：是否緩存解析後的模版，須要filename做爲key； 
    二、filename：模版文件名； 
    三、scope：complile後的Function執行所在的上下文環境； 
    四、debug：標識是不是debeg狀態，debug爲true則會輸出生成的Function內容； 
    五、compileDebug：標識是不是編譯debug，爲true則會生成解析過程當中的跟蹤信息，用於調試； 
    六、client，標識是否用於瀏覽器客戶端運行，爲true則返回解析後的能夠單獨運行的Function函數； 
    七、open，代碼開頭標記，默認爲'<%'； 
    八、close，代碼結束標記，默認爲'%>'； 
    九、其餘的一些用於解析模版時提供的變量。 
    在express中使用時，options參數將由response.render進行傳入，其中包含了一些express中的設置，以及用戶提供的變量值。 

5、最後總結一下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模板以及其關聯的樣式表，從而實現定製你的網站頁面的功能。