AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
AMD 模块
AMD（异步模块定义，Asynchronous Module Definition）格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案。
AMD 模块格式本身是一个关于如何定义模块的提案，在这种定义下模块和依赖项都能够异步地进行加载。它有很多独特的优势，包括天生的异步及高度灵活等特性，这些特性能够解除常见的代码与模块标识间的那种紧密耦合。目前它已经被很多项目所接纳，包括jQuery（1.7）。
RequireJS
RequireJS是一个工具库，主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块，实现异步或动态加载，从而提高代码的性能和可维护性。它的模块管理遵守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 版本。如果有兴趣了解特定的实现细节的话，我们可以将 jQuery 注册为一个具名模块，因为可能会有这样的风险，即它可能被与其它使用了 AMD 的 define() 方法的文件拼合在一起，而没有使用一个合适的、理解匿名 AMD 模块定义的拼合脚本。
高版本的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 插件格式：
$.fn.myPlugin = 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 代码
}));
相关文章
下面小编就为大家分享一篇jQuery+SpringMVC中的复选框选择与传值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
写JS实现拖动需要一大堆不便维护的代码，实属麻烦，Google了大半天，发现了一个优秀的Jquery插件EasyDrag，只需要一行代码便可轻松在主流浏览器上。2010-12-12
这篇文章主要介绍了JQuery中使用on方法绑定hover事件实例,本文用于一些特殊环境下,需要的朋友可以参考下2014-12-12
JavaScript实现向select下拉框中添加和删除元素的方法
这篇文章主要介绍了JavaScript实现向select下拉框中添加和删除元素的方法,涉及jQuery中append()与remove()方法动态操作表单元素的相关技巧,需要的朋友可以参考下2017-03-03
当您在电商购物网站浏览中意的商品时，您可以点击页面中的“加入购物车”按钮即可将商品加入的购物车中。本文介绍借助一款基于jQuery的动画插件，点击加入购物车按钮时，实现商品将飞入到右侧的购物车中的效果。2015-03-03
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
这篇文章主要介绍了jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法,结合实例形式分析了属性插件zTree针对节点序号的相关操作技巧,需要的朋友可以参考下2017-03-03
一张表格告诉你windows.onload()与$(document).ready()的区别
这篇文章主要介绍了windows.onload()与$(document).ready()的区别2014-05-05
jquery easyui combobox模糊过滤(示例代码)
这篇文章主要介绍了jquery easyui combobox模糊过滤(示例代码)。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
下面小编就为大家带来一篇jquery实现用户登陆界面(示例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了jQuery实现网站添加高亮突出显示效果的方法,涉及jQuery针对页面元素与样式的操作技巧,需要的朋友可以参考下2015-06-06
最新评论