网站首页 > 编程文章 正文
简要说明:为何需要在一个页面上,让多个版本的 jQuery 共存呢?比如 jquery-1.5 与 jquery1.12;即使解决了共存问题了,但是代码页面乱七八糟的,又该怎么办?
直接引用最新版本的不行吗?答案肯定是不行的,简单举个例子:
如果你当前站点引用的是 1.5 版本的 jQuery 以及相关的一些插件;如果直接将 jQuery 升级到最新版本,很大部分不兼容插件会出错,甚至直接停止工作;如此,只能将这些插件也全部升级,或者等各个插件的作者发布支持最新版 jQuery 的版本。
方法就是通过 jQuery 的 noConflict() 方法来让多版本共存
当我们引入 jQuery 时,jQuery 向 window 这个全局空间注入两个变量
window.$ = window.jQuery = {jQuery object}
同时,jQuery 内部保留旧的 window.$ 和 window.jQuery 对象的引用,当我们调用:var $jq = $.noConflict(); 时,window.$ 被恢复,但 window.jQuery 仍然是 jQuery;而当我们调用:var $jq = $.noConflict(true); 时,window.$ 和 window.jQuery 都被恢复了,一切看起来就像 jQuery 从未被引入过一样,只不过可以通过变量 $jq 来使用jQuery,所以让多版本共存,可以这样实现。
<script src='jquery-1.5.min.js'></script>
<script src='jquery-1.12.min.js'></script>
<script type='text/javascript'>
// 现在window.$和window.jQuery是1.12版本的
console.log($().jquery); // =>'1.12.0'
var $jq = jQuery.noConflict(true);
// 现在window.$和window.jQuery被恢复成1.5.0版本
console.log($().jquery); // =>'1.5.0'
// 可以通过 $jq 访问 1.12.0 版本的 jQuery 了
</script>
<script src='my-script.js'></script>
现在在 my-script.js 中,用 $jq 可以访问 1.12.0 版本的 jQuery 了;
但是,伴随的问题又来了,同一个页面引入两个版本的 jQuery 后,页面变得乱七八糟,如果有人将 var $jq = jQuery.noConflict(true) 删除了,怎么办?又或者,将两个版本的jQuery,调换了位置,导致最后得不到正确的 jQuery 版本;最好的办法就是:不改动页面,直接引用我们自己编写的新的Js文件:
<script src='jquery-1.5.min.js'></script>
<script src='my-script.js'></script>
这样一来,我们就可以直接在新的Js文件内部引入最新版本的 jQuery 了,而页面上无论有没有 jQuery,有什么版本的 jQuery,我们都不关心;
my-script.js 如下所示 ( 用匿名函数是个好习惯,不污染全局变量,同时杜绝外部代码的访问 )
// begin jQuery v1.12.2
(function() {
!function(a,b) {
"object" == typeof module && "object" == typeof module.exports
? module.exports = a.document ? b(a, !0) : function(a) {
if(!a.document) throw new Error("jQuery requires a window with a document");
// ...
}
var $ = jQuery.noConflict(true);
})();
直接将最新版本嵌入即可 ( 当然得是压缩后的代码 ),最后加一句:var $ = jQuery.noConflict(true);
注:$ 是一个局部变量,在后面的代码中,可以随时引用这个 $,跟页面上其它版本的 jQuery 的全局变量 $ 不是一个对象
猜你喜欢
- 2024-09-10 前端程序员要学习的html前端页面的优化方法
- 2024-09-10 如何加载jquery(如何加载字体)
- 2024-09-10 jQuery 功能扩展(jquery的功能)
- 2024-09-10 jquery是干什么的--乐字节前端(jqueryui是干什么的)
- 2024-09-10 超全面!这可能是最全面的 jQuery 知识总结
- 2024-09-10 分享一个通用代码——飘窗(兼容各种浏览器)
- 2024-09-10 jQuery 处理表单元素的值(jquery操作表单)
- 2024-09-10 JavaScript入门系列:基础知识与语法整理笔记
- 2024-09-10 JS类库Jquery(一):JQuery入门,优雅的使用JQuery
- 2024-09-10 初步认识,JavaScript的超级库jQuery
你 发表评论:
欢迎- 06-24一个老爸画了超级有爱的365幅画 | 父亲节献礼
- 06-24产品小白看魏则西事件——用产品思维审视百度推广
- 06-24某教程学习笔记(一):13、脚本木马原理
- 06-24十大常见web漏洞——命令执行漏洞
- 06-24初涉内网,提权那些事(内网渗透提权)
- 06-24黑客命令第16集:47种最常见的**网站方法2/2
- 06-24铭说 | 一句话木马的多种变形方式
- 06-24Java隐藏的10倍效率技巧!90%程序员不知道的魔法方法(附代码)
- 最近发表
- 标签列表
-
- spire.doc (70)
- instanceclient (62)
- solidworks (78)
- system.data.oracleclient (61)
- 按键小精灵源码提取 (66)
- pyqt5designer教程 (65)
- 联想刷bios工具 (66)
- c#源码 (64)
- graphics.h头文件 (62)
- mysqldump下载 (66)
- libmp3lame (60)
- maven3.3.9 (63)
- 二调符号库 (57)
- git.exe下载 (68)
- diskgenius_winpe (72)
- pythoncrc16 (57)
- solidworks宏文件下载 (59)
- qt帮助文档中文版 (73)
- satacontroller (66)
- hgcad (64)
- bootimg.exe (69)
- android-gif-drawable (62)
- axure9元件库免费下载 (57)
- libmysqlclient.so.18 (58)
- springbootdemo (64)
本文暂时没有评论,来添加一个吧(●'◡'●)