前端模版引擎选择指南

Javascript前端模板引擎将数据和结构分离开来，是前端发展路上关键的一环。本文将对比jade，ejs，swig，handlerbars这四种现在常用的模版引擎来为大家提供一些帮助。

语法对比

这里我列出官网的第一个例子，然后加以分析

jade

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.

ejs

<h1><%= title %></h1>
<ul>
    <% for(var i=0; i<supplies.length; i++) { %>
        <li>
            <a href='supplies/<%= supplies[i] %>'>
                <%= supplies[i] %>
            </a>
        </li>
    <% } %>
</ul>

swig

<h1>{{ pagename|title }}</h1>
<ul>
{% for author in authors %}
  <li{% if loop.first %} class="first"{% endif %}>
    {{ author }}
  </li>
{% endfor %}
</ul>

handlerbars

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

• 对比代码可以看出，swig和handlerbars语法符合直观感受，而ejs奇丑无比。 jade语法精简但是难以阅读。

• 既然选择模版使用引擎，那一定会在一定程度上参考别人网站的结构和设计，这个时候一个好套弄的模版引擎是最容易满足需求的。

• 从上面的代码初印象看出，swig和handlerbars更容易套标签，而jade华而不实，太不实用

模版引擎如果直接后端解析的话那肯定是最有利于seo的。
当前情况下，经过几种javascript模版引擎的使用对比总结。我推荐大家选择使用swig
当然未来一定会有一种模版引擎替代它们，因为我觉得swig也有许多不足，以后说