源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法

  • 时间:2020-07-15 19:47 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
[b]AMD 模块[/b] AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案。 AMD 模块格式本身是一个关于如何定义模块的提案,在这种定义下模块和依赖项都能够异步地进行加载。它有很多独特的优势,包括天生的异步及高度灵活等特性,这些特性能够解除常见的代码与模块标识间的那种紧密耦合。目前它已经被很多项目所接纳,包括jQuery(1.7)。 [b]RequireJS [/b]RequireJS是一个工具库,主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。它的模块管理遵守AMD规范。 [b]jQuery 对AMD的支持 [/b]jQuery 1.7 开始支持将 jQuery 注册为一个AMD异步模块。有很多兼容的脚本加载器(包括 RequireJS 和 curl)都可以用一个异步模块格式来加载模块,这也就表示不需要太多 hack 就能让一切运行起来。可以看看jQuery 1.7 中的源码:
[u]复制代码[/u] 代码如下:
// 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判断:
[u]复制代码[/u] 代码如下:
if ( typeof define === "function" && define.amd ) {  define( "jquery", [], function() {   return jQuery;  }); }
[b]Require.js中使用jQuery[/b] Require.js中使用jQuery非常方便,简单配置就可以了,例如:
[u]复制代码[/u] 代码如下:
// 简单的配置 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!" ); });
[b]Require.js中使用jQuery 插件[/b] 虽然jQuery的支持AMD的API, 这并不意味着jQuery插件也是和AMD兼容的。 一般的jQuery 插件格式:
[u]复制代码[/u] 代码如下:
(function ($) {     $.fn.m​​yPlugin = function () {         //你自己的插件代码     }; })(jQuery);
不过我们稍微修改一下就可以使用Require.js加载一个jQuery插件:
[u]复制代码[/u] 代码如下:
;(function (factory) {     if (typeof define === "function" && define.amd) {         // AMD模式         define([ "jquery" ], factory);     } else {         // 全局模式         factory(jQuery);     } }(function ($) {     $.fn.jqueryPlugin = function () {         //插件代码     }; }));
[b]Require.js中使用jQuery UI组件[/b] Require.js中使用jQuery UI组件也类似的,只要改造一下jQuery Widget Factory 代码就可以了,并且感觉jQuery UI的依赖关系加载就可以了。例如:
[u]复制代码[/u] 代码如下:
(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 代码 }));
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部