EJS模板引擎

一、什么是模板引擎？

是為了使用戶界面與業務數據（內容）分離而產生的，它可以生成特定格式的文檔，用於網站的模板引擎就會生成一個標准的HTML文檔。

常用的模板引擎有ejs 、jade、smarty等。

二、為什么需要模板引擎？

前端開發的時候，經常有根據后台返回的數據，然后根據此數據生成html,最后渲染到頁面中。比如：

var data = [
    {name: "leaf1"},
    {name: "leaf2"},
    {name: "leaf3"}
];
function getNameList(data) {
    var html = "";
    html += "<ul>";
    for (var i = 0, len = data.length; i < len; i++) {
        html += "<li>";
        html += data.name;
        html += "</li>";
    }
    html += "</ul>";
    return html;
}　

上面當然只是簡單的例子，如果返回的數據很復雜呢？有了ejs模板引擎，我們可以這樣

<script id="test" type="text/html">
    <ul>
        <% for (var i = 0; i < list.length; i ++) { %>
        <li><%= list[i].name %></li>
        <% } %>
    </ul>
</script>

　　

三、ejs特點

      快速編譯和渲染
　　簡單的模板標簽
　　自定義標記分隔符
　　支持文本包含
　　支持瀏覽器端和服務器端
　　模板靜態緩存
　　支持express視圖系統

四、原理

原理很簡單，其實就是拼接字符串，模板引擎就是利用正則表達式識別模板標識，並利用數據代替其中標識符。

//下面是簡單的引擎邏輯，真正的模板引擎還要考慮內存、XSS漏洞等問題。
function tmp(str, obj) {
    if (typeof str === 'string') {
        return str.replace(/<%=\s*([^%>]+)\s*%>/g, function() {
            var key = arguments[1];
            return obj[key];
        });
    }
}
var str = "<%= name%>";
var obj = {name: "leaf"};

五、ejs常用標簽

<% %>    //流程控制標簽
<%= %>  //輸出標簽（原文輸出HTML標簽）
<%- %>   //輸出標簽（HTML會被瀏覽器解析）
<%# %>  //注釋標簽
%             //對標記進行轉義
-%>          //去掉沒用的空格

 

六、利用Express+ejs制作簡單頁面的小demo

　http://www.cnblogs.com/leaf930814/p/6809853.html