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

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