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操作Cookies的实现代码
Oct 09 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
原生js二级联动效果
Jun 20 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
vue操作dom元素的3种方法示例
Sep 20 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调用Webservice实例代码
2011/07/29 PHP
PHP面向对象概念
2011/11/06 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
Dom 是什么的详细说明
2010/10/25 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
如何利用Python写个坦克大战
2020/11/18 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
市场营销专业毕业生自荐信
2013/11/02 职场文书
大学生写自荐信的技巧
2014/01/08 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技