RequireJSでJavaScriptモジュールを作成する

モジュール化されたJavaScriptの作成は、Webフロントエンドプログラムが拡大している間に、良い再構築技術です.
次の例では2つのモジュールがあります.
artDialogモジュールはjqueryとjqueryに依存する.artDialogライブラリは、エラーダイアログをポップアップする機能を提供します.

require.config({
	paths: {
		"jquery": "../thirdParty/jquery-1.8.0.min",
		"jquery.artDialog": "../../plugin/artDialog4.1.6/jquery.artDialog"
	}
});

define("artDialog",
       ["jquery", "jquery.artDialog"],
       function ($, artDialog) {
	       return {
		       cancelText: "",

		       language: "",

		       // language should be either 'cn' or 'en'
		       init: function (language) {
			       this.language = language;
			       if (language === "cn") {
				       this.cancelText = "  ";
			       } else {
				       this.cancelText = "Cancel";
			       }
		       },

		       error: function (message) {
			       $.dialog({
				       icon: "error",
				       content: message,
				       cancelVal: this.cancelText,
				       ok: function () {
					       this.close();
				       }
			       });
		       }
	       };
       }
      );

説明します.
1.require.configの中のpathsはkey:value形式で、keyは名前の略記で、pathは現在の位置から依存ファイルの経路を見つけます
2.defineはモジュールを定義する意味で、最初のパラメータ「artDialog」はこのモジュールの名前を指し、配列の中には本モジュールに依存する他のjsモジュールがあり、
3.RequireJSは2定義の依存モジュールを見た後、これらのjsファイルをロードし、ロードが完了すると関数function($,artDialog)を呼び出します.
4.コールバック関数はjsonオブジェクトを反転し、メンバー変数と関数が含まれます.
ajaxUtilityモジュールの内部にはartDialogモジュールが使用されています.コードを見てください.

require.config({
	paths: {
		"jquery": "../thirdParty/jquery-1.8.0.min",
		"artDialog": "./dialog"
	}
});

define("ajaxUtility",
       ["jquery","artDialog"],
       function ($, artDialog) {
	       return {
		       cancelText: "",

		       language: "",

		       // language should be either 'cn' or 'en'
		       init: function (language) {
			       this.language = language;
			       artDialog.init(language);
			       if (this.language === "cn") {
				       this.cancelText = "  ";
			       } else {
				       this.cancelText = "Cancel";
			       }
		       },

		       // popup an error dialog
		       defualtErrorHandler: function (jqXHR, textStatus) {
			       artDialog.error("Ajax request got an error:" + textStatus);
		       },

		       // execute .ajax function and except the returned data type is json
		       // handler(msg) will be callback when .ajax succeeded
		       // errorHandler(jqXHR, textStatus) willl be callback if .ajax failed
		       exe: function (urlPath, asyncWay, method, dataValue, handler, errorHandler, context) {
			       var error, request;
			       if (errorHandler) {
				       error = errorHandler;				       
			       } else {
				       error = this.defaultErrorHandler;
			       }
			       request = $.ajax({
				       url: urlPath,
				       async: asyncWay,
				       type: method,
				       dataType: 'json',
				       data: dataValue
			       });

			       // request.done(handler);

			       request.done(
				       (function (ob, hdl) {
					       return function(msg) {
						       hdl(ob, msg);  
					       }
				       })(context, handler)
			       );
			       request.fail(error);
		       },

		       // post data to server using .ajax
		       // handler(msg) will be callback when .ajax succeeded
		       // errorHandler(jqXHR, textStatus) willl be callback if .ajax failed
		       post: function (urlPath, asyncWay, dataValue, handler, errorHandler, context) {
			       this.exe(urlPath, asyncWay, 'POST', dataValue, handler, errorHandler, context);
		       },

		       // call web method with GET to server using .ajax
		       // handler(msg) will be callback when .ajax succeeded
		       // errorHandler(jqXHR, textStatus) willl be callback if .ajax failed
		       get: function (urlPath, asyncWay, dataValue, handler, errorHandler, context) {
			       this.exe(urlPath, asyncWay, 'GET', dataValue, handler, errorHandler, context);
		       }
	       };
       }
      );

1.require.configではモジュールartDialogがdialogにあることを説明しています.jsファイル
2.define文はajaxUtilityモジュールを定義し、dialogをロードする.jsファイルとjqueryが完了すると、関数function($,artDialog)が呼び出されます.パラメータartDialogは、前のモジュールから返されたオブジェクトであることに注意してください.
依存ロードの説明、chromeデバッグでは、共通依存のjqueryが2回ロードされる心配はありません.RequireJSはスマートです.依存順序も心配なく,各モジュールが自分の依存モジュールを正しく定義すれば順序が保障される.
最後に、3番目のモジュールで、2つのモジュールに依存する方法と、他のモジュールについて説明します.

require.config({
	paths: {
		"ajaxUtility": "./ajax_utility",
		"jquery.validate": "../../plugin/jquery-validation-1.9.0/jquery.validate.min",
		"flexigrid": "../../plugin/flexigrid-1.1/js/flexigrid",
		"flexigrid.pack": "../../plugin/flexigrid-1.1/js/flexigrid.pack",
		"jquery.ui": "../../plugin/jquery-ui-1.8.23.custom/js/jquery-ui-1.8.23.custom.min"
	}
});

require(["ajaxUtility"], function(ajaxUtility) {
	ajaxUtility.init("cn");
	require(["jquery.validate", "flexigrid", "flexigrid.pack", "language", "jquery.ui"], function(util) {
		require(["log"], function(util) {
			$(document).ready(function() {
				log.init();
			})
		});
	});
});

最外層のrequireはajaxUtilityをロードするので、最初にロードされます.juery、jquery.ダイアモンドとダイアモンドjsはロードされ、jqueryなどの依存関係があります.uiはjqueryがロードされるかどうかを心配する必要はありません.