HTML での Requirejs を使用したモジュール開発の分析-htmlチュートリアル-php.cn

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

不言

リリース： 2018-06-09 16:51:50

オリジナル

2968 人が閲覧しました

この記事では、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 サイトをご覧ください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

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