node.js中的模板引擎jade、handlebars、ejs

時間 2019-11-13

標籤 node.js node 模板引擎 jade handlebars ejs 欄目 Node.js 简体版

原文原文鏈接

使用node.js的Express腳手架生成項目默認是jade模板引擎，jade引擎實在是太難用了，這麼難用還敢設爲默認的模板引擎，過度了啊！用handlebars模板引擎寫還說的過去，但筆者更願意使用ejs，選它是由於跟Asp.Net的模板引擎有點類似吧。html

網上有過這三個模板引擎萬行數據渲染比較，耗時結果 Jade 287ms > ejs 43ms > Handlebars 28ms前端

先來看一下這幾個模板引擎：node

jade模板 (express demo)express

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，在瀏覽器端渲染數據url

<script> 
  var name = '<%=name%>';  // name是字符串
  var str='<%- JSON.stringify(userinfo) %>';  //userinfo是對象
  var userino=JSON.parse(str);
 </script>

這種方式也可作一下變形，在服務器端傳過來的時候就先把對象轉化成字符串spa

<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 字符串。