博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery 对AMD的支持(Require.js中如何使用jQuery)
阅读量:5013 次
发布时间:2019-06-12

本文共 2659 字,大约阅读时间需要 8 分钟。

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

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 代码         }));

 转载地址:http://www.css88.com/archives/4826

转载于:https://www.cnblogs.com/moqiutao/p/6428710.html

你可能感兴趣的文章
初遇GitHub
查看>>
[C# 网络编程系列]专题八:P2P编程
查看>>
Jsの练习-数组常用方法 -forEach()
查看>>
动态绑定treeview的方法
查看>>
jvm参数
查看>>
3-1 案例环境初始化
查看>>
读《构建之法》第四章和十七章有感
查看>>
01背包
查看>>
开发一个12306网站要多少钱?技术分析12306合格还是不合格
查看>>
Selenium 入门到精通系列:六
查看>>
HTTP与TCP的区别和联系
查看>>
android 实现2张图片层叠效果
查看>>
我个人所有的独立博客wordpress都被挂马
查看>>
html5——动画案例(时钟)
查看>>
调用Android系统“应用程序信息(Application Info)”界面
查看>>
ios中用drawRect方法绘图的时候设置颜色
查看>>
数据库中的外键和主键理解
查看>>
个人博客03
查看>>
Expression<Func<T,TResult>>和Func<T,TResult>
查看>>
文件缓存
查看>>