文档章节

jQuery 对AMD的支持

不知道起什么名字
 不知道起什么名字
发布于 2016/11/30 23:51
字数 904
阅读 17
收藏 0

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 中的源码:

 

  1. // Expose jQuery as an AMD module, but only for AMD loaders that
  2. // understand the issues with loading multiple versions of jQuery
  3. // in a page that all might call define(). The loader will indicate
  4. // they have special allowances for multiple jQuery versions by
  5. // specifying define.amd.jQuery = true. Register as a named module,
  6. // since jQuery can be concatenated with other files that may use define,
  7. // but not use a proper concatenation script that understands anonymous
  8. // AMD modules. A named AMD is safest and most robust way to register.
  9. // Lowercase jquery is used because AMD module names are derived from
  10. // file names, and jQuery is normally delivered in a lowercase file name.
  11. if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
  12. define( "jquery", [], function () { return jQuery; } );
  13. }

其工作的原理是,所使用的脚本加载器通过指定一个属性,即 define.amd.jQuery 为 true,来标明自己可以支持多个 jQuery 版本。如果有兴趣了解特定的实现细节的话,我们可以将 jQuery 注册为一个具名模块,因为可能会有这样的风险,即它可能被与其它使用了 AMD 的 define() 方法的文件拼合在一起,而没有使用一个合适的、理解匿名 AMD 模块定义的拼合脚本。

高版本的jQuery (1.11.1) 去掉了define.amd.jQuery判断:

 

  1. if ( typeof define === "function" && define.amd ) {
  2. define( "jquery", [], function() {
  3. return jQuery;
  4. });
  5. }

Require.js中使用jQuery

Require.js中使用jQuery非常方便,简单配置就可以了,例如:

 

  1. // 简单的配置
  2. require.config({
  3.  
  4. // RequireJS 通过一个相对的路径 baseUrl来加载所有代码。baseUrl通常被设置成data-main属性指定脚本的同级目录。
  5. baseUrl: "./js",
  6.  
  7. // 第三方脚本模块的别名,jquery比libs/jquery-1.11.1.min.js简洁明了;
  8. paths: {
  9.  
  10. "jquery": "libs/jquery-1.11.1.min.js"
  11.  
  12. }
  13.  
  14. });
  15.  
  16. // 开始使用jQuery 模块
  17. require(["jquery"], function ($) {
  18.  
  19. //你的代码
  20. //这里直接可以使用jquery的方法,比如:$( "#result" ).html( "Hello World!" );
  21.  
  22. });

Require.js中使用jQuery 插件

虽然jQuery的支持AMD的API, 这并不意味着jQuery插件也是和AMD兼容的。

一般的jQuery 插件格式:

 

  1. (function ($) {
  2. $.fn.m​​yPlugin = function () {
  3. //你自己的插件代码
  4. };
  5. })(jQuery);

不过我们稍微修改一下就可以使用Require.js加载一个jQuery插件:

 

  1. ;(function (factory) {
  2. if (typeof define === "function" && define.amd) {
  3. // AMD模式
  4. define([ "jquery" ], factory);
  5. } else {
  6. // 全局模式
  7. factory(jQuery);
  8. }
  9. }(function ($) {
  10. $.fn.jqueryPlugin = function () {
  11. //插件代码
  12. };
  13. }));

Require.js中使用jQuery UI组件

Require.js中使用jQuery UI组件也类似的,只要改造一下jQuery Widget Factory 代码就可以了,并且感觉jQuery UI的依赖关系加载就可以了。例如:

 

  1. ;(function (widgetFactory) {
  2.  
  3. if (typeof define === "function" && define.amd) {
  4. // AMD模式
  5. define("jquery.ui.widget", ["jquery"], function () {
  6.  
  7. widgetFactory(window.jQuery);
  8.  
  9. });
  10. } else {
  11. // 全局模式
  12. widgetFactory(window.jQuery);
  13. }
  14. }
  15. (function ($, undefined) {
  16.  
  17. // jQuery Widget Factory 代码
  18.  
  19. }));

本文转载自:http://www.css88.com/archives/4826

上一篇: ECharts2.0
下一篇: requirejs使用
不知道起什么名字
粉丝 2
博文 12
码字总数 7419
作品 0
南京
私信 提问
jQuery 1.7增加了对html5的支持

切图网(www.qietu.com)讯:jQuery最新版本添加了对html5的支持,发布的版 本号为jQuery1.7。 jQuery对我们来说一点也不陌生,作为一个第三发的js插件,影响程度居然影响了整个javascript书...

tyshymy
2012/02/06
277
0
jQuery 1.7将HTML5引入IE6-8,实施弃用策略

jQuery 1.7已于近日发布。新版本做出多项改进,如新的事件API,委托事件的性能更高,对IE6-8的HTML5支持,对AMD规范的支持等等。同时,jQuery还弃用了某些特性,以使jQuery保持精简。 以下是...

张金富
2011/11/18
3.8K
16
jQuery UI 1.11.0 正式版发布

jQuery UI 1.11.0 正式版发布,该版本包含一个新的部件 Selectmenu ,改进对 AMD 的支持,改进对 Bower 的支持,修复了一些 bug。jQuery UI 1.11.0 支持 jQuery 1.6 以及更新的版本。 详细介...

oschina
2014/06/27
4.4K
5
RequireJS入门(一)

RequireJS由James Burke创建,他也是AMD规范的创始人。 RequireJS会让你以不同于往常的方式去写JavaScript。 你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依...

彭博
2012/06/07
3.1K
3
jQuery 1.11 和 2.1 Beta 1 发布

jQuery 1.11 和 2.1 Beta1 发布了,获取地址: http://code.jquery.com/jquery-1.11.0-beta1.js http://code.jquery.com/jquery-2.1.0-beta1.js 别忘了 jQuery 1.x 支持 IE 6/7/8 ,而 jQue......

oschina
2013/09/20
3.8K
11

没有更多内容

加载失败,请刷新页面

加载更多

可见性有序性,Happens-before来搞定

写在前面 上一篇文章并发 Bug 之源有三,请睁大眼睛看清它们 谈到了可见性/原子性/有序性三个问题,这些问题通常违背我们的直觉和思考模式,也就导致了很多并发 Bug 为了解决 CPU,内存,IO ...

tan日拱一兵
22分钟前
2
0
网络七层模型与TCP/UDP

为了使全球范围内不同的计算机厂家能够相互之间能够比较协调的进行通信,这个时候就有必要建立一种全球范围内的通用协议,以规范各个厂家之间的通信接口,这就是网络七层模型的由来。本文首先...

爱宝贝丶
25分钟前
2
0
Jenkins World 贡献者峰会及专家答疑展位

本文首发于:Jenkins 中文社区 原文链接 作者:Marky Jackson 译者:shunw Jenkins World 贡献者峰会及专家答疑展位 本文为 Jenkins World 贡献者峰会活动期间的记录 Jenkins 15周岁啦!Jen...

Jenkins中文社区
43分钟前
8
0
杂谈:面向微服务的体系结构评审中需要问的三个问题

面向微服务的体系结构如今风靡全球。这是因为更快的部署节奏和更低的成本是面向微服务的体系结构的基本承诺。 然而,对于大多数试水的公司来说,开发活动更多的是将现有的单块应用程序转换为...

liululee
58分钟前
7
0
OSChina 周二乱弹 —— 我等饭呢,你是不是来错食堂了?

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @ 自行车丢了:给主编推荐首歌 《クリスマスの夜》- 岡村孝子 手机党少年们想听歌,请使劲儿戳(这里) @烽火燎原 :国庆快来,我需要长假! ...

小小编辑
今天
681
11

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部