日期:2014-05-16 浏览次数:20327 次
模块化编写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,