この記事は、クリス?ペリーとリテシュ?クマールによってピアレビューされました。 SetePointコンテンツを最高にするためにSitePointのピアレビュアーのすべてに感謝します！ この記事では、JavaScriptのテンプレートの概要を説明します。まず、JavaScriptテンプレートが何であるか、それらを使用する時(shí)期とそれらをどのように実裝するかについて説明します。その後、人気のあるテンプレートエンジンのいくつかについてもう少し詳しく説明します?？冥窑病ⅴ膝螗丧毳些`、jQueryテンプレートに焦點(diǎn)を當(dāng)てます。 キーテイクアウト

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

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

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

• javaScriptテンプレートとは？
• JavaScriptテンプレートは、HTML構(gòu)造を內(nèi)部に含まれるコンテンツから分離する方法です。テンプレートシステムは一般にいくつかの新しい構(gòu)文を?qū)毪筏蓼工?、特に以前にテンプレートシステムを使用した場(chǎng)合（例：PHPのTwig）。注意すべき面白い點(diǎn)は、トークンの交換は通常、口ひげとハンドルバーが名前を?qū)Г訾攻昆芝毳`リーブラケット（{{...}}）によって象徴されることです（ヒント：橫に曲がり、類似性を確認(rèn)します）。

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

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

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

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

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

  voutache.js

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

  キーポイント

  9kbファイルサイズ（?。?/p>

  simple

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

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

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

  handlebars.js

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

  • で各アイテムをラップする
    リストイテレーターを作成します。ブロック式の詳細(xì)については、こちらをご覧ください キーポイント
    プリコンパイルされたテンプレートを使用している場(chǎng)合、
    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を追加することをあまり心配していないプロジェクトに最適です。また、ブロック式を使用したい場(chǎng)合にも進(jìn)む方法です。

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

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

    jQueryテンプレート

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

    キーポイント

    7kbファイルサイズ（?。?/h2>

    jquery（82kb）

    が必要です

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

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

    underscore.js

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

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

    閉會(huì)の備考

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

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

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

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

    ??

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

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

    単一のプロジェクトで複數(shù)のJavaScriptテンプレートエンジンを使用できますか？プロジェクト、通常はお?jiǎng)幛幛筏蓼护?。複數(shù)のエンジンを使用すると、コードの不一致と複雑さが増加する可能性があります。あなたのニーズに合ったテンプレートエンジンを1つ選択し、プロジェクト全體でそれに固執(zhí)するのが最善です。

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

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

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

    JavaScriptテンプレートエンジンの間にパフォーマンスの違いはありますか？ 。テンプレートのコンパイルが速いエンジンもあれば、レンダリングに優(yōu)れているエンジンもあります。ただし、ほとんどのWebアプリケーションでは、これらの違いがパフォーマンスに顕著な影響を與える可能性は低いです。 、既存のエンジンで満たされない特定のニーズがない限り、一般的に推奨されません。テンプレートエンジンを作成するには、JavaScriptを深く理解する必要があり、時(shí)間がかかる可能性があります。多くの場(chǎng)合、実行時(shí)にエラーが発生するためです。ただし、ほとんどのエンジンは、問題の原因に向けてあなたを?qū)Г长趣扦胗杏盲圣ē椹`メッセージを提供します。また、リナーを使用して構(gòu)文エラーをキャッチすることも良い考えです。他のコンテキストで使用されます。たとえば、電子メール、PDF、またはその他のタイプのテキストベースのコンテンツを生成するために使用できます。テンプレートエンジンの主な利點(diǎn)は、プレゼンテーションからデータを分離する機(jī)能です。これは、幅広いアプリケーションで役立つ可能性があります。

以上がJavaScriptテンプレートエンジンの概要の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。