すべてのページのJavaScriptソース全体をロードする場合は、必ず1つのファイルにコンパイルしてください。ユーザーが実行するアクションに基づいて、またはロードされたページに基づいて異なるコードをロードする場合は、AMDロードモジュールを使用してください。もう1つの方法は、一連のスクリプトタグを一覧表示することです。もちろん、一度に1つしか読み込まれず、時間がかかる可能性があります。
AMDは特定のライブラリではありません。実際には、前述のローダーのほとんどが使用するjavascriptモジュールをロードするための標準です。これは、モジュールの定義とロードにすべて同様の構文を使用することを意味します。彼らはAMDをECMAスクリプト仕様の一部にすることを検討しています。依存関係を定義することもできるので、コードでjQueryを実行する必要がある場合は、これを依存関係としてリストすると、モジュールの名前空間に読み込まれます。
define( [ 'jquery' ], function ( $ ) {
// use jquery in here without clouding up the global namespace
return {}; // return your module for use in a different module or whatever
};
この例では、jqueryモジュールがダウンロードされるまで、定義されたモジュールのコードは実行されません。次に、jqueryモジュールを引数として新しく定義されたモジュールに直接挿入します$
。
これで、モジュールを含むファイルにコードをきちんと整理しておくことができます。どのモジュールもグローバル名前空間を曇らせません。モジュールが実行される前に、すべての依存関係がロードされていることを確認します(依存するコードのロード競合状態のバグはありません)。
もう1つの利点は、同じモジュールに対して異なるパスを使用するようにローダーを設定できるため、jquery
モジュールのパスを「https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/」と定義できることです。 jquery.min.js'は、ほとんどすべてのモジュールで使用されている可能性がありますが、コード内の1つの場所にあります。jqueryのバージョンを1.8.3に更新する必要がある場合、コード内の1つの場所でパスを変更するだけでjquery
、依存関係として使用するすべてのモジュールにこのパスが使用されます。これは、モジュールスタブを使用しているときにテストするとき、または特定のモジュールのバージョンをデバッグするときに、簡単に切り替えるのにも役立ちます。
現在、これは小さなプロジェクトでは必ずしも必要ではありません。ただし、プロジェクトが大きくなるほど、このタイプの読み込みの意味がわかりやすくなります。