AMD非同期モジュール定義の紹介とRequire.jsでjQueryおよびjQueryプラグインを使用する方法

AMDモジュール
AMD(非同期モジュール定義、Asynchronous Module Definition)フォーマットの全体的な目標は、現在の開発者に利用可能なモジュール化JavaScriptのソリューションを提供することです.
AMDモジュールフォーマット自体は,モジュールをどのように定義するかについての提案であり,この定義の下でモジュールと依存項目を非同期でロードすることができる.生まれつきの非同期や高度な柔軟性などの特性を含む多くのユニークな利点があり、これらの特性は一般的なコードとモジュール識別間の緊密な結合を解除することができます.現在、jQuery(1.7)を含む多くのプロジェクトに受け入れられています.
RequireJSRequireJSは、主にクライアントのモジュール管理に使用されるツールライブラリです.クライアントのコードをモジュールに分割し、非同期または動的ロードを実現し、コードのパフォーマンスとメンテナンス性を向上させることができます.そのモジュール管理はAMD仕様を遵守しています.
jQueryのAMDに対するサポートjQuery 1.7は、jQueryをAMD非同期モジュールに登録することをサポートし始めた.RequireJSとcurlを含む多くの互換性のあるスクリプト・ローダは、非同期モジュール・フォーマットでモジュールをロードできます.これは、hackをあまり必要とせずにすべてを実行できることを意味します.jQuery 1.7のソースコードを見てみましょう.

 
  
// Expose jQuery as an AMD module, but only for AMD loaders that 
  
// understand the issues with loading multiple versions of jQuery 
  
// in a page that all might call define(). The loader will indicate 
  
// they have special allowances for multiple jQuery versions by 
  
// specifying define.amd.jQuery = true. Register as a named module, 
  
// since jQuery can be concatenated with other files that may use define, 
  
// but not use a proper concatenation script that understands anonymous 
  
// AMD modules. A named AMD is safest and most robust way to register. 
  
// Lowercase jquery is used because AMD module names are derived from 
  
// file names, and jQuery is normally delivered in a lowercase file name. 
  
if ( typeof define === "function" && define.amd && define.amd.jQuery ) { 
  
 define( "jquery", [], function () { return jQuery; } ); 
  
} 
  
 
 

その動作の原理は、使用するスクリプトローダが属性、すなわちdefine.を指定することである.amd.jQueryはtrueであり、複数のjQueryバージョンをサポートできることを示す.特定の実装の詳細を理解することに興味がある場合は、匿名AMDモジュール定義を適切に理解するパッチスクリプトを使用することなく、jQueryを別名モジュールに登録することができる.
高バージョンのjQuery(1.11.1)はdefineを削除しました.amd.jQuery判断:

 
  
if ( typeof define === "function" && define.amd ) { 
  
 define( "jquery", [], function() { 
  
  return jQuery; 
  
 }); 
  
} 
 

Require.jsでjQueryを使う
Require.jsでjQueryを使うのはとても便利で、簡単な構成でいいです.例えば:

 
  
//       
  
require.config({ 
  
 
  
    // RequireJS           baseUrl       。baseUrl      data-main           。 
  
    baseUrl: "./js", 
  
 
  
    //           ,jquery libs/jquery-1.11.1.min.js    ； 
  
    paths: { 
  
 
  
        "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プラグイン形式:

   (function ($) { 
  
    $.fn.m​​yPlugin = function () { 
  
        //         
  
    }; 
  
})(jQuery); 
 

でも少し修正すればRequireを使うことができます.jsはjQueryプラグインをロードします.

 
  
;(function (factory) { 
  
    if (typeof define === "function" && define.amd) { 
  
        // AMD   
  
        define([ "jquery" ], factory); 
  
    } else { 
  
        //      
  
        factory(jQuery); 
  
    } 
  
}(function ($) { 
  
    $.fn.jqueryPlugin = function () { 
  
        //     
  
    }; 
  
})); 
 

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 () { 
  
 
  
            widgetFactory(window.jQuery); 
  
 
  
        }); 
  
    } else { 
  
        //      
  
        widgetFactory(window.jQuery); 
  
    } 
  
} 
  
(function ($, undefined) { 
  
 
  
    // jQuery Widget Factory    
  
 
  
}));