Html_javascriptスキルでRequirejsを使ったモジュール開発例を詳しく解説-jsチュートリアル-php.cn

Html_javascriptスキルでRequirejsを使ったモジュール開発例を詳しく解説

WBOY

リリース： 2016-05-16 15:05:16

オリジナル

1429 人が閲覧しました

フロントエンドがモジュール化されると、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 の使用に関する関連知識は以上です。お役に立てば幸いです。