この記事は、クリス・ペリーとリテシュ・クマールによってピアレビューされました。 SetePointコンテンツを最高にするためにSitePointのピアレビュアーのすべてに感謝します！ この記事では、JavaScriptのテンプレートの概要を説明します。まず、JavaScriptテンプレートが何であるか、それらを使用する時期とそれらをどのように実装するかについて説明します。その後、人気のあるテンプレートエンジンのいくつかについてもう少し詳しく説明します。口ひげ、ハンドルバー、jQueryテンプレートに焦点を当てます。 キーテイクアウト
JavaScriptテンプレートは、HTML構造をコンテンツから分離し、コードベースの保守性を向上させる方法を提供します。これらは、リアルタイムのWebアプリや国際化に特に有益であり、同じ形式を使用して異なるコンテンツを表示する必要があることがよくあります。
JavaScript文字列内にHTMLを含めるとすぐに、JavaScriptテンプレートが与えることができることについて考え始めるはずです。懸念の分離は、保守可能なコードベースを構築する場合に最も重要です。そのため、これを達成するのに役立つものはすべて調査する必要があります。フロントエンドのWeb開発では、これはHTMLをJavaScriptから分離すると象徴されています（これにより、HTMLにJavaScriptインラインを含めるべきではないという点で両方の方法で機能します）。 JavaScriptテンプレートの恩恵を受ける可能性のあるいくつかの一般的なシナリオは、リアルタイムのWebアプリ（たとえば、イベントコメントのライブストリーミングアプリ）または国際化（I18N）です。 。
JavaScriptテンプレートをどのように実装しますか？
voutache.js
口ひげは、多言語の論理のないテンプレートシステムです。 Moustache.jsの実装は、多くの1つにすぎません。したがって、（非常に単純な）構文に慣れたら、さまざまなプログラミング言語で使用できます。
キーポイント9kbファイルサイズ（小）
HandleBars.jsは口ひげの上に構築されており、主に口ひげテンプレートと互換性があります。一言で言えば、Mustache.jsが提供するすべてのMoustache.jsが提供され、さらにブロック式とプリコンパイルされたテンプレートをサポートします。プリコンパイルされたテンプレートは、パフォーマンスを大きなマージンで増やすため、大まかなパフォーマンステストでは、Moustacheテンプレートの約半分の時間でレンダリングされたハンドルバーをプリコンパイルしたテンプレート）。ブロック式を使用すると、テンプレートにもっとロジックを含めることができます。これらのより一般的な例の1つは、高度な反復因子です。
<span><span><span><script</span> id<span>="template"</span> type<span>="x-tmpl-mustache"</span>></span><span>
</span></span><span><span> <span><p>Use the <strong>{{power}}</strong>, {{name}}!</p>
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
//Grab the inline template
var template = document.getElementById('template').innerHTML;
//Parse it (optional, only necessary if template is to be used again)
Mustache.parse(template);
//Render the data into the template
var rendered = Mustache.render(template, {name: "Luke", power: "force"});
//Overwrite the contents of #target with the rendered HTML
document.getElementById('target').innerHTML = rendered;
HandleBars.js（およびファイルサイズが大幅に削減された）のパフォーマンスの利点を確認するには、事前コンパイルされたテンプレートを使用する必要があることに注意してください。効率的に行うには、ハンドルバーを追加する必要があります。JSテンプレートコンパイルは、ビルドプロセスに（Gruntには優れたプラグインがあります）。
ハンドルバーの詳細については、ハンドルバーの初心者向けガイドをご覧ください。jQueryテンプレート
jQueryテンプレートは、Moustache.jsやHandleBars.jsほど人気がありませんが、見落とすべきではありません。テンプレートは、新しい構文がない単なるHTMLであるため、口ひげテンプレートとは異なります。トークン交換手法の代わりに、データ属性を使用して、HTMLフラグメントのデータを挿入する場所を示します。
キーポイント
jquery（82kb）
が必要ですUnderscoreは、無数の他の機能の中でテンプレート機能を提供する人気のJavaScriptライブラリです。デフォルトでは、口ひげが使用する二重巻き毛ブラケット構文を使用せず、代わりにERBスタイルのデリミター（）を選択します。
埋め込まれたJSテンプレート（EJS）閉会の備考
あなたはすでにあなたのプロジェクトでjqueryを使用していますか？
JavaScriptテンプレートエンジンに関するよくある質問
JavaScriptテンプレートエンジンの重要な違いは何ですか？
単一のプロジェクトで複数のJavaScriptテンプレートエンジンを使用できますか？プロジェクト、通常はお勧めしません。複数のエンジンを使用すると、コードの不一致と複雑さが増加する可能性があります。あなたのニーズに合ったテンプレートエンジンを1つ選択し、プロジェクト全体でそれに固執するのが最善です。
Express.jsであるNode.jsの人気のあるWebアプリケーションフレームワークでどのように機能し、幅広いテンプレートエンジンをサポートしています。テンプレートエンジンを選択したら、Express.jsのデフォルトエンジンとして設定できます。これにより、選択したエンジンを使用してビューをレンダリングし、動的なHTMLを生成するプロセスを簡素化できます。 JavaScriptの機能を使用して、ストリング補間とマルチライン文字列をより簡単に可能にします。 HTMLを生成するために使用できますが、再利用可能なコンポーネントのサポートや懸念の分離など、テンプレートエンジンが提供する機能の多くがありません。ただし、本格的なテンプレートエンジンが不要な単純なユースケースには役立ちます。
JavaScriptテンプレートエンジンの間にパフォーマンスの違いはありますか？ 。テンプレートのコンパイルが速いエンジンもあれば、レンダリングに優れているエンジンもあります。ただし、ほとんどのWebアプリケーションでは、これらの違いがパフォーマンスに顕著な影響を与える可能性は低いです。 、既存のエンジンで満たされない特定のニーズがない限り、一般的に推奨されません。テンプレートエンジンを作成するには、JavaScriptを深く理解する必要があり、時間がかかる可能性があります。多くの場合、実行時にエラーが発生するためです。ただし、ほとんどのエンジンは、問題の原因に向けてあなたを導くことができる有用なエラーメッセージを提供します。また、リナーを使用して構文エラーをキャッチすることも良い考えです。他のコンテキストで使用されます。たとえば、電子メール、PDF、またはその他のタイプのテキストベースのコンテンツを生成するために使用できます。テンプレートエンジンの主な利点は、プレゼンテーションからデータを分離する機能です。これは、幅広いアプリケーションで役立つ可能性があります。
以上がJavaScriptテンプレートエンジンの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
