RequireJsの使い方を詳しく解説

今回は、RequireJs の使用方法について詳しく説明します。この記事では、RequireJs が非常に強力であることがわかります。

最初に JavaScript ファイルを読み込みます

RequireJS の目的は、従来の 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグとは異なるスクリプト読み込みステップを使用して、コードの モジュール性 を促進することです。これを使用してコードを高速化し、最適化できますが、主な目的はコードをモジュール化することです。

RequireJS は、baseUrl を基準とした相対アドレスを持つすべてのコードを読み込みます。 ページのトップレベルの 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグには、スクリプト読み込みプロセスを開始するために require.js によって使用される特別な属性 data-main が含まれており、baseUrl は通常、この属性と一致するディレクトリに設定されます。

baseUrl は RequireJS 経由で渡すこともできます configは手動で設定されます。 config と data-main が明示的に指定されていない場合、デフォルトの BaseUrl は、RequireJS を含む HTML ページが属するディレクトリになります。

RequireJS はデフォルトですべての依存リソースが js スクリプトであると想定しているため、RequireJS がモジュールを処理する際にモジュール ID に「.js」サフィックスを追加する必要はありません。 ID をパスに解析するときにサフィックスが自動的に追加されます。パス設定を通じてスクリプトのセットを設定できます。これにより、スクリプトを使用するときに記述する単語を減らすことができます。

「baseUrl + パス」解析プロセスを回避し、特定のディレクトリにスクリプトをロードするように直接指定したい場合があります。現時点でこれを行うことができます: モジュールの場合 ID が次のルールのいずれかに一致する場合、その ID 解析では通常の「baseUrl + パス」構成がバイパスされ、代わりに現在の HTML ドキュメント に関連するスクリプトとして直接ロードされます:

は「.js」で終わります。 「/」で始まります。
「http:」や「https:」などの URL プロトコルを含めます。

一般的に、モジュール ID を設定するには、baseUrl と「paths」設定を使用するのが最善です。これにより、簡単な名前変更やスクリプトの再配置など、さらなる柔軟性が得られます。 同時に、煩雑な構成を避けるために、コードを整理するために複数レベルのネストされたディレクトリ階層を使用しないことをお勧めします。代わりに、すべてのスクリプトを BaseUrl に配置するか、プロジェクト ライブラリ/サードパーティのフラットな構造に分離します。

www/
index.html
js/
app/
sub.js
lib/
jquery.js
canvas.js
app.js

index.html:

<script data-main="js/app.js" src="js/require.js"></script>

app.js:

requirejs.config({
  //By default load any module IDs from js/lib
  baseUrl: 'js/lib',
  //except, if the module ID starts with "app",
  //load it from the js/app directory. paths
  //config is relative to the baseUrl, and
  //never includes a ".js" extension since
  //the paths config could be for a directory.
  paths: {
    app: '../app'
  }
});
//Start the main app logic.
requirejs(['jquery', 'canvas', 'app/sub'],
function  ($, canvas, sub) {
  //jQuery, canvas and the app/sub module are all
  //loaded and can be used here now.
});

この例では、jQuery などのサードパーティ ライブラリのファイル名にバージョン番号が含まれていないことに注意してください。バージョン情報を別のファイルで追跡することをお勧めします。 volo などのツールを使用すると、package.json にバージョン情報を追加し、ファイル名を「jquery.js」としてディスク上に保持できます。これにより、構成を最小限に抑え、ライブラリのバージョンごとにパスを設定する必要がなくなります。たとえば、「jquery」を「jquery-1.7.2」に設定します。

理想的には、ロードされた各スクリプトは、define(); によって定義されたモジュールですが、「ブラウザー グローバル変数挿入」タイプの一部の従来/レガシー ライブラリは、依存関係を定義するために define() を使用しないため、これには shim を使用する必要があります。 config を使用して依存関係を示します。 依存関係を指定しない場合、読み込み時にエラーが報告される場合があります。これは、速度上の理由から、RequireJS はこれらのライブラリを非同期かつ順不同でロードするためです。

require.js は読み込み時に data-main 属性をチェックします:

HTML を構築するスクリプトに基づいて DOM を操作する代わりに、

HTML タグ を使用できれば素晴らしいでしょう。しかし、JavaScript ファイルに HTML を埋め込む良い方法はありません。できることは、js で HTML 文字列を使用することだけですが、これは一般に、特に複数行の HTML の場合、保守が困難です。 .

RequireJS には、この問題の解決に役立つ text.js プラグインがあります。依存関係でテキスト! 接頭辞が使用されている場合、

自動的にロードされます。 text.jsのREADMEファイルを参照してください。

上記の紹介を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

JS のブール値、関係演算子、論理演算子の詳細な説明と例

jQuery の各関数の詳細な説明と例

ネイティブ JS が AJAX と JSONP を実装する方法

以上がRequireJsの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。