多个jQuery版本共存的处理方案


Posted in Javascript onMarch 17, 2015

如何在一个页面上让多个jQuery共存呢?比如jquery-1.5和jquery-1.11。

你可能会问,为什么需要在一个页面上让多个jQuery共存?直接引用最新版本的jQuery不行吗?

答案是,不行。因为现实生活是非常残酷的。举个栗子:

现有网站已经引用了jQuery 1.5以及相关插件。如果直接将jQuery升级到最新版,这些插件就不工作了,除非你能把这些插件全部升级,或者等各个插件的作者发布支持最新版jQuery的版本。

现在,如果我们要基于jQuery开发新的插件或者写JavaScript代码,用新版本会比较省时省力。

但旧版本又绝对不能扔掉,怎么办?

方法是通过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。

所以,让新旧版本共存的jQuery可以这样实现:

   <script src="jquery-1.5.js"></script>

   <script src="jquery-1.11.js"></script>

   <script>

      // 现在window.$和window.jQuery是1.11版本:

      console.log($().jquery); // => '1.11.0'

      var $jq = jQuery.noConflict(true);

      // 现在window.$和window.jQuery被恢复成1.5版本:

      console.log($().jquery); // => '1.5.0'

      // 可以通过$jq访问1.11版本的jQuery了

   </script>

   <script src="myscript.js"></script>

在myscript.js中,用$jq就可以访问1.11版本的jQuery了。

至此,问题解决。

但是,引入两个版本的jQuery后,页面被搞得乱七八糟。如果有人看不懂代码,把var $jq = jQuery.noConflict(true);删掉了怎么办?或者,把导入jQuery的两行互换了位置,最后就得不到正确的jQuery版本。

最好的办法是不改动页面,直接引用我们编写的新的js文件:

   <script src="jquery-1.5.js"></script>

   <script src="myscript.js"></script>

这样一来,我们就在myscript.js内部引用最新版jQuery,而页面无论有没有jQuery,有哪个版本的jQuery,我们都不关心。

开始编写新的更好的解决方案。首先,把myscript.js的主体确定下来:

   // myscript.js

   (function () {

      // BEGIN

      // TODO: javascript code here...

      // END

   })();

用匿名函数是个好习惯,不污染全局变量,同时杜绝外部代码访问。

下一步是直接把jQuery 1.11的代码嵌进去:

   // myscript.js

   (function () {

      // BEGIN

      /*! jQuery v1.11.1 */

      !function(a,b){"object"==typeof module&&"object"==typeof module.exports?...

      if(k&&j[k]&&(e||j[k].data)||void 0!==d||"string"!=typeof b)return k||(k=...

      },cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(thi...

      var $ = jQuery.noConflict(true);

      // TODO: javascript code here...

      // END

   })();

嵌入的当然是压缩后的代码,一共3行,然后加一句:

   var $ = jQuery.noConflict(true);

注意到$是一个局部变量,在后面的代码中,可以随时引用这个$,跟页面上其他版本的jQuery全局变量$不是一个对象。

最后一步工作就是检查jQuery的协议是否允许我们把jQuery源码直接嵌入我们自己的JavaScript代码。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 #Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 #Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 #Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 #Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 #Javascript
jQuery实现预加载图片的方法
Mar 17 #Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 #Javascript
You might like
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
php 全局变量范围分析
2009/08/07 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
初识Node.js
2014/09/03 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
python requests post多层字典的方法
2018/12/27 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
Python LMDB库的使用示例
2021/02/14 Python
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
大学毕业生简单自荐信
2013/11/05 职场文书
给老婆的保证书范文
2014/04/28 职场文书
倡导文明标语
2014/06/16 职场文书
力学专业求职信
2014/07/23 职场文书
幼儿教师辞职信
2015/02/27 职场文书
新手初学Java网络编程
2021/07/07 Java/Android
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
Python中的程序流程控制语句
2022/02/24 Python
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL