ホームページ > 記事 > ウェブフロントエンド > HTML での Requirejs を使用したモジュール開発の分析
この記事では、HTML での Requirejs を使用したモジュール開発の分析を主に紹介します。必要な友人はそれを参照できるように共有します。 js にはモジュール管理が必要ですが、html にもモジュール管理が必要な場合があります。 requirejsでHTMLコードのモジュール開発を実現する方法を紹介します
フロントエンドをモジュール化すると、jsだけでなくhtmlもモジュール管理が必要になる場合があります。ここではrequirejsによるHTMLコードのモジュール開発を実装する方法を紹介します。
requirejsを使ってhtmlを読み込む方法
Reuqirejsには指定されたファイルの内容を読み取ることができるテキストプラグインがあり、読み取られた内容はテキストです。
最初の方法はnpm経由でダウンロードできます:
npm install requirejs/text
2番目の方法は公式githubから直接ダウンロードすることもできます。
コンテンツを text.js に直接コピーします。
requirejsのmain.jsでテキストプラグインの依存関係を設定します。これは、jqueryの読み込みと同様です。方法。
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?
上記を読んだ後、テキストの使い方はすでにわかりましたが、フロントエンド コードを整理する方法はまだわかりません。
例:
ブログパークのWebサイトページは、上記のナビゲーションに従って別のページにジャンプします。単一のページにある場合、ナビゲーション ボタンが別の ps に対応し、そのボタンをクリックすると、対応する p が表示され、他の ps が非表示になるというのが本来のアプローチであると考えられます。
その後、フロントエンド コードは次のようになります:
<html> <body> <nav> 导航按钮1、导航按钮2、导航按钮3 </nav> <p style="display:block">按钮1对应的页面</p> <p style="display:none">按钮2对应的页面</p> <p style="display:none">按钮3对应的页面</p> </body> </html>
そのようなコードは非常に乱雑になります...そしてフロントエンド HTML は非常に長くなります...メンテナンスには役立ちません。
次に、reuqirejs のテキスト プラグインを使用すると、次のことができます:
<html> <body> <nav> 导航按钮1、导航按钮2、导航按钮3 </nav> <p id="target"></p> </body> </html>
次に、対応するモジュール内で:
$('#target').html(require("text!目标按钮对应的页面.html"));
これはよりカジュアルになります。フロントエンドコードもモジュールと一緒に効果的に管理できます。
ただし、このメソッドを使用すると、Jquery によってバインドされたイベントが無効になることに注意してください。そのため、html() メソッドの後に必ずイベントを再バインドしてください。
モジュール開発のための Html での Requirejs の使用に関する関連知識はこれですべてです。お役に立てば幸いです。
上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
HTML5とjQueryで検索インテリジェントマッチング機能を実現nginx設定アクセス画像パスとHTML静的ページの取得方法以上がHTML での Requirejs を使用したモジュール開発の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。