前端模版引擎選擇指南

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也有許多不足，之後說