Webアプリケーションは通常、MVCアーキテクチャを使用して、プレゼンテーションビューからビジネスロジックを分離します。複雑なプロジェクトには、JavaScript操作を使用する多數(shù)のクライアントHTMLが含まれます。この場合、テンプレートシステムを使用して再利用性を向上させ、ビュー管理タスクを簡素化できます。 Moustache.jsは、テンプレートの管理に使用できる十分に文書化されたテンプレートシステムを提供します。さらに、Moustacheは複數(shù)の言語をサポートするため、サーバー側(cè)で別のテンプレートシステムを使用する必要はありません。この記事では、口ひげを使用することの基本について説明します。
キーポイント
- Moustache.jsは、複雑なWebアプリケーションでHTMLテンプレートを管理し、再利用性を向上させ、ビュー管理タスクを簡素化するために使用できる十分に文書化されたテンプレートシステムです。
- Moustache.jsは非論理的です。つまり、そのテンプレートには、if-else條件またはループ用の條件が含まれていません。ダブルブレースで示されたラベルを使用して、テンプレートにデータを追加します。
- 口ひげテンプレートは、インラインメソッド、インラインスクリプト、外部HTMLスニペットなど、さまざまな方法で定義できます。選択する方法は、プロジェクトの特定のニーズに依存します。
- Moustache.jsは、クライアント側(cè)とサーバー側(cè)の両方で使用できる多機能ツールで、複數(shù)の言語をサポートします。また、変數(shù)、セクション、関數(shù)、部分テンプレートなどの複雑なテンプレートを管理するためのタグが付屬しています。
なぜテンプレートシステムが必要なのですか？
テンプレートシステムについて知らないほとんどの開発者は、新しいHTMLブロックのコードを作成し、JavaScriptを使用してDOMに動的に挿入します。一般的な方法は、HTML要素を文字列として指定してから、innerHTMLプロパティを設定するか、jQuery HTML（）メソッドを呼び出すことです。例は次のとおりです。
var dynamic_html = "<div>HighlightedAuthor</div>";
document.getElementById("container").innerHTML = dynamic_html;</pre>
以下に示すように、DOMを作成する別の方法は、要素を作成して個別に追加することです。
上記の方法は両方とも、ドキュメントに要素を動的に効果的に追加できます。ウェブサイトの3つの異なるページで使用する必要がある適切に設計された弾丸リストがある狀況を考えてみましょう。これらの手法を使用して、3つの異なる場所でHTMLコードのリストを繰り返す必要があります。これはしばしば悪いコーディング習慣と見なされます。この場合、コードを複製することなく、さまざまな場所で事前定義されたテンプレートを使用できます。 Moustache.jsは非常に人気のあるJavaScriptテンプレートエンジンです。 Moustacheは、複數(shù)の言語でサーバー側(cè)とクライアント側(cè)のテンプレートを提供するため、別のテンプレートエンジンを選択することを心配する必要はありません。 var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');
highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);</pre>
Mustache.jsの初心者 Moustacheは、JavaScript、Ruby、Python、PHP、Javaなどの言語に適したオープンソースのロジックフリーテンプレートシステムです。 Githubの公式ページにアクセスして、ライブラリのコピーを入手できます。口ひげは、動的テンプレートを作成するための基礎としてテンプレートとビューを使用します。ビューには、テンプレートに含めるJSONデータが含まれています。テンプレートには、表示データを含むテンプレートタグを使用したプレゼンテーションHTMLまたはデータが含まれています。先ほど、口ひげは非論理的であると述べました。これは、テンプレートには、if-else條件またはループ用の條件が含まれていないことを意味します。それでは、簡単な例で口ひげテンプレートを始めましょう。
var dynamic_html = "<div>HighlightedAuthor</div>";
document.getElementById("container").innerHTML = dynamic_html;</pre>
最初に、ドキュメントにMoustache.jsファイルを含める必要があります。その後、口ひげテンプレートの作成を開始できます。上記の例では、人の名前と職業(yè)を含むビューがあります。次に、render（）関數(shù)內(nèi)でコードと名前とキャリアデータを提示するタグを使用します。ラベルは、それらを取り巻く二重ブレースまたはひげで表されます。次に、render（）メソッドがどのように機能するかを見てみましょう。
マスターテンプレートのレンダリング
次のコードは、Moustache.jsファイルでのrender（）関數(shù)の実裝を示しています。 3つのパラメーターをrender（）に渡すことができます。最初の2つのパラメーターテンプレートとビューが必要です。部分的なものは、メインテンプレートに注入できる動的テンプレートと見なすことができます。前の例では、テンプレートをインラインパラメーターとして渡し、ビューを2番目のパラメーターとして渡し、結(jié)果を出力変數(shù)に割り當てました。
var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');
highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);</pre>
これは、口ひげを使用してテンプレートされた最も基本的な形式です。より標準的なコードを作成するために使用できる他の方法を見てみましょう。
定義口ひげテンプレート
アプリケーションに口ひげテンプレートを定義する方法はいくつかあります。これらの方法は、CSSを含むインラインスタイル、インラインスタイルシート、および外部スタイルシートを使用することに似ています。前述の例は、テンプレートを関數(shù)に直接渡すため、インライン方法と見なすことができます。この方法は、再利用可能なテンプレートの可能性を防ぎます。関數(shù)に直接渡す代わりに、テンプレートをインラインスクリプトテンプレートとして定義する方法を見てみましょう。
インラインスクリプトとしてのテンプレートテンプレート
</pre>
に行くことができます
ドキュメントに異なるIDを持つテンプレートを必要なだけ含めることができます。テンプレートを使用する場合は、InnerHTMLを使用してScriptタグ內(nèi)にHTMLを取得し、テンプレートとして渡します。最初の例は、次のコードに変更されます。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mustache.js Inline Method</title>
<??>
</head>
<body>
<??>
<p id="person"></p>
</body>
<??>
</html></pre>
ご覧のとおり、テンプレートは個別に保存され、必要に応じて動的に使用されます。この方法は、テンプレートを再利用する可能性を高めます。ただし、インラインスクリプトを使用すると、テンプレートのスコープが1ページに制限されます。複數(shù)のページがある場合は、テンプレートをもう一度定義する必要があります。したがって、外部ファイルにテンプレートを含めることは、CSSと同様に理想的なソリューションです。
外部HTMLスニペットとしてのテンプレートテンプレート
この手法では、jQueryを使用してテンプレートを?qū)g裝します。 jQueryは、外部ドキュメントの一部を取得するために使用できるLoad（）という関數(shù)を提供します。この方法を使用して、外部テンプレートファイルからテンプレートを動的にロードします。 Load（）関數(shù)は、それらを返す代わりにスクリプトを?qū)g行するため、前の方法のようにスクリプトタグ內(nèi)にテンプレートを作成することはできません。次の例は、使用する外部テンプレートファイルを示しています。
var dynamic_html = "<div>HighlightedAuthor</div>";
document.getElementById("container").innerHTML = dynamic_html;</pre>テンプレートのスクリプトの代わりに要素を使用して、jQueryのload（）関數(shù)と互換性のあるものにしました。ここには、3つの異なるIDを持つ3つの異なるテンプレートがあります。それでは、これらのテンプレートをページで使用し続けましょう。 <div>
var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');
highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);</pre>jQueryは、変數(shù)に割り當てる代わりに、返されたドキュメントをHTML要素に挿入します。したがって、テンプレートを保持するために仮想コンテナが必要です。デフォルトで非表示になったテンプレートコンテナを使用しました。上記の例では、Template1を取得してロードします。その後、仮想コンテナからテンプレートを取得し、レンダリングのために口ひげに渡すことができます。これが外部の方法の仕組みです。 Ajax要求を使用して、サーバーからデータを取得することもできます。
結(jié)論
テンプレートエンジンとフレームワークは、動的に変化するプレゼンテーションビューを持つ複雑なシステムを管理するために非常に重要です。 Moustache.jsは、クライアント側(cè)の管理テンプレートに最適な選択肢の1つです。このチュートリアルの冒頭で、テンプレートが重要である理由を説明します。次に、口ひげテンプレートを使用してさまざまな手法を?qū)毪肪Aけます。これで、プロジェクトに口ひげテンプレートを?qū)g裝する方法を選択できるようになります?？冥窑播匹螗抓飑`トを使用するためのさまざまな手法を探索しましたが、口ひげには、複雑なテンプレートの管理に使用される変數(shù)、セクション、関數(shù)、部分テンプレートなどのタグも付屬しています。各タグの構(gòu)文について議論することは、このチュートリアルの範囲を超えています。 Moustache Githubページに、口ひげタグに関する包括的なガイドを見つけることができます。以前の経験をMoustache.jsでお気軽に共有してください！
Moustache.js faq（faq）
- Moustache.jsと他のJavaScriptテンプレートライブラリの主な違いは何ですか？
Moustache.jsは論理テンプレートの構(gòu)文です。これは、HTML、構(gòu)成ファイル、ソースコード（Anything）に使用できることを意味します。オブジェクトに提供されているハッシュまたは値を使用して、テンプレート內(nèi)のラベルを拡張することで機能します。他のJavaScriptテンプレートライブラリとは異なり、Moustache.jsには、ステートメント、その他の條項、またはループの場合はいかなるものも含まれていません。代わりに、ラベルのみがあります。いくつかのタグは値に置き換えられ、一部は何もない、他のタグは一連の値です。
- HTMLテンプレートにMustache.jsを使用する方法は？
htmlテンプレートにMoustache.jsを使用するには、最初にhtmlファイルにvustache.jsスクリプトを含める必要があります。次に、タグ內(nèi)のテンプレートを定義します。このテンプレートには、データを挿入するプレースホルダーを含めることができます。これらのプレースホルダーは、{{name}}などの二重ブレースで表されます。次に、Moustache.render（）関數(shù)を使用して、提供されたデータでテンプレートをレンダリングします。 <script></script>
- node.jsでvustache.jsを使用できますか？
はい、node.jsをwithnode.jsを使用するMustache.jsを使用できます。これを行うには、NPMを使用して口ひげパッケージをインストールする必要があります。インストールが完了したら、node.jsファイルでそれを必要とし、それを使用してテンプレートをレンダリングできます。
- Mustache.jsを使用して配列を通過する方法は？
voutache.jsでは、{{#Array}}…{{/array}} syntaxを使用して配列をトラバースできます。このブロック內(nèi)で、{{{。}}を使用して、配列內(nèi)の現(xiàn)在のアイテムを參照できます。これにより、テンプレートの配列內(nèi)の各アイテムを表示できます。
- 口ひげで條件付きステートメントをどのように使用するか？
Moustache.jsは、従來のIFステートメントをサポートしていない論理的に非論的なテンプレートライブラリですが、セクションを使用して同様の結(jié)果を得ることができます。セクションは、データオブジェクトのキーの値に基づいて、テキストブロックを1回以上レンダリングします。
- Moustache.jsにいくつかのテンプレートを含める方法は？
Moustache.jsの一部のテンプレートを使用すると、より大きなテンプレートに小さなテンプレートを含めることができます。これは、ヘッダーやフッターなどの一般的な要素を再利用するのに非常に役立ちます。部分テンプレートを含めるには、{{＆gt; partial}}構(gòu)文を使用できます。
- Moustache.jsでHTMLを逃れる方法は？
デフォルトでは、Moustache.jsはXSS攻撃を防ぐためにデータでHTMLを逃がします。データからHTMLをレンダリングする場合は、{{{{html}}}などのトリプルブレース構(gòu)文を使用できます。
- サーバー側(cè)にMoustache.jsを使用できますか？
はい、サーバー側(cè)にMustache.jsを使用できます。これは、テンプレートをクライアントに送信する前にレンダリングするのに役立ち、クライアントで実行する必要があるJavaScriptの量を減らします。
- Moustache.jsのテンプレートをプレリコンパイルする方法は？
Moustache.jsのテンプレートをプレシャルすると、実行時に行う必要がある作業(yè)を減らすことにより、パフォーマンスを改善できます。テンプレートを事前にコンパイルするには、Moustache.Parse（）関數(shù)を使用できます。
- Mustache.jsテンプレートをデバッグする方法は？
Moustache.jsテンプレートのデバッグは、ライブラリが多くのエラーメッセージを提供していないため、難しい場合があります。ただし、Moustache.Parse（）関數(shù)を使用して、テンプレートが有効かどうかを確認できます。この関數(shù)は、テンプレート構(gòu)造が正しいかどうかを確認するためにチェックできるタグの配列を返します。 以上がMoustache.jsを使用してHTMLテンプレートを作成しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
8636
17
1783
16
1725
56
1577
28
1441
31
Java vs. JavaScript：混亂を解消します
Jun 20, 2025 am 12:27 AM
JavaとJavaScriptは異なるプログラミング言語であり、それぞれ異なるアプリケーションシナリオに適しています。 Javaは大規(guī)模なエンタープライズおよびモバイルアプリケーション開発に使用されますが、JavaScriptは主にWebページ開発に使用されます。
JavaScriptコメント：短い説明
Jun 19, 2025 am 12:40 AM
JavaScriptcommentsEareEssentialential-formaining、およびGuidingCodeexecution.1）single-linecommentseared forquickexplanations.2）多LinecommentsexplaincomplexlogiCorprovidededocumentation.3）clarifyspartsofcode.bestpractic
JSで日付と時間を操作する方法は？
Jul 01, 2025 am 01:27 AM
JavaScriptで日付と時間を処理する場合は、次の點に注意する必要があります。1。日付オブジェクトを作成するには多くの方法があります。 ISO形式の文字列を使用して、互換性を確保することをお勧めします。 2。時間情報を取得および設定して、メソッドを設定でき、月は0から始まることに注意してください。 3.手動でのフォーマット日付には文字列が必要であり、サードパーティライブラリも使用できます。 4.ルクソンなどのタイムゾーンをサポートするライブラリを使用することをお勧めします。これらの重要なポイントを習得すると、一般的な間違いを効果的に回避できます。
JavaScript vs. Java：開発者向けの包括的な比較
Jun 20, 2025 am 12:21 AM
javascriptispreferredforwebdevelopment、whilejavaisbetterforlge-scalebackendsystemsandroidapps.1）javascriptexcelsininintingtivewebexperiences withitsdynAmicnature anddommanipulation.2）javaofferstruntypyping-dobject-reientedpeatures
なぜの下部にタグを配置する必要があるのですか？
Jul 02, 2025 am 01:22 AM
PLACSTHETTHETTHE BOTTOMOFABLOGPOSTORWEBPAGESERVESPAGESPORCICALPURPOSESESFORSEO、userexperience、andDesign.1.IthelpswithiobyAllowingseNStoAccessKeysword-relevanttagwithtagwithtagwithtagwithemaincontent.2.iTimrovesexperiencebyepingepintepepinedeeping
JavaScript：効率的なコーディングのためのデータ型の調(diào)査
Jun 20, 2025 am 12:46 AM
javascripthassevenfundamentaldatypes：number、string、boolean、undefined、null、object、andsymbol.1）numberseadouble-precisionformat、有用であるため、有用性の高いものであるため、but-for-loating-pointarithmetic.2）ストリングリムムット、使用率が有用であること
DOMでのイベントの泡立ちとキャプチャとは何ですか？
Jul 02, 2025 am 01:19 AM
イベントキャプチャとバブルは、DOMのイベント伝播の2つの段階です。キャプチャは最上層からターゲット要素までであり、バブルはターゲット要素から上層までです。 1.イベントキャプチャは、AddEventListenerのUseCaptureパラメーターをTrueに設定することにより実裝されます。 2。イベントバブルはデフォルトの動作であり、UseCaptureはfalseに設定されているか、省略されます。 3。イベントの伝播を使用して、イベントの伝播を防ぐことができます。 4.イベントバブルは、動的なコンテンツ処理効率を改善するためにイベント委任をサポートします。 5.キャプチャを使用して、ロギングやエラー処理など、事前にイベントを傍受できます。これらの2つのフェーズを理解することは、タイミングとJavaScriptがユーザー操作にどのように反応するかを正確に制御するのに役立ちます。
JavaとJavaScriptの違いは何ですか？
Jun 17, 2025 am 09:17 AM
JavaとJavaScriptは、異なるプログラミング言語です。 1.Javaは、エンタープライズアプリケーションや大規(guī)模なシステムに適した、靜的に型付けされ、コンパイルされた言語です。 2。JavaScriptは動的なタイプと解釈された言語であり、主にWebインタラクションとフロントエンド開発に使用されます。
