Javascript前端模板引擎将数据和结构分离开来,是前端发展路上关键的一环。本文将对比jade,ejs,swig,handlerbars这四种如今经常使用的模版引擎来为你们提供一些帮助。javascript
这里我列出官网的第一个例子,而后加以分析html
doctype html html(lang="en") head title= pageTitle script(type='text/javascript'). if (foo) { bar(1 + 5) } body h1 Jade - node template engine #container.col if youAreUsingJade p You are amazing else p Get on it! p. Jade is a terse and simple templating language with a strong focus on performance and powerful features.
<h1><%= title %></h1> <ul> <% for(var i=0; i<supplies.length; i++) { %> <li> <a href='supplies/<%= supplies[i] %>'> <%= supplies[i] %> </a> </li> <% } %> </ul>
<h1>{{ pagename|title }}</h1> <ul> {% for author in authors %} <li{% if loop.first %} class="first"{% endif %}> {{ author }} </li> {% endfor %} </ul>
<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div>
对比代码能够看出,swig和handlerbars语法符合直观感觉,而ejs奇丑无比。 jade语法精简可是难以阅读。前端
既然选择模版使用引擎,那必定会在必定程度上参考别人网站的结构和设计,这个时候一个好套弄的模版引擎是最容易知足需求的。java
从上面的代码初印象看出,swig和handlerbars更容易套标签,而jade华而不实,太不实用node
模版引擎若是直接后端解析的话那确定是最有利于seo的。
当前状况下,通过几种javascript模版引擎的使用对比总结。我推荐你们选择使用swig
固然将来必定会有一种模版引擎替代它们,由于我以为swig也有许多不足,之后说git