Moustache.jsを使用してHTMLテンプレートを作成します
Webアプリケーションは通常、MVCアーキテクチャを使用して、プレゼンテーションビューからビジネスロジックを分離します。複雑なプロジェクトには、JavaScript操作を使用する多数のクライアントHTMLが含まれます。この場合、テンプレートシステムを使用して再利用性を向上させ、ビュー管理タスクを簡素化できます。 Moustache.jsは、テンプレートの管理に使用できる十分に文書化されたテンプレートシステムを提供します。さらに、Moustacheは複数の言語をサポートするため、サーバー側で別のテンプレートシステムを使用する必要はありません。この記事では、口ひげを使用することの基本について説明します。
キーポイント
- Moustache.jsは、複雑なWebアプリケーションでHTMLテンプレートを管理し、再利用性を向上させ、ビュー管理タスクを簡素化するために使用できる十分に文書化されたテンプレートシステムです。
- Moustache.jsは非論理的です。つまり、そのテンプレートには、if-else条件またはループ用の条件が含まれていません。ダブルブレースで示されたラベルを使用して、テンプレートにデータを追加します。
- 口ひげテンプレートは、インラインメソッド、インラインスクリプト、外部HTMLスニペットなど、さまざまな方法で定義できます。選択する方法は、プロジェクトの特定のニーズに依存します。
- Moustache.jsは、クライアント側とサーバー側の両方で使用できる多機能ツールで、複数の言語をサポートします。また、変数、セクション、関数、部分テンプレートなどの複雑なテンプレートを管理するためのタグが付属しています。
なぜテンプレートシステムが必要なのですか？
テンプレートシステムについて知らないほとんどの開発者は、新しい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（）関数を使用して、テンプレートが有効かどうかを確認できます。この関数は、テンプレート構造が正しいかどうかを確認するためにチェックできるタグの配列を返します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7482
15
1377
52
77
11
19
34
独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？
Mar 18, 2025 pm 03:12 PM
記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。
ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？
Mar 18, 2025 pm 03:14 PM
この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。
フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？
Apr 04, 2025 pm 02:42 PM
フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...
ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？
Mar 18, 2025 pm 03:16 PM
この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。
Javaのコレクションフレームワークを効果的に使用するにはどうすればよいですか？
Mar 13, 2025 pm 12:28 PM
この記事では、Javaのコレクションフレームワークの効果的な使用について説明します。 データ構造、パフォーマンスのニーズ、スレッドの安全性に基づいて、適切なコレクション（リスト、セット、マップ、キュー）の選択を強調しています。 コレクションの使用を効率的に最適化します
ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか？
Mar 18, 2025 pm 03:17 PM
この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。
初心者向けのタイプスクリプト、パート2：基本データ型
Mar 19, 2025 am 09:10 AM
エントリーレベルのタイプスクリプトチュートリアルをマスターしたら、TypeScriptをサポートするIDEで独自のコードを作成し、JavaScriptにコンパイルできるはずです。このチュートリアルは、TypeScriptのさまざまなデータ型に飛び込みます。 JavaScriptには、NULL、未定義、ブール値、数字、文字列、シンボル（ES6によって導入）とオブジェクトの7つのデータ型があります。 TypeScriptはこれに基づいてより多くのタイプを定義し、このチュートリアルではすべてを詳細に説明します。 ヌルデータ型 JavaScriptのように、Typescriptのnull
chart.js：パイ、ドーナツ、バブルチャートを始めます
Mar 15, 2025 am 09:19 AM
このチュートリアルでは、chart.jsを使用してパイ、リング、およびバブルチャートを作成する方法について説明します。以前は、4つのチャートタイプのchart.js：ラインチャートとバーチャート（チュートリアル2）、およびレーダーチャートと極地域チャート（チュートリアル3）を学びました。 パイとリングチャートを作成します パイチャートとリングチャートは、さまざまな部分に分かれている全体の割合を示すのに理想的です。たとえば、パイチャートを使用して、サファリの男性ライオン、女性ライオン、若いライオンの割合、または異なる候補者が選挙で受け取る票の割合を示すことができます。 パイチャートは、単一のパラメーターまたはデータセットの比較にのみ適しています。パイチャートのファンの角度はデータポイントの数値サイズに依存するため、パイチャートは値のあるエンティティをゼロ値で描画できないことに注意してください。これは、割合がゼロのエンティティを意味します
