Webアプリケーションは通常、MVCアーキテクチャを使用して、プレゼンテーションビューからビジネスロジックを分離します。複雑なプロジェクトには、JavaScript操作を使用する多數(shù)のクライアントHTMLが含まれます。この場(chǎng)合、テンプレートシステムを使用して再利用性を向上させ、ビュー管理タスクを簡(jiǎn)素化できます。 Moustache.jsは、テンプレートの管理に使用できる十分に文書化されたテンプレートシステムを提供します。さらに、Moustacheは複數(shù)の言語をサポートするため、サーバー側(cè)で別のテンプレートシステムを使用する必要はありません。この記事では、口ひげを使用することの基本について説明します。
キーポイント
- Moustache.jsは、複雑なWebアプリケーションでHTMLテンプレートを管理し、再利用性を向上させ、ビュー管理タスクを簡(jiǎn)素化するために使用できる十分に文書化されたテンプレートシステムです。
- Moustache.jsは非論理的です。つまり、そのテンプレートには、if-else條件またはループ用の條件が含まれていません。ダブルブレースで示されたラベルを使用して、テンプレートにデータを追加します。
- 口ひげテンプレートは、インラインメソッド、インラインスクリプト、外部HTMLスニペットなど、さまざまな方法で定義できます。選択する方法は、プロジェクトの特定のニーズに依存します。
- Moustache.jsは、クライアント側(cè)とサーバー側(cè)の両方で使用できる多機(jī)能ツールで、複數(shù)の言語をサポートします。また、変數(shù)、セクション、関數(shù)、部分テンプレートなどの複雑なテンプレートを管理するためのタグが付屬しています。
なぜテンプレートシステムが必要なのですか？
テンプレートシステムについて知らないほとんどの開発者は、新しいHTMLブロックのコードを作成し、JavaScriptを使用してDOMに動(dòng)的に挿入します。一般的な方法は、HTML要素を文字列として指定してから、innerHTMLプロパティを設(shè)定するか、jQuery HTML（）メソッドを呼び出すことです。例は次のとおりです。
var dynamic_html = "<div>HighlightedAuthor</div>";
document.getElementById("container").innerHTML = dynamic_html;</pre>
以下に示すように、DOMを作成する別の方法は、要素を作成して個(gè)別に追加することです。
上記の方法は両方とも、ドキュメントに要素を動(dòng)的に効果的に追加できます。ウェブサイトの3つの異なるページで使用する必要がある適切に設(shè)計(jì)された弾丸リストがある狀況を考えてみましょう。これらの手法を使用して、3つの異なる場(chǎng)所でHTMLコードのリストを繰り返す必要があります。これはしばしば悪いコーディング習(xí)慣と見なされます。この場(chǎng)合、コードを複製することなく、さまざまな場(chǎng)所で事前定義されたテンプレートを使用できます。 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の公式ページにアクセスして、ライブラリのコピーを入手できます。口ひげは、動(dòng)的テンプレートを作成するための基礎(chǔ)としてテンプレートとビューを使用します。ビューには、テンプレートに含めるJSONデータが含まれています。テンプレートには、表示データを含むテンプレートタグを使用したプレゼンテーションHTMLまたはデータが含まれています。先ほど、口ひげは非論理的であると述べました。これは、テンプレートには、if-else條件またはループ用の條件が含まれていないことを意味します。それでは、簡(jiǎn)単な例で口ひげテンプレートを始めましょう。
var dynamic_html = "<div>HighlightedAuthor</div>";
document.getElementById("container").innerHTML = dynamic_html;</pre>
最初に、ドキュメントにMoustache.jsファイルを含める必要があります。その後、口ひげテンプレートの作成を開始できます。上記の例では、人の名前と職業(yè)を含むビューがあります。次に、render（）関數(shù)內(nèi)でコードと名前とキャリアデータを提示するタグを使用します。ラベルは、それらを取り巻く二重ブレースまたはひげで表されます。次に、render（）メソッドがどのように機(jī)能するかを見てみましょう。
マスターテンプレートのレンダリング
次のコードは、Moustache.jsファイルでのrender（）関數(shù)の実裝を示しています。 3つのパラメーターをrender（）に渡すことができます。最初の2つのパラメーターテンプレートとビューが必要です。部分的なものは、メインテンプレートに注入できる動(dòng)的テンプレートと見なすことができます。前の例では、テンプレートをインラインパラメーターとして渡し、ビューを2番目のパラメーターとして渡し、結(jié)果を出力変數(shù)に割り當(dāng)てました。
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>
これは、口ひげを使用してテンプレートされた最も基本的な形式です。より標(biāo)準(zhǔn)的なコードを作成するために使用できる他の方法を見てみましょう。
定義口ひげテンプレート
アプリケーションに口ひげテンプレートを定義する方法はいくつかあります。これらの方法は、CSSを含むインラインスタイル、インラインスタイルシート、および外部スタイルシートを使用することに似ています。前述の例は、テンプレートを関數(shù)に直接渡すため、インライン方法と見なすことができます。この方法は、再利用可能なテンプレートの可能性を防ぎます。関數(shù)に直接渡す代わりに、テンプレートをインラインスクリプトテンプレートとして定義する方法を見てみましょう。
インラインスクリプトとしてのテンプレートテンプレート
</pre>
に行くことができます
ドキュメントに異なるIDを持つテンプレートを必要なだけ含めることができます。テンプレートを使用する場(chǎng)合は、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>
ご覧のとおり、テンプレートは個(gè)別に保存され、必要に応じて動(dòng)的に使用されます。この方法は、テンプレートを再利用する可能性を高めます。ただし、インラインスクリプトを使用すると、テンプレートのスコープが1ページに制限されます。複數(shù)のページがある場(chǎng)合は、テンプレートをもう一度定義する必要があります。したがって、外部ファイルにテンプレートを含めることは、CSSと同様に理想的なソリューションです。
外部HTMLスニペットとしてのテンプレートテンプレート
この手法では、jQueryを使用してテンプレートを?qū)g裝します。 jQueryは、外部ドキュメントの一部を取得するために使用できるLoad（）という関數(shù)を提供します。この方法を使用して、外部テンプレートファイルからテンプレートを動(dòng)的にロードします。 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ù)に割り當(dāng)てる代わりに、返されたドキュメントをHTML要素に挿入します。したがって、テンプレートを保持するために仮想コンテナが必要です。デフォルトで非表示になったテンプレートコンテナを使用しました。上記の例では、Template1を取得してロードします。その後、仮想コンテナからテンプレートを取得し、レンダリングのために口ひげに渡すことができます。これが外部の方法の仕組みです。 Ajax要求を使用して、サーバーからデータを取得することもできます。
結(jié)論
テンプレートエンジンとフレームワークは、動(dòng)的に変化するプレゼンテーションビューを持つ複雑なシステムを管理するために非常に重要です。 Moustache.jsは、クライアント側(cè)の管理テンプレートに最適な選択肢の1つです。このチュートリアルの冒頭で、テンプレートが重要である理由を説明します。次に、口ひげテンプレートを使用してさまざまな手法を?qū)毪肪Aけます。これで、プロジェクトに口ひげテンプレートを?qū)g裝する方法を選択できるようになります?？冥窑播匹螗抓飑`トを使用するためのさまざまな手法を探索しましたが、口ひげには、複雑なテンプレートの管理に使用される変數(shù)、セクション、関數(shù)、部分テンプレートなどのタグも付屬しています。各タグの構(gòu)文について議論することは、このチュートリアルの範(fàn)囲を超えています。 Moustache Githubページに、口ひげタグに関する包括的なガイドを見つけることができます。以前の経験をMoustache.jsでお?dú)葺Xに共有してください！
Moustache.js faq（faq）
- Moustache.jsと他のJavaScriptテンプレートライブラリの主な違いは何ですか？
Moustache.jsは論理テンプレートの構(gòu)文です。これは、HTML、構(gòu)成ファイル、ソースコード（Anything）に使用できることを意味します。オブジェクトに提供されているハッシュまたは値を使用して、テンプレート內(nèi)のラベルを拡張することで機(jī)能します。他のJavaScriptテンプレートライブラリとは異なり、Moustache.jsには、ステートメント、その他の條項(xiàng)、またはループの場(chǎng)合はいかなるものも含まれていません。代わりに、ラベルのみがあります。いくつかのタグは値に置き換えられ、一部は何もない、他のタグは一連の値です。
- 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をレンダリングする場(chǎng)合は、{{{{html}}}などのトリプルブレース構(gòu)文を使用できます。
- サーバー側(cè)にMoustache.jsを使用できますか？
はい、サーバー側(cè)にMustache.jsを使用できます。これは、テンプレートをクライアントに送信する前にレンダリングするのに役立ち、クライアントで実行する必要があるJavaScriptの量を減らします。
- Moustache.jsのテンプレートをプレリコンパイルする方法は？
Moustache.jsのテンプレートをプレシャルすると、実行時(shí)に行う必要がある作業(yè)を減らすことにより、パフォーマンスを改善できます。テンプレートを事前にコンパイルするには、Moustache.Parse（）関數(shù)を使用できます。
- Mustache.jsテンプレートをデバッグする方法は？
Moustache.jsテンプレートのデバッグは、ライブラリが多くのエラーメッセージを提供していないため、難しい場(chǎng)合があります。ただし、Moustache.Parse（）関數(shù)を使用して、テンプレートが有効かどうかを確認(rèn)できます。この関數(shù)は、テンプレート構(gòu)造が正しいかどうかを確認(rèn)するためにチェックできるタグの配列を返します。 以上がMoustache.jsを使用してHTMLテンプレートを作成しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國(guó)語版
中國(guó)語版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Garbage CollectionはJavaScriptでどのように機(jī)能しますか？
Jul 04, 2025 am 12:42 AM
JavaScriptのごみ収集メカニズムは、タグクリアリングアルゴリズムを介してメモリを自動(dòng)的に管理して、メモリ漏れのリスクを減らします。エンジンはルートオブジェクトからアクティブオブジェクトを橫斷およびマークし、マークされていないオブジェクトはゴミとして扱われ、クリアされます。たとえば、オブジェクトが參照されなくなった場(chǎng)合（変數(shù)をnullに設(shè)定するなど）、次のリサイクルでリリースされます。メモリリークの一般的な原因には以下が含まれます。 closurures閉鎖の外部変數(shù)への參照。 globalグローバル変數(shù)は引き続き大量のデータを保持しています。 V8エンジンは、世代のリサイクル、増分マーキング、並列/同時(shí)リサイクルなどの戦略を通じてリサイクル効率を最適化し、メインスレッドのブロック時(shí)間を短縮します。開発中、不必要なグローバル?yún)⒄栅虮埭?、パフォーマンスと安定性を改善するためにオブジェクトの関連付けを迅速に裝飾する必要があります。
node.jsでHTTPリクエストを作成する方法は？
Jul 13, 2025 am 02:18 AM
node.jsでHTTPリクエストを開始するには、組み込みモジュール、axios、およびnode-fetchを使用する3つの一般的な方法があります。 1.依存関係のない內(nèi)蔵http/httpsモジュールを使用します。これは基本的なシナリオに適していますが、https.get（）を使用してデータを取得したり、.write（）を介してPOSTリクエストを送信するなど、データステッチとエラーモニタリングの手動(dòng)処理が必要です。 2.Axiosは、約束に基づいたサードパーティライブラリです。簡(jiǎn)潔な構(gòu)文と強(qiáng)力な機(jī)能を備えており、非同期/待ち聲、自動(dòng)JSON変換、インターセプターなどをサポートします。非同期リクエスト操作を簡(jiǎn)素化することをお?jiǎng)幛幛筏蓼埂?3.Node-Fetchは、約束と単純な構(gòu)文に基づいて、ブラウザフェッチに似たスタイルを提供します
JavaScriptデータ型：プリミティブ対參照
Jul 13, 2025 am 02:43 AM
JavaScriptデータ型は、プリミティブタイプと參照タイプに分割されます。プリミティブタイプには、文字列、數(shù)字、ブール、ヌル、未定義、シンボルが含まれます。値は不変であり、コピーは値を割り當(dāng)てるときにコピーされるため、互いに影響を與えません。オブジェクト、配列、関數(shù)などの參照タイプはメモリアドレスを保存し、同じオブジェクトを指す変數(shù)は互いに影響します。 TypeofとInstanceOFを使用してタイプを決定できますが、TypeOfNullの歴史的な問題に注意してください。これらの2種類の違いを理解することは、より安定した信頼性の高いコードを書くのに役立ちます。
JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。
Jul 08, 2025 pm 02:27 PM
こんにちは、JavaScript開発者！今週のJavaScriptニュースへようこそ！今週は、DenoとのOracleの商標(biāo)紛爭(zhēng)、新しいJavaScript Timeオブジェクトがブラウザ、Google Chromeアップデート、およびいくつかの強(qiáng)力な開発ツールによってサポートされています。始めましょう！ 「JavaScript」の商標(biāo)を登録しようとするDeno Oracleの試みとのOracleの商標(biāo)紛爭(zhēng)は、論爭(zhēng)を引き起こしました。 Node.jsとDenoの作成者であるRyan Dahlは、商標(biāo)をキャンセルするために請(qǐng)願(yuàn)書を提出しました。
React vs Angular vs Vue：どのJSフレームワークが最適ですか？
Jul 05, 2025 am 02:24 AM
どのJavaScriptフレームワークが最良の選択ですか？答えは、あなたのニーズに応じて最も適切なものを選択することです。 1.反応は柔軟で無料で、高いカスタマイズとチームアーキテクチャ機(jī)能を必要とする中規(guī)模および大規(guī)模プロジェクトに適しています。 2。Angularは、エンタープライズレベルのアプリケーションと長(zhǎng)期的なメンテナンスに適した完全なソリューションを提供します。 3. Vueは使いやすく、中小規(guī)模のプロジェクトや迅速な発展に適しています。さらに、既存のテクノロジースタック、チームサイズ、プロジェクトのライフサイクル、およびSSRが必要かどうかは、フレームワークを選択する上で重要な要素でもあります。要するに、絶対に最良のフレームワークはありません。最良の選択は、あなたのニーズに合ったものです。
JavaScriptですぐに呼び出された関數(shù)式（IIFE）を理解します
Jul 04, 2025 am 02:42 AM
iife（即時(shí)インドボークフニックエクスペッション）は、定義の直後に実行される関數(shù)式であり、変數(shù)を分離し、グローバルな範(fàn)囲の汚染を避けるために使用されます。括弧內(nèi)に関數(shù)を包むことによって呼び出され、式と括弧のペアがすぐにそれに続く、（function（）{/code/}）（）;そのコアの使用には、次のものが含まれます。1。さまざまな競(jìng)合を回避し、複數(shù)のスクリプト間の命名の重複を防ぎます。 2。プライベートスコープを作成して、內(nèi)部変數(shù)を見えないようにします。 3。変數(shù)が多すぎずに初期化を容易にするモジュラーコード。一般的なライティング方法には、ES6矢印関數(shù)のパラメーターとバージョンで渡されたバージョンが含まれますが、式とタイを使用する必要があることに注意してください。
ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ
Jul 08, 2025 am 02:40 AM
約束は、JavaScriptで非同期操作を処理するためのコアメカニズムです。チェーンコール、エラー処理、コンビナーの理解は、アプリケーションをマスターするための鍵です。 1.チェーンコールは、.then（）を通じて新しい約束を返し、非同期プロセスの連結(jié)を?qū)g現(xiàn)します。それぞれ.then（）は以前の結(jié)果を受け取り、値または約束を返すことができます。 2。エラー処理は、.catch（）を使用して例外をキャッチしてサイレント障害を回避し、キャッチのデフォルト値を返すためにプロセスを継続する必要があります。 3。promise.all（）などの組み合わせ（すべての成功後にのみ成功しました）、promise.race（）（最初の完了が返されます）、promise.allsettled（）（すべての完了を待っています）
キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？
Jul 08, 2025 am 02:43 AM
Cacheapiは、ブラウザからネットワークリクエストをキャッシュするツールです。これは、ウェブサイトのパフォーマンスとオフラインエクスペリエンスを改善するために、サービスワーカーと併用することがよくあります。 1.開発者は、スクリプト、スタイルシート、寫真などのリソースを手動(dòng)で保存できるようにします。 2。要求に応じてキャッシュ応答と一致させることができます。 3.特定のキャッシュの削除またはキャッシュ全體のクリアをサポートします。 4.フェッチイベントを聞いているサービスワーカーを介して、キャッシュの優(yōu)先順位またはネットワークの優(yōu)先戦略を?qū)g裝できます。 5.オフラインサポート、繰り返しのアクセス速度の高速化、主要なリソースのプリロード、バックグラウンドアップデートコンテンツによく使用されます。 6.それを使用する場(chǎng)合、キャッシュバージョンの制御、ストレージ制限、およびHTTPキャッシングメカニズムとの違いに注意する必要があります。
