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