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


Posted in Javascript onJune 06, 2014

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 插件格式:

(function ($) {
    $.fn.m​​yPlugin = 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 代码
}));
Javascript 相关文章推荐
用js做一个小游戏平台 (一)
Dec 29 Javascript
JavaScript prototype对象的属性说明
Mar 13 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery插件开发详细教程
Jun 06 #Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 #Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 #Javascript
js检验密码强度(低中高)附图
Jun 05 #Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 #Javascript
js如何判断用户是否是用微信浏览器
Jun 05 #Javascript
如何获取网站icon有哪些可行的方法
Jun 05 #Javascript
You might like
详解PHP中websocket的使用方法
2016/09/15 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
[IE&FireFox兼容]JS对select操作
2007/01/07 Javascript
Javascript 入门基础学习
2010/03/10 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python functools模块学习总结
2015/05/09 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
python路径的写法及目录的获取方式
2019/12/26 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
基于python实现查询ip地址来源
2020/06/02 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
阿尔卡特(中国)的面试题目
2014/08/20 面试题
初中生物教学反思
2014/01/10 职场文书
初三化学教学反思
2014/01/23 职场文书
计算机个人求职信范例
2014/01/24 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
MySQL基础(一)
2021/04/05 MySQL
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js