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 相关文章推荐
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
JS 数字转换研究总结
Dec 26 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
layui导出所有数据的例子
Sep 10 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
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
phpBB BBcode处理的漏洞
2006/10/09 PHP
桌面中心(二)数据库写入
2006/10/09 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
JS跨域问题详解
2014/11/25 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
layui导出所有数据的例子
2019/09/10 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python深入学习之内存管理
2014/08/31 Python
详解python之配置日志的几种方式
2017/05/22 Python
使用Python处理BAM的方法
2018/09/28 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
python热力图实现简单方法
2021/01/29 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
英文简历中的自荐信范文
2013/12/14 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
2014年电教工作总结
2014/12/19 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis