ホームページ > 記事 > ウェブフロントエンド > Html_javascriptスキルでRequirejsを使ったモジュール開発例を詳しく解説
Html_javascriptスキルでRequirejsを使ったモジュール開発例を詳しく解説
- WBOYオリジナル
- 2016-05-16 15:05:161416ブラウズ
フロントエンドがモジュール化されると、jsだけでなくhtmlもモジュール管理が必要になる場合があります。ここではrequirejsによるHTMLコードのモジュール開発を実装する方法を紹介します。
requirejs を使用して HTML を読み込む方法
Reuqirejs には、指定されたファイルの内容を読み取ることができるテキスト プラグインがあり、読み取られた内容はテキストです。
テキストプラグインのダウンロード方法
最初の方法は、npm を通じてダウンロードできます:
npm install requirejs/text
2 番目の方法では、公式 github から直接ダウンロードすることもできます。
コンテンツを text.js に直接コピーするだけです。
テキストプラグインのインストール方法
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 が非表示になるというのが本来のアプローチであると考えられます。
その後、フロントエンド コードは次のようになります:
<html> <body> <nav> 导航按钮1、导航按钮2、导航按钮3 </nav> <div style="display:block">按钮1对应的页面</div> <div style="display:none">按钮2对应的页面</div> <div style="display:none">按钮3对应的页面</div> </body> </html>
そのようなコードは非常に乱雑になり、フロントエンドの HTML は非常に長くなり、メンテナンスに役立ちません。
次に、reuqirejs のテキスト プラグインを使用すると、次のことができます。
<html> <body> <nav> 导航按钮1、导航按钮2、导航按钮3 </nav> <div id="target"></div> </body> </html>
次に、対応するモジュール内で次のようにします:
$('#target').html(require("text!目标按钮对应的页面.html"));
こうするともっとカジュアルになりますよ！フロントエンドコードもモジュールと一緒に効果的に管理できます。
ただし、このメソッドを使用すると、Jquery によってバインドされたイベントが無効になることに注意してください。そのため、html() メソッドの後に必ずイベントを再バインドしてください。
モジュール開発での Html での Requirejs の使用に関する関連知識は以上です。お役に立てば幸いです。