先后端模板引擎选型

时间 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