ホームページ > 記事 > ウェブフロントエンド > HTML での Requirejs を使用したモジュール開発の分析

HTML での Requirejs を使用したモジュール開発の分析

不言オリジナル: 2018-06-09 16:51:502979ブラウズ

この記事では、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: &#39;./&#39;,
paths: {
&#39;text&#39;:path+&#39;/require/text&#39;,
...
},
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>

次に、対応するモジュール内で:

$(&#39;#target&#39;).html(require("text!目标按钮对应的页面.html"));

これはよりカジュアルになります。フロントエンドコードもモジュールと一緒に効果的に管理できます。

ただし、このメソッドを使用すると、Jquery によってバインドされたイベントが無効になることに注意してください。そのため、html() メソッドの後に必ずイベントを再バインドしてください。

モジュール開発のための Html での Requirejs の使用に関する関連知識はこれですべてです。お役に立てば幸いです。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

HTML での Requirejs を使用したモジュール開発の分析

関連記事