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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
js Flash插入函数免激活代码
Mar 31 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Python3实现购物车功能
2018/04/18 Python
python with (as)语句实例详解
2020/02/04 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
Python 必须了解的5种高级特征
2020/09/10 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
教师评优事迹材料
2014/01/10 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
施工现场安全管理制度
2015/08/05 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
php引用传递
2021/04/01 PHP
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
Python加密与解密模块hashlib与hmac
2022/06/05 Python