模塊化編寫JavaScript，在web前端程序不斷擴大的時候，是一個很好的重構技術。
下面的例子有兩個模塊，
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);
}
};
}
);
