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;
以下に示すように、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);
Mustache.jsの初心者 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つの異なるテンプレートがあります。それでは、これらのテンプレートをページで使用し続けましょう。 はい、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の量を減らします。
var dynamic_html = "<div>HighlightedAuthor</div>";
document.getElementById("container").innerHTML = dynamic_html;
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);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mustache.js Inline Method</title>
<🎜>
</head>
<body>
<🎜>
<p id="person"></p>
</body>
<🎜>
</html>
var dynamic_html = "<div>HighlightedAuthor</div>";
document.getElementById("container").innerHTML = dynamic_html;テンプレートのスクリプトの代わりに<div>
<pre class='brush:php;toolbar:false;'>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は、変数に割り当てる代わりに、返されたドキュメントをHTML要素に挿入します。したがって、テンプレートを保持するために仮想コンテナが必要です。デフォルトで非表示になったテンプレートコンテナを使用しました。上記の例では、Template1を取得してロードします。その後、仮想コンテナからテンプレートを取得し、レンダリングのために口ひげに渡すことができます。これが外部の方法の仕組みです。 Ajax要求を使用して、サーバーからデータを取得することもできます。 <p>
</p>
<p>結論<strong></strong>
</p>テンプレートエンジンとフレームワークは、動的に変化するプレゼンテーションビューを持つ複雑なシステムを管理するために非常に重要です。 Moustache.jsは、クライアント側の管理テンプレートに最適な選択肢の1つです。このチュートリアルの冒頭で、テンプレートが重要である理由を説明します。次に、口ひげテンプレートを使用してさまざまな手法を導入し続けます。これで、プロジェクトに口ひげテンプレートを実装する方法を選択できるようになります。口ひげテンプレートを使用するためのさまざまな手法を探索しましたが、口ひげには、複雑なテンプレートの管理に使用される変数、セクション、関数、部分テンプレートなどのタグも付属しています。各タグの構文について議論することは、このチュートリアルの範囲を超えています。 Moustache Githubページに、口ひげタグに関する包括的なガイドを見つけることができます。以前の経験をMoustache.jsでお気軽に共有してください！ <p>
</p>
<p>Moustache.js faq（faq）<strong></strong>
</p>
<ul>
<li>Moustache.jsと他のJavaScriptテンプレートライブラリの主な違いは何ですか？ <strong></strong>
</li>
</ul>Moustache.jsは論理テンプレートの構文です。これは、HTML、構成ファイル、ソースコード（Anything）に使用できることを意味します。オブジェクトに提供されているハッシュまたは値を使用して、テンプレート内のラベルを拡張することで機能します。他のJavaScriptテンプレートライブラリとは異なり、Moustache.jsには、ステートメント、その他の条項、またはループの場合はいかなるものも含まれていません。代わりに、ラベルのみがあります。いくつかのタグは値に置き換えられ、一部は何もない、他のタグは一連の値です。 <p>
</p>
<ul>
<li>HTMLテンプレートにMustache.jsを使用する方法は？ <strong></strong>
</li>
</ul> htmlテンプレートにMoustache.jsを使用するには、最初にhtmlファイルにvustache.jsスクリプトを含める必要があります。次に、<p>タグ内のテンプレートを定義します。このテンプレートには、データを挿入するプレースホルダーを含めることができます。これらのプレースホルダーは、{{name}}などの二重ブレースで表されます。次に、Moustache.render（）関数を使用して、提供されたデータでテンプレートをレンダリングします。 <code><script></script>
Moustache.jsのテンプレートをプレシャルすると、実行時に行う必要がある作業を減らすことにより、パフォーマンスを改善できます。テンプレートを事前にコンパイルするには、Moustache.Parse（）関数を使用できます。
Moustache.jsテンプレートのデバッグは、ライブラリが多くのエラーメッセージを提供していないため、難しい場合があります。ただし、Moustache.Parse（）関数を使用して、テンプレートが有効かどうかを確認できます。この関数は、テンプレート構造が正しいかどうかを確認するためにチェックできるタグの配列を返します。
以上がMoustache.jsを使用してHTMLテンプレートを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
PythonとJavaScript：それぞれの強みを理解するMay 06, 2025 am 12:15 AMPythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。
JavaScriptのコア：CまたはCの上に構築されていますか？May 05, 2025 am 12:07 AMjavascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。
JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AMJavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。
Python vs. Javascript：どの言語を学ぶべきですか？May 03, 2025 am 12:10 AMPythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1）キャリア開発：Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2）学習曲線：Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3）エコシステム：Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。
JavaScriptフレームワーク：最新のWeb開発のパワーMay 02, 2025 am 12:04 AMJavaScriptフレームワークのパワーは、開発を簡素化し、ユーザーエクスペリエンスとアプリケーションのパフォーマンスを向上させることにあります。フレームワークを選択するときは、次のことを検討してください。1。プロジェクトのサイズと複雑さ、2。チームエクスペリエンス、3。エコシステムとコミュニティサポート。
JavaScript、C、およびブラウザの関係May 01, 2025 am 12:06 AMはじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか？彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか
node.jsは、型を使用してストリーミングしますApr 30, 2025 am 08:22 AMnode.jsは、主にストリームのおかげで、効率的なI/Oで優れています。 ストリームはデータを段階的に処理し、メモリの過負荷を回避します。大きなファイル、ネットワークタスク、リアルタイムアプリケーションの場合。ストリームとTypeScriptのタイプの安全性を組み合わせることで、パワーが作成されます
Python vs. JavaScript：パフォーマンスと効率の考慮事項Apr 30, 2025 am 12:08 AMPythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1）解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2）JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
メモ帳++7.3.1
使いやすく無料のコードエディター
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
