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同时提交多个Web表单的方法
Dec 26 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 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数组游标实现对数组的各种操作详解
2016/01/26 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
phpStorm2020 注册码
2020/09/17 PHP
JavaScript学习历程和心得小结
2010/08/16 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
JS访问对象两种方式区别解析
2020/08/29 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
大四毕业生学习总结的自我评价
2013/10/31 职场文书
大学毕业生的自我鉴定
2013/11/30 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
小班开学寄语
2014/04/04 职场文书
初中作文评语大全
2014/04/23 职场文书
质量承诺书怎么写
2014/05/24 职场文书
技术负责人任命书
2014/06/05 职场文书
财务管理专业自荐书
2014/09/02 职场文书
安全隐患整改报告
2014/11/06 职场文书
2015高考寄语集锦
2015/02/27 职场文书
中秋节寄语2015
2015/03/24 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
matlab xlabel位置的设置方式
2021/05/21 Python
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL