最近、私の仕事のコンテンツは徐々に私の理想化（Webフロントエンド）に近づいているので、フロントエンドのパフォーマンスにもっと注意を払います！バックグラウンドの同僚が、レンダリング速度を向上させるためにAJAXテンプレートエンジンの使用を導入しました！
JavaScriptテンプレートエンジンは次のとおりです
1。口ひげ
JavaScriptに基づいたテンプレートエンジンは、MicrosoftのJQueryテンプレートプラグインと同様ですが、よりシンプルで使いやすいです！
2。DOT.JS
dot.jsには、ブラウザとnode.jsのJavaScriptテンプレートエンジンが含まれています。
3。JSMART
JSMARTは、有名なPHPテンプレートエンジンSmartyのJavaScript移植バージョンです。
4。Dom.js
Dom.jsは、クライアント側とサーバー側の両方で使用できるJavaScriptテンプレートエンジンです。
5。ジェイド
Jadeは、JavaScriptのHamlの影響を受けるノード用の高性能テンプレートエンジンです。
6。Hogan.js
TwitterのJavaScriptテンプレートエンジン。
7。ハンドルバー
ハンドルバーは、JavaScriptページテンプレートライブラリです
8。ARTTEMPLATE
ArtTemplateは、JavaScriptテンプレートエンジンの新世代です。 V8でのレンダリング効率は、JavaScriptのパフォーマンス制限に近い場合があります。 Chromeの下でのレンダリング効率テストでは、それぞれよく知られているエンジンの口ひげとマイクロTMPLの25倍と32倍です。エンジンはデバッグをサポートします。レンダリング中にエラーが発生した場合、デバッガーは例外を生成するテンプレートステートメントを正確に見つけることができ、フロントエンドテンプレートをデバッグするのが難しいという問題を解決できます。
一意のテンプレートコンパイルツールは、フロントエンドテンプレートをテンプレートエンジンに依存しないJSファイルにコンパイルして実行でき、フロントエンドテンプレートがブラウザの制限を突破し、バックエンドテンプレートと同じ方法でファイルとディレクトリの構成を実現し、オンデマンドでロードする、ネストなどを含めることができます。
たぶん、あなたはこのプラグインの名前がおなじみに見えると思うでしょう、そうです！これはArtdialogの著者でもあります。
ブログアドレス：http：//www.planeart.cn/
引用エンジン
コードコピーは次のとおりです。
<スクリプトsrc = "js/template.js"> </script>
テンプレートを書きます
コードコピーは次のとおりです。
<script id = "test" type = "text/html">
// type = "text/html"でスクリプトタグを使用して、テンプレートを保存します。
<h1> <％= title％> </h1>
<ul>
<％
for（i = 0; i <list.length; i ++）{％>
<li> iteml <％= i+1％>：<％= list [i]％> </li>
<％}％>
</ul>
//テンプレートロジック構文の開始と終了の定義記号は<％と％>です。 <％の後に=記号が続くと、変数コンテンツが出力されます。
</script>
レンダリングテンプレート
コードコピーは次のとおりです。
var data = {
タイトル：「タグ」、
リスト：[「文学」、「ブログ」、「写真」、「映画」、「フォーク」、「旅行」、「ギター」]]]
};
var html = template.render（ "test"、data）;
document.getElementById（ 'content'）。innerhtml = html;