Node.js學習(14)----EJS模板引擎

這個入門教程將從如下幾個方面來說解：

1. 引入EJS

2. 建立一個模板

3. 使用視圖工具組件

4. 使用錯誤處理組件

5. 什麼狀況下應使用EJS

 

 引入EJS

在咱們正式開始前，咱們先來作點準備工做。 你的頁面須要引入EJS以使JavaScript可以使用它。 先到Google Code或者SVN庫裏下載ejs\_production.js文件。

下一步是在你的HTML文件里加入下面一段代碼：

<scripttype="text/javascript"src="ejs_production.js"></script>

 建立一個模板

簡化你的代碼的第一步是將你的頁面展示（HTML）與你的程序邏輯（JavaScript）分離開來。咱們將經過建立一個template來把咱們的展示代碼抽取出來。 建立一個名叫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字符串插入到了當前位置裏。 咱們須要添加JavaScript代碼來控制模板的載入的渲染。 咱們將用下面的代碼來替換原來的字符串代碼:

// load the template file, then render it with datavar html =new EJS({url:'cleaning.ejs'}).render(data);

感受好些了嗎？這個模板還原了HTML代碼的結構性，而且JavaScript代碼很短也沒有歧義。

 

 

 

 使用視圖工具組件

EJS裏包含了不少視圖組件，視圖組件是用來顯示代碼，如鏈接和表單的捷徑。 就像Ruby on Rails框架裏的同樣，它們可讓視圖代碼保持短小、簡單。 超級連接在咱們的模板代碼裏也許會這樣寫：

 

<li>
    <a href='supplies/<%= supplies[i] %>'>
        <%= supplies[i] %>
    </a></li>

這段代碼看起來仍然很亂，如今有一些內嵌的標籤可讓它更小巧。咱們能夠使用視圖組件：

 

 

<li><%= link_to(supplies[i],'supplies/'+supplies[i]) %>
</li>

上面的代碼看起來更乾淨更直觀。還記得最原始的方式嗎？

 

 

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

與最初的JavaScript相比較，一些不太瞭解你的代碼的人能夠更容易地經過EJS模板代碼看得懂你的代碼。 如今讓咱們放鬆一下，一塊兒來享受下使人激動的乾淨簡潔的感受。

 使用錯誤處理組件

 

一個好的女僕老是會認可本身的錯誤。若是你在EJS模板裏有一個錯誤，EJS會給你準確地指出是哪一行有錯誤，只要你引入ejs_jslint.js文件，這個文件能夠到\[Google Code\](http://code.google.com/p/embeddedjavascript/ "Downloading ejs_jslint.js from Google Code")裏下載。若是你使用FireFox的調試工具Firebug，錯誤結果會直接在你的控制檯裏顯示。

一個錯誤的模板代碼：

<ul><% foor(var i=0; i<supplies.length; i++){ %>
    <li><%= link_to(supplies[i],'supplies/'+supplies[i]) %>
    </li><%} %>
</ul>

 什麼狀況下應使用EJS

 

 

有的人說寫乾淨整潔的代碼應該養成天天的習慣，可是我感受EJS是一個絕佳的助手，若是你在面對如下幾種狀況：

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

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

 

 

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

很簡單，不是嗎？

3.程序換膚功能 若是你想給用戶自制頁面顯示的功能，EJS提供了很是適合的機制。EJS的模板只在瀏覽器裏執行，所以對你的服務器沒有任何安全風險。你能夠容許你的用戶上傳EJS模板以及其關聯的樣式表，從而實現定製你的網站頁面的功能。