フロントエンドテンプレートエンジン選択

【初期CGI系、元の綴り文字列スタイル;単純補間では複数行テンプレート文字列を使用可能】

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

【親民XSP系(例えばPHP/ASP/JSP)、つづり文字列パターンの反転文法(糖);論理視覚比率が高すぎる】

【EJSのような簡潔な文法は、再び簡潔である.高級な文法は限られており、通常はカスタマイズが難しい】

{{#if list.length}}
  

    {{#each list item}}
      

        {{ item }}
      
    {{/each}}
  
{{/if}}

【狂った創造文法(Jadeなど);完全に新しい文法、大量の強大な機能、極度に簡潔で、駆けつけるかどうか仁見智を見るかどうか】

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

【本物に戻る(Vue;正確にはVueのテンプレート解読方式のように)、DOM属性の命令文法に基づいて、フロントエンドテンプレートの優位性が一目瞭然である】

  

    {{ item }}
  

【別の道を切り開いて、完全に親和的なJS接着文法に回帰して、筆者はVueのサーバー端を選んで補充する(および未来のマルチクライアントの通用するプロトタイプのテンプレートに向かう;しかしまだIE 6-9と先進的なブラウザのテンプレートを合併すべきかどうか、それともいっそ分離するのがもっと実用的な);任意の開拓、コンポーネント即ちデータ即ち関数.】

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

より完全な例:

template(

  '',

  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論理と比重が多すぎて、殊途同帰である.
——
ディスカッションテンプレートエンジンはapiモードです.双方向バインドやvdomを使用するかどうかは、まったく別のレベルのことです.さまざまなレベルの実践を経て、筆者はいっそ最も便利なテンプレートを選んで創作に使うことを提案し、別のフレームワークで使用するテンプレートはこのようなテンプレートで自動的に翻訳したり生成したりする.