先後端模板引擎選型

時間 2019-11-07

標籤後端模板引擎選型简体版

原文原文鏈接

【早期CGI系，原始的拼接字符串風格；簡單插值可以使用多行模板字符串】javascript

if ( list.length ) {
  html+='<ol>';
  for ( n=0; n<list.length; ++n ) {
    html+=`
      <li>
        ${ list[n] }
      </li>
    `;
  }
  html+='</ol>';
}

【親民XSP系（如PHP/ASP/JSP），拼接字符串模式的反轉語法（糖）；邏輯視覺比例太高】html

<% if ( list.length ) { %>
  <ol>
    <% for ( n=0; n<list.length; ++n ) { %>
      <li>
        <%= list[n] %>
      </li>
    <% } %>
  </ol>
<% } %>

【簡約語法（如EJS），再度簡約；高級語法有限，一般難自定義拓展】前端

{{#if list.length}}
  <ol>
    {{#each list item}}
      <li>
        {{ item }}
      </li>
    {{/each}}
  </ol>
{{/if}}

【喪心病狂的創造語法（如Jade）；徹底新語法，大量強大功能，極度簡潔，投奔與否見仁見智】java

- if list.length
  ol.
    - each item in list
      li= item

【返璞歸真（如Vue；確切說是如Vue的模板解讀方式），基於DOM屬性的指令語法，前端模板優點一目瞭然】api

<ol v-if="list.length">
  <li v-for="item in list">
    {{ item }}
  </li>
</ol>

【另闢蹊徑，迴歸徹底親和的JS膠水語法，筆者做爲選用Vue的服務器端補充（以及面向將來的多客戶端通用原型模板；不過還不肯定是否應當合併IE6-9和先進瀏覽器模板，仍是索性分離更爲實用）；任意拓展、組件即數據即函數。】瀏覽器

ol({v_if:`list.length`},
  li({v_for:`item in list`},
    '{{ item }}'
  )
)

更完整的例子：服務器

template(

  '<!DOCTYPE html>',

  html(

    head(
      meta({charset:'utf-8'})
    ),

    body(

      '原始字符',

      '{{ $數據.$轉義變量 }}',

      ol({v_if:`'length' in $數據.$列表`,v_bind$title:`$數據.$標題`},
        li({v_for:`_值 in $數據.$列表`,v_bind$title:`$index`},
          '{{ _值 }}'
        )
      ),

      template({v_for:`_便捷臨時變量 in {_:$數據.$淺層.$深層}`},
        '{{ _便捷臨時變量 }}'
      )

    )

  )

)

惟一的問題是……若是說XSP系是陽火旺的話，那這種方案就能夠說是陰火旺了。js實現的html結構過於簡練，反而和變量混淆不清，和XSP邏輯比重過多，異曲同工。框架

——dom

討論模板引擎，就是討論api模式。至於雙向綁定，以及是否使用vdom，徹底是另一個層面的事情。通過多種層次的實踐，筆者建議，乾脆選一種最方便模板用做創做，另外的框架使用的模板則用這種模板自動翻譯或生成。jsp