博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Require.js中使用jQuery 插件
阅读量:6294 次
发布时间:2019-06-22

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

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.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组件也类似的,只要改造一下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 代码 }));

 

转载于:https://www.cnblogs.com/BlingSun/p/7597068.html

你可能感兴趣的文章
《高并发Oracle数据库系统的架构与设计》一2.5 索引维护
查看>>
Firefox 是 Pwn2own 2014 上攻陷次数最多的浏览器
查看>>
阿里感悟(十八)- 应届生Review
查看>>
话说模式匹配(5) for表达式中的模式匹配
查看>>
《锋利的SQL(第2版)》——1.7 常用函数
查看>>
jquery中hover()的用法。简单粗暴
查看>>
线程管理(六)等待线程的终结
查看>>
spring boot集成mongodb最简单版
查看>>
DELL EqualLogic PS存储数据恢复全过程整理
查看>>
《Node.js入门经典》一2.3 安装模块
查看>>
《Java 开发从入门到精通》—— 2.5 技术解惑
查看>>
Linux 性能诊断 perf使用指南
查看>>
实操分享:看看小白我如何第一次搭建阿里云windows服务器(Tomcat+Mysql)
查看>>
Sphinx 配置文件说明
查看>>
数据结构实践——顺序表应用
查看>>
python2.7 之centos7 安装 pip, Scrapy
查看>>
机智云开源框架初始化顺序
查看>>
Spark修炼之道(进阶篇)——Spark入门到精通:第五节 Spark编程模型(二)
查看>>
一线架构师实践指南:云时代下双活零切换的七大关键点
查看>>
ART世界探险(19) - 优化编译器的编译流程
查看>>