使用node.js的Express腳手架生成項目默認是jade模板引擎，jade引擎實在是太難用了，這么難用還敢設為默認的模板引擎，過分了啊！用handlebars模板引擎寫還說的過去，但筆者更願意使用ejs，選它是因為跟Asp.Net的模板引擎有點相似吧。
網上有過這三個模板引擎萬行數據渲染比較，耗時結果 Jade 287ms > ejs 43ms > Handlebars 28ms
先來看一下這幾個模板引擎：
jade模板 (express demo)
html
head
title #{title}
meta(charset="UTF-8")
body
div.description #{description}
ul
- each data in datas
li.item(id='item_'+data.index)
span= data.time
a.art(href=data.url)= data.title
就看起來干凈，引入縮進，喪失了html該有的靈活性
handlebars 模版 (express -hbs demo)
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>{{title}} - Page Test</title> </head> <body> <div class="description">{{description}}</div> <ul> {{#datas}} <li class="item" id="item_{{index}}"><span>{{time}}</span><a href="{{url}}" class="art">{{title}}</a></li> {{/datas}} </ul> </body> </html>
用起來也是有點不自在
ejs 模版 (node -e demo)
<!doctype html> <html> <head> <meta charset="UTF-8"> <title><%=title%> - Page Test</title> </head> <body> <div class="description"><%=description%></div> <ul> <% function data(data) { %> <li class="item" id="item_<%=data.index%>"><span><%=data.time%></span><a href="<%=data.url%>" class="art"><%=data.title%></a></li> <% } %> <% datas.map(data) %> </ul> </body> </html>
雖然看起來亂點，但是便於直接書寫自己的邏輯，適合於個人項目，如果真的有代碼潔癖，可以考慮把服務器端書句賦值給前端js，在瀏覽器端渲染數據
<script> var name = '<%=name%>'; // name是字符串 var str='<%- JSON.stringify(userinfo) %>'; //userinfo是對象 var userino=JSON.parse(str); </script>
這種方式也可做一下變形，在服務器端傳過來的時候就先把對象轉化成字符串
<script> var userinfo=<%- userinfo %>; //后端傳的時候JSON.stringify()一下，因為js是動態類型，所以這里可直接得到userinfo對象 </script>
以上兩種方式同樣適合於handlebars模板引擎
- <% code %>： JavaScript 代碼。
- <%= code %>：顯示替換過 HTML 特殊字符的內容。 相當於handlebars中的 {{{ code }}},不希望被編碼的Html
- <%- code %>： 顯示原始 HTML 內容。 相當於handlebars中的 {{ code }}，經過編碼的HTML
<%= code %> 和 <%- code %> 的區別，當變量 code 為普通字符串時，兩者沒有區別。當 code 比如為 <h1>hello</h1> 這種字符串時， <%= code %> 會原樣輸出 <h1>hello</h1> ，而 <%- code %> 則會顯示 H1 大的 hello 字符串。