JavaScriptテンプレートエンジンの概要

この記事は、クリス・ペリーとリテシュ・クマールによってピアレビューされました。 SetePointコンテンツを最高にするためにSitePointのピアレビュアーのすべてに感謝します！ この記事では、JavaScriptのテンプレートの概要を説明します。まず、JavaScriptテンプレートが何であるか、それらを使用する時期とそれらをどのように実装するかについて説明します。その後、人気のあるテンプレートエンジンのいくつかについてもう少し詳しく説明します。口ひげ、ハンドルバー、jQueryテンプレートに焦点を当てます。 キーテイクアウト

JavaScriptテンプレートは、HTML構造をコンテンツから分離し、コードベースの保守性を向上させる方法を提供します。これらは、リアルタイムのWebアプリや国際化に特に有益であり、同じ形式を使用して異なるコンテンツを表示する必要があることがよくあります。

Moustache.jsは、小規模プロジェクトや迅速なプロトタイプに最適な多言語で論理のないテンプレートシステムです。シンプルで、依存関係がなく、事前補償されたテンプレートを必要としません。さらに、テンプレートのほぼ同一であるため、プロジェクトはハンドルバーに簡単にアップグレードすることができます。 口ひげの上に構築されたHandleBars.jsは、ブロック式とプリコンパイルされたテンプレートをサポートし、パフォーマンスを大幅に改善します。パフォーマンスが重要であるプロジェクトに適しており、ページの重量に18kbを追加することは懸念事項ではありません。パフォーマンスの利点とファイルサイズの削減を確認するには、事前コンパイルされたテンプレートを使用する必要があります。

jQueryテンプレートは、Moustache.jsやHandleBars.jsほど人気はありませんが、見落とさないでください。 jQueryが必要であり、データ属性を使用して、HTMLフラグメントのデータを挿入する場所を示します。ファイルサイズが小さいため、すでにjQueryを含むプロジェクトに最適です。ただし、ファイルの合計サイズを考慮してjQueryを使用しないプロジェクトにはお勧めしません。

• javaScriptテンプレートとは？
• JavaScriptテンプレートは、HTML構造を内部に含まれるコンテンツから分離する方法です。テンプレートシステムは一般にいくつかの新しい構文を導入しますが、特に以前にテンプレートシステムを使用した場合（例：PHPのTwig）。注意すべき面白い点は、トークンの交換は通常、口ひげとハンドルバーが名前を導き出すダブルカーリーブラケット（{{...}}）によって象徴されることです（ヒント：横に曲がり、類似性を確認します）。

  JavaScriptテンプレートをいつ使用する必要がありますか？

  JavaScript文字列内にHTMLを含めるとすぐに、JavaScriptテンプレートが与えることができることについて考え始めるはずです。懸念の分離は、保守可能なコードベースを構築する場合に最も重要です。そのため、これを達成するのに役立つものはすべて調査する必要があります。フロントエンドのWeb開発では、これはHTMLをJavaScriptから分離すると象徴されています（これにより、HTMLにJavaScriptインラインを含めるべきではないという点で両方の方法で機能します）。 JavaScriptテンプレートの恩恵を受ける可能性のあるいくつかの一般的なシナリオは、リアルタイムのWebアプリ（たとえば、イベントコメントのライブストリーミングアプリ）または国際化（I18N）です。 。

  JavaScriptテンプレートをどのように実装しますか？

  特定のライブラリの例を使用してこれについて詳しく説明しますが、本質的には、選択したライブラリを含めてテンプレートを取得し、いくつかのデータと一緒にレンダリングするのと同じくらい簡単です。

  ほとんどのライブラリは、インラインテンプレートと外部テンプレートの両方をサポートしています。インラインテンプレートは、テンプレートが非常に少ない場合や、各ページのロードに含まれるテンプレートを使用することを知っている場合に最適ですが、一般的にテンプレートは外部でなければなりません。外部テンプレートは多くの利点をもたらします。主に、テンプレートがページで必要でない限り、クライアントにダウンロードされることはありません。

  voutache.js

  口ひげは、多言語の論理のないテンプレートシステムです。 Moustache.jsの実装は、多くの1つにすぎません。したがって、（非常に単純な）構文に慣れたら、さまざまなプログラミング言語で使用できます。

  キーポイント

  9kbファイルサイズ（小）

  simple

  依存関係はありません
  no logic
  プレシャルされたテンプレートはありません
  プログラミング言語不可知論者
  • 例

  Moustache.jsは、テンプレートの複雑さが少なくなる小さなプロジェクトやクイックプロトタイプに最適です。注意すべき重要なことは、Moustache.jsでプロジェクトを開始してから、テンプレートが（ほとんど）同じであるため、後でハンドルバーに簡単にアップグレードできることです。

  口ひげの詳細を読みたい場合は、Mustache.jsを使用してHTMLテンプレートを作成してください。

  handlebars.js

  HandleBars.jsは口ひげの上に構築されており、主に口ひげテンプレートと互換性があります。一言で言えば、Mustache.jsが提供するすべてのMoustache.jsが提供され、さらにブロック式とプリコンパイルされたテンプレートをサポートします。プリコンパイルされたテンプレートは、パフォーマンスを大きなマージンで増やすため、大まかなパフォーマンステストでは、Moustacheテンプレートの約半分の時間でレンダリングされたハンドルバーをプリコンパイルしたテンプレート）。ブロック式を使用すると、テンプレートにもっとロジックを含めることができます。これらのより一般的な例の1つは、高度な反復因子です。

  • で各アイテムをラップする
    リストイテレーターを作成します。ブロック式の詳細については、こちらをご覧ください キーポイント
    プリコンパイルされたテンプレートを使用している場合、
    86kbファイルサイズ（大）、または18kb
    • ブロック式（ヘルパー）
    • プレリ縮付けされたテンプレート
    • 依存関係はありません
    例
    codepen

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

    on SitePoint（@SitePoint）のペンHandleBars.jsの例を参照してください

    //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は、パフォーマンスが重要であり、ページの重量に18kbを追加することをあまり心配していないプロジェクトに最適です。また、ブロック式を使用したい場合にも進む方法です。

    HandleBars.js（およびファイルサイズが大幅に削減された）のパフォーマンスの利点を確認するには、事前コンパイルされたテンプレートを使用する必要があることに注意してください。効率的に行うには、ハンドルバーを追加する必要があります。JSテンプレートコンパイルは、ビルドプロセスに（Gruntには優れたプラグインがあります）。

    ハンドルバーの詳細については、ハンドルバーの初心者向けガイドをご覧ください。

    jQueryテンプレート

    jQueryテンプレートは、Moustache.jsやHandleBars.jsほど人気が​​ありませんが、見落とすべきではありません。テンプレートは、新しい構文がない単なるHTMLであるため、口ひげテンプレートとは異なります。トークン交換手法の代わりに、データ属性を使用して、HTMLフラグメントのデータを挿入する場所を示します。

    キーポイント

    7kbファイルサイズ（小）

    jquery（82kb）

    が必要です

    シンプルですが、口ひげとハンドルバーの動作方法とは異なります

    プレシャルされたテンプレートはありません
    • 例
    codepenのSitePoint（@SitePoint）によるペンJQueryテンプレートの例を参照してください。
    • jQueryテンプレートは、ファイルサイズが非常に小さいため、すでにjqueryを含めているプロジェクトに最適です。ただし、プロジェクトがjQueryを利用しない場合は、ファイルの合計サイズを考慮することをお勧めするのは困難です。
    その他のオプション
    もちろん、この問題には他にも多くの解決策がありますが、この記事では詳しく説明しません。他のいくつかの人気のある選択肢の非常に簡単な概要を次に示します。

    underscore.js

    Underscoreは、無数の他の機能の中でテンプレート機能を提供する人気のJavaScriptライブラリです。デフォルトでは、口ひげが使用する二重巻き毛ブラケット構文を使用せず、代わりにERBスタイルのデリミター（）を選択します。

    埋め込まれたJSテンプレート（EJS）
    underscore.jsと同様に、埋め込まれたJSテンプレートはテンプレートにERBスタイルの構文を使用します。 EJSで注意すべきことの1つは、テンプレートが外部ファイルでなければならないということです。それらはインラインではないことです。

    閉会の備考

    では、どちらが一番いいですか？ほとんどの開発の問題と同様に、銀の弾丸はありません。それは多くのことに依存します;

    あなたはすでにあなたのプロジェクトでjqueryを使用していますか？
    • どのテンプレートシステムで経験がありますか？
    • テンプレートからロジックを締め出したいですか？
    • ページファイルの合計サイズについてどれほど心配していますか？
    • パフォーマンスについてどれほど心配していますか？あなたのウェブサイトは低電力デバイスをサポートする必要がありますか？
    • これらの要因について考えたら、上記のリストから教育を受けた選択をすることができます。ただし、前に簡単に述べたように、優れた柔軟な戦略は、最初に口ひげを実装し、次にハンドルバーに交換することです。
    チャイムを入れたいですか？以下にコメントを残してください！

    JavaScriptテンプレートエンジンに関するよくある質問

    JavaScriptテンプレートエンジンの重要な違いは何ですか？

    ​​

    JavaScriptテンプレートエンジンは、構文、パフォーマンス、および機能の点で異なります。たとえば、EJSは単純さと使いやすさで知られていますが、HandleBars.jsは強力な論理のないテンプレートを提供します。 Moustache.jsは、言語間互換性のためにもう1つの人気のある選択肢です。プロジェクトの要件とコーディングスタイルに合ったテンプレートエンジンを選択することが重要です。

    JavaScriptテンプレートエンジンはどのようにWeb開発を改善しますか？動的なWebページを作成します。開発者は、HTML構造をデータから分離し、よりクリーンで保守可能なコードにつながることができます。テンプレートエンジンは再利用可能なコンポーネントもサポートしているため、開発時間を大幅に短縮できます。

    単一のプロジェクトで複数のJavaScriptテンプレートエンジンを使用できますか？プロジェクト、通常はお勧めしません。複数のエンジンを使用すると、コードの不一致と複雑さが増加する可能性があります。あなたのニーズに合ったテンプレートエンジンを1つ選択し、プロジェクト全体でそれに固執するのが最善です。

    JavaScriptテンプレートエンジンは、express.js？

    Express.jsであるNode.jsの人気のあるWebアプリケーションフレームワークでどのように機能し、幅広いテンプレートエンジンをサポートしています。テンプレートエンジンを選択したら、Express.jsのデフォルトエンジンとして設定できます。これにより、選択したエンジンを使用してビューをレンダリングし、動的なHTMLを生成するプロセスを簡素化できます。 JavaScriptの機能を使用して、ストリング補間とマルチライン文字列をより簡単に可能にします。 HTMLを生成するために使用できますが、再利用可能なコンポーネントのサポートや懸念の分離など、テンプレートエンジンが提供する機能の多くがありません。ただし、本格的なテンプレートエンジンが不要な単純なユースケースには役立ちます。

    プロジェクトに適したJavaScriptテンプレートエンジンを選択するにはどうすればよいですか？エンジンは、プロジェクトの要件と個人的な好みに依存します。プロジェクトの複雑さ、エンジンの学習曲線、それが提供する機能などの要因を考慮してください。また、コミュニティを調べてエンジンの周りをサポートすることも良い考えです。

    JavaScriptテンプレートエンジンの間にパフォーマンスの違いはありますか？ 。テンプレートのコンパイルが速いエンジンもあれば、レンダリングに優れているエンジンもあります。ただし、ほとんどのWebアプリケーションでは、これらの違いがパフォーマンスに顕著な影響を与える可能性は低いです。 、既存のエンジンで満たされない特定のニーズがない限り、一般的に推奨されません。テンプレートエンジンを作成するには、JavaScriptを深く理解する必要があり、時間がかかる可能性があります。多くの場合、実行時にエラーが発生するためです。ただし、ほとんどのエンジンは、問題の原因に向けてあなたを導くことができる有用なエラーメッセージを提供します。また、リナーを使用して構文エラーをキャッチすることも良い考えです。他のコンテキストで使用されます。たとえば、電子メール、PDF、またはその他のタイプのテキストベースのコンテンツを生成するために使用できます。テンプレートエンジンの主な利点は、プレゼンテーションからデータを分離する機能です。これは、幅広いアプリケーションで役立つ可能性があります。

以上がJavaScriptテンプレートエンジンの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。