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 相关文章推荐
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
jquery $("#variable") 循环改变variable的值示例
Feb 23 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
VueJS全面解析
Nov 10 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 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
PHP实现MySQL更新记录的代码
2008/06/07 PHP
PHP网络操作函数汇总
2015/05/18 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
详解JavaScript 的变量
2019/03/08 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
基于python时间处理方法(详解)
2017/08/14 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
应届毕业生求职信范例分享
2013/12/17 职场文书
师范学院教师自荐书
2014/01/31 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
房地产项目建议书
2014/03/12 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
2015年领班工作总结
2015/04/29 职场文书
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python