よく使用される JavaScript テンプレート エンジンの紹介_JavaScript スキル

最近は仕事内容が徐々に自分の理想（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 は、Haml の影響を受けた JavaScript で実装されたノード用の高性能テンプレート エンジンです。

6.ホーガン.js

Twitter の JavaScript テンプレート エンジン。

7. ハンドルバー

Handlebars は JavaScript ページ テンプレート ライブラリです

8. アートテンプレート

artTemplate は、新世代の JavaScript テンプレート エンジンです。v8 でのレンダリング効率は、Chrome でのレンダリング効率テストでは、よく知られているエンジン Mustache の 25 倍と 32 倍に達します。とマイクロ tmpl です。エンジンはデバッグをサポートしています。レンダリング中にエラーが発生した場合、デバッガーは例外を生成したテンプレート ステートメントを特定できるため、フロントエンド テンプレートのデバッグが難しいという問題が解決されます。

独自のテンプレート コンパイル ツールは、実行するテンプレート エンジンに依存せずにフロントエンド テンプレートを JS ファイルにコンパイルできるため、フロントエンド テンプレートはブラウザの制限を突破してファイルごとに整理できます。バックエンドテンプレートなどのディレクトリをロードしたり、ネストを含めたりする必要があります。これはすべて 2kb(gzip) にあります!

このプラグイン名に見覚えがあると思われるかもしれません、そうです! artDialog Sugar Cookie

の作者でもあります

ブログアドレス: http://www.planeart.cn/

見積エンジン

コードをコピーします コードは次のとおりです:

テンプレートを書く

コードをコピーします コードは次のとおりです:

レンダリング テンプレート

コードをコピーします コードは次のとおりです:

var data = {
タイトル: 'ラベル'、
リスト: [「アート」、「ブログ」、「写真」、「映画」、「フォーク」、「旅行」、「ギター」]
};
var html=template.render("テスト",データ);
document.getElementById('content').innerHTML = html;