フロントエンドのモジュール化の場合、JSはモジュール管理を必要とするだけでなく、HTMLもモジュール管理を必要とすることがあります。ここでは、requirejsを介してHTMLコードのモジュラー開発を実装する方法を紹介します。
requirejsを使用してHTMLをロードする方法
Reuqirejsには、指定されたファイルのコンテンツを読み取ることができるテキストプラグインがあり、読み取りコンテンツはテキストです。
テキストプラグインをダウンロードする方法
最初の方法は、NPMからダウンロードできます。
npmインストールはrequirejs/textをインストールします
2番目の方法は、公式Githubから直接ダウンロードすることもできます。
コンテンツをtext.jsに直接コピーするだけです
テキストプラグインをインストールする方法
jqueryに似たrequirejsのmain.jsのテキストプラグインの依存関係を構成できます。通常の荷重を通じてロードできることを確認してください。
requirejs.config（{baseurl： './'、paths：{' text '：path+'/require/text '、...}、shim：{...}}）;また、Baseurlに直接配置することもできます。
テキストの使用方法
ターゲットモジュールで、次の構文に従います。
define（function（require）{var html = require（ "text！html/test.html"）; console.log（html）;}）;または
define（["text！html/test.html"]、function（html）{console.log（html）;}）;HTMLのモジュール開発を実行する方法は？
上記を読んだ後、既にテキストを使用できますが、フロントエンドコードを整理する方法がわかりません。
栗を取る：
ブログガーデンのウェブサイトページは、上記のナビゲーションに従って異なるページにジャンプします。単一のページにある場合は、元の方法を簡単に考えるのが簡単です。ナビゲーションボタンは別のDivに対応します。そのボタンをクリックすると、対応するdivが表示されます。他のDIVが隠されます。
次に、フロントエンドコードは次のようになるかもしれません：
<html> <body> navigationボタン1、ナビゲーションボタン2、ナビゲーションボタン3、nav> <div style = "display：block">ボタンに対応するページ</div> <div style = "display：none">ページボタン2 </div> <div style = "display：none">ページ
このようなコードは非常に乱雑になります...そして、フロントエンドのHTMLは非常に長くなります...メンテナンスを助長しません。
次に、Reuqirejsのテキストプラグインを使用すると、これを行うことができます。
<html> <body> <vavigationボタン1、ナビゲーションボタン2、ナビゲーションボタン3 </nav> <div id = "ターゲット"> </div> </body> </html>
次に、対応するモジュールで：
$（ '＃target'）。html（require（ "page.html"））;
これにより、あなたはよりカジュアルになります！フロントエンドコードは、モジュールで効果的に管理することもできます！
ただし、この方法によりイベントが無効になることに注意する必要があります。したがって、HTML（）メソッドの後にイベントを再バインドする必要があります。
HTMLでのモジュール開発にrequirejsを使用することについて多くのことを紹介します。それがあなたに役立つことを願っています！