AMD 非同期モジュール定義の概要と、Require.js_jquery での jQuery および jQuery プラグインの使用方法

AMD モジュール

AMD (非同期モジュール定義) フォーマットの全体的な目標は、現在の開発者に使用可能なモジュール型 JavaScript ソリューションを提供することです。

AMD モジュール形式自体は、モジュールと依存関係の両方を非同期でロードできるようにモジュールを定義する方法の提案です。これには、本質的に非同期で柔軟性が高いなど、多くの独自の利点があり、一般的なコードとモジュール ID 間の緊密な結合を解消できます。 jQuery (1.7) を含む多くのプロジェクトで採用されています。

RequireJS

RequireJS は、主にクライアントモジュール管理に使用されるツールライブラリです。これにより、クライアント コードを非同期または動的読み込み用のモジュールに分割できるため、コードのパフォーマンスと保守性が向上します。そのモジュール管理は AMD 仕様に準拠しています。

AMD の jQuery サポート

jQuery 1.7 では、jQuery を AMD 非同期モジュールとして登録するサポートが開始されます。非同期モジュール形式を使用してモジュールをロードできる、互換性のあるスクリプト ローダー (RequireJS やcurl など) が多数あります。つまり、すべてを機能させるのに多くのハッキングは必要ありません。 jQuery 1.7 のソース コードを確認できます:

コードをコピーします コードは次のとおりです:

// jQuery を AMD モジュールとして公開します。ただし、
// ページ内で複数のバージョンの jQuery
// を読み込む際の問題を理解している AMD ローダーのみが対象で、すべてが define() を呼び出す可能性があります。ローダーは、
//define.amd.jQuery = true を指定することで、複数の jQuery バージョンに特別な許可があることを示します。
// jQuery は他のモジュールと連結できるため、名前付きモジュールとして登録します。これらのファイルは、define,
// を使用する可能性がありますが、匿名
// AMD モジュールを理解する適切な連結スクリプトは使用しません。名前付き AMD が最も安全で堅牢な登録方法です。
// 小文字の jquery が使用されます。 AMD モジュール名は
// ファイル名から派生しており、jQuery は通常小文字のファイル名で提供されるためです。
if ( typeofdefine === "function" &&define.amd &&define.amd.jQuery ) {
define( "jquery ", [], function () { return jQuery; } );
}

これが機能する仕組みは、使用されるスクリプト ローダーが、プロパティ、define.amd.jQuery を true に指定することで、複数の jQuery バージョンをサポートできることを示すことです。特定の実装の詳細を知りたい場合は、jQuery を名前付きモジュールとして登録できます。これは、AMD の define() メソッドを使用する他のファイルと一緒に結合されるリスクがあるためです。適切なステッチング スクリプトを使用しないと、匿名の AMD モジュール定義を理解します。

jQuery の上位バージョン (1.11.1) では、define.amd.jQuery の判定が削除されます:

コードをコピー コードは次のとおりです。

if ( typeof define === "function " && .amd を定義します) {
define( "jquery", [], function() {
return jQuery;
});
}

Require.js で jQuery を使用する

Require.js で jQuery を使用すると非常に便利です。次のように簡単に設定するだけです。

コードをコピー コードは次のとおりです:

// 簡単な構成
が必要です。 config( {

// RequireJS は相対パスbaseUrl を介してすべてのコードをロードします。baseUrl は通常、data-main 属性で指定されたスクリプトと同じレベルのディレクトリに設定されます。baseUrl: "./js",

// サードパーティのスクリプト モジュールのエイリアス。jquery は libs/jquery-1.11.1.min.js よりも簡潔で明確です。
パス: {

"jquery; ": "libs/jquery- 1.11.1.min.js"

}

});

// jQuery モジュールの使用を開始します
require([" jquery"], function ($ ) {

//コード
//次のような jquery メソッドをここで直接使用できます。 $( "#result" ).html( "Hello World!" );

});

Require.js で jQuery プラグインを使用する

jQuery は AMD API をサポートしていますが、これは jQuery プラグインが AMD とも互換性があることを意味するわけではありません。

一般的な jQuery プラグインの形式:

コードをコピー コードは次のとおりです: (関数($) {

$.fn.myPlugin = function () {

//独自のプラグイン コード
};
})(jQuery);

ただし、Require.js を使用して、わずかな変更を加えて jQuery プラグインをロードできます。

コードをコピーしますコードは次のとおりです:

;(function (factory) {
if (typeof define === "function" && define.amd) {
// AMD モード
define（["jquery"]、Factory）;
} else { //プラグインCode
};
}）

Require.js での jQuery UI コンポーネントの使用


Require.js での jQuery UI コンポーネントの使用は、jQuery Widget Factory コードを変更して jQuery UI の依存関係をロードするだけで同様です。例:

コードをコピー

コードは次のとおりです。

(function (widgetFactory) { if (typeof define === "function" && define.amd) { // AMD モード define("jquery.ui.widget", ["jquery"], function ( ) {

}

}
(function ($, unknown) {

// jQuery ウィジェット ファクトリ コード

}));