Webアプリケーションは通常、MVCアーキテクチャを使用して、プレゼンテーションビューからビジネスロジックを分離します。複雑なプロジェクトには、JavaScript操作を使用する多数のクライアントHTMLが含まれます。この場合、テンプレートシステムを使用して再利用性を向上させ、ビュー管理タスクを簡素化できます。 Moustache.jsは、テンプレートの管理に使用できる十分に文書化されたテンプレートシステムを提供します。さらに、Moustacheは複数の言語をサポートするため、サーバー側で別のテンプレートシステムを使用する必要はありません。この記事では、口ひげを使用することの基本について説明します。
キーポイント
なぜテンプレートシステムが必要なのですか？
テンプレートシステムについて知らないほとんどの開発者は、新しい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は、複数の言語でサーバー側とクライアント側のテンプレートを提供するため、別のテンプレートエンジンを選択することを心配する必要はありません。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>ログイン後にコピー Moustacheは、JavaScript、Ruby、Python、PHP、Javaなどの言語に適したオープンソースのロジックフリーテンプレートシステムです。 Githubの公式ページにアクセスして、ライブラリのコピーを入手できます。口ひげは、動的テンプレートを作成するための基礎としてテンプレートとビューを使用します。ビューには、テンプレートに含めるJSONデータが含まれています。テンプレートには、表示データを含むテンプレートタグを使用したプレゼンテーションHTMLまたはデータが含まれています。先ほど、口ひげは非論理的であると述べました。これは、テンプレートには、if-else条件またはループ用の条件が含まれていないことを意味します。それでは、簡単な例で口ひげテンプレートを始めましょう。 最初に、ドキュメントにMoustache.jsファイルを含める必要があります。その後、口ひげテンプレートの作成を開始できます。上記の例では、人の名前と職業を含むビューがあります。次に、render（）関数内でコードと名前とキャリアデータを提示するタグを使用します。ラベルは、それらを取り巻く二重ブレースまたはひげで表されます。次に、render（）メソッドがどのように機能するかを見てみましょう。 マスターテンプレートのレンダリング 次のコードは、Moustache.jsファイルでのrender（）関数の実装を示しています。 3つのパラメーターをrender（）に渡すことができます。最初の2つのパラメーターテンプレートとビューが必要です。部分的なものは、メインテンプレートに注入できる動的テンプレートと見なすことができます。前の例では、テンプレートをインラインパラメーターとして渡し、ビューを2番目のパラメーターとして渡し、結果を出力変数に割り当てました。 これは、口ひげを使用してテンプレートされた最も基本的な形式です。より標準的なコードを作成するために使用できる他の方法を見てみましょう。 定義口ひげテンプレート アプリケーションに口ひげテンプレートを定義する方法はいくつかあります。これらの方法は、CSSを含むインラインスタイル、インラインスタイルシート、および外部スタイルシートを使用することに似ています。前述の例は、テンプレートを関数に直接渡すため、インライン方法と見なすことができます。この方法は、再利用可能なテンプレートの可能性を防ぎます。関数に直接渡す代わりに、テンプレートをインラインスクリプトテンプレートとして定義する方法を見てみましょう。 テンプレート に行くことができます
ご覧のとおり、テンプレートは個別に保存され、必要に応じて動的に使用されます。この方法は、テンプレートを再利用する可能性を高めます。ただし、インラインスクリプトを使用すると、テンプレートのスコープが1ページに制限されます。複数のページがある場合は、テンプレートをもう一度定義する必要があります。したがって、外部ファイルにテンプレートを含めることは、CSSと同様に理想的なソリューションです。 テンプレート
要素を使用して、jQueryのload（）関数と互換性のあるものにしました。ここには、3つの異なるIDを持つ3つの異なるテンプレートがあります。それでは、これらのテンプレートをページで使用し続けましょう。
結論
Moustache.js faq（faq）
タグ内のテンプレートを定義します。このテンプレートには、データを挿入するプレースホルダーを含めることができます。これらのプレースホルダーは、{{name}}などの二重ブレースで表されます。次に、Moustache.render（）関数を使用して、提供されたデータでテンプレートをレンダリングします。 はい、node.jsをwithnode.jsを使用するMustache.jsを使用できます。これを行うには、NPMを使用して口ひげパッケージをインストールする必要があります。インストールが完了したら、node.jsファイルでそれを必要とし、それを使用してテンプレートをレンダリングできます。 voutache.jsでは、{{#Array}}…{{/array}} syntaxを使用して配列をトラバースできます。このブロック内で、{{{。}}を使用して、配列内の現在のアイテムを参照できます。これにより、テンプレートの配列内の各アイテムを表示できます。 Moustache.jsは、従来のIFステートメントをサポートしていない論理的に非論的なテンプレートライブラリですが、セクションを使用して同様の結果を得ることができます。セクションは、データオブジェクトのキーの値に基づいて、テキストブロックを1回以上レンダリングします。 Moustache.jsの一部のテンプレートを使用すると、より大きなテンプレートに小さなテンプレートを含めることができます。これは、ヘッダーやフッターなどの一般的な要素を再利用するのに非常に役立ちます。部分テンプレートを含めるには、{{＆gt; partial}}構文を使用できます。 デフォルトでは、Moustache.jsはXSS攻撃を防ぐためにデータでHTMLを逃がします。データからHTMLをレンダリングする場合は、{{{{html}}}などのトリプルブレース構文を使用できます。 はい、サーバー側にMustache.jsを使用できます。これは、テンプレートをクライアントに送信する前にレンダリングするのに役立ち、クライアントで実行する必要があるJavaScriptの量を減らします。
以上がMoustache.jsを使用してHTMLテンプレートを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。var dynamic_html = "<div>HighlightedAuthor</div>";
document.getElementById("container").innerHTML = dynamic_html;</pre>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></pre><!DOCTYPE html>
<html lang="en">
<head>
<title>Mustache.js Inline Method</title>
<🎜>
</head>
<body>
<🎜>
<p id="person"></p>
</body>
<🎜>
</html></pre>
var dynamic_html = "<div>HighlightedAuthor</div>";
document.getElementById("container").innerHTML = dynamic_html;</pre><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>
Moustache.jsは論理テンプレートの構文です。これは、HTML、構成ファイル、ソースコード（Anything）に使用できることを意味します。オブジェクトに提供されているハッシュまたは値を使用して、テンプレート内のラベルを拡張することで機能します。他のJavaScriptテンプレートライブラリとは異なり、Moustache.jsには、ステートメント、その他の条項、またはループの場合はいかなるものも含まれていません。代わりに、ラベルのみがあります。いくつかのタグは値に置き換えられ、一部は何もない、他のタグは一連の値です。
htmlテンプレートにMoustache.jsを使用するには、最初にhtmlファイルにvustache.jsスクリプトを含める必要があります。次に、<script></script>
Moustache.jsのテンプレートをプレシャルすると、実行時に行う必要がある作業を減らすことにより、パフォーマンスを改善できます。テンプレートを事前にコンパイルするには、Moustache.Parse（）関数を使用できます。
Moustache.jsテンプレートのデバッグは、ライブラリが多くのエラーメッセージを提供していないため、難しい場合があります。ただし、Moustache.Parse（）関数を使用して、テンプレートが有効かどうかを確認できます。この関数は、テンプレート構造が正しいかどうかを確認するためにチェックできるタグの配列を返します。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
