用RequireJS编写JavaScript模块

模块化编写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）;
}
};
}
）;