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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
vue.js实现三级菜单效果
Oct 19 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
Zend Framework分页类用法详解
2016/03/22 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
Python中实现参数类型检查的简单方法
2015/04/21 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
Python中return函数返回值实例用法
2020/11/19 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
优秀应届毕业生自荐信
2013/11/16 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
详解php中流行的rpc框架
2021/05/29 PHP
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
vue实现滑动解锁功能
2022/03/03 Vue.js