如何在一个项目引入两个不同版本的jq?

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/XiaoningZhu/article/details/94897272

最近项目中使用到了jq的一个插件,这个插件所使用的jq的版本较低,是jq1.4,所以我在项目中引入了jq1.4。但是这个时候我的项目运行出现了问题,出现报错 $(...).on is not a function,而且自定义属性data-url的值也不能用 jqDom.data("url")这个方法获取了,得到的值是undefined。经过查找资料,这个问题是由于jq版本太低,所以这两个方法不能使用,必须要使用较高版本的jq。

那么另一个问题来了,我要怎么在一个项目中同时引入两个版本的jq?并且他们之间不会冲突呢?

目前我的解决方案是在使用jq插件之前,用script标签引入较低版本的jq1.4。当插件使用结束,再用script标签引入另一个较高版本的jq。但我觉得这个方法其实不太好,但目前还没有找到更好的方法。其实解决方案应该挺多,很多人都遇到过这个问题。等找到更好的方法再来补充。

如何在一个项目引入两个不同版本的jq的方法如下:

方法一:使用jQuery的noConflict()方法

我们先来看一下jquery的noConflict方法,noConflict() 方法的作用是令 jQuery让渡变量 $ 的 控制权。

noConflict()方法主要有两个作用:

(1)该方法释放 jQuery 对 $ 变量的控制。也就是说 $ 不再表示jQuery了。

(2)该方法也可用于为 jQuery 变量规定新的自定义名称。也就是说可以不用 $ 表示jQuery,你可以用别的符号,比如用jq。

提示:noConflict,在其他 JavaScript 库为其函数使用 $ 时,或者在一个项目中需引入多个不同版本的jQuery时,该方法很有用。

如何在一个项目引入两个不同版本的jq呢?


<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了。

当其他 JavaScript 库为其函数使用 $ 时,如何避免冲突呢?

方法一:

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
  // 使用jQuery的 $ 的代码
  $.noConflict();
  // 使用另一个库的 $ 的代码
</script>

方法二:

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // 使用 jQuery $ 的代码
  });
  // 使用其他库的 $ 的代码
</script>

 最后来看一下jQuery的noConflict的具体实现代码,

(function(window,undefined){
    // Map over jQuery in case of overwrite
    var _jQuery = window.jQuery,
    // Map over the $ in case of overwrite
    _$ = window.$,
    jQuery.extend({
        noConflict: function( deep ){
             if ( window.$ === jQuery ) {
                 window.$ = _$;
             }
             if ( deep && window.jQuery === jQuery ) {
                 window.jQuery = _jQuery;
             }
         return jQuery;
        }
})

 可以看到,jQuery 的 noConflict 不仅仅是要让 window.$ 和 window.jQuery 失效,而且把原本这两个变量引用的东西给还原回来。


参考文章:

https://blog.csdn.net/phpcui/article/details/52122146

https://www.liaoxuefeng.com/article/964528543572032

https://www.w3school.com.cn/jquery/core_noconflict.asp

https://zhidao.baidu.com/question/1239712776390687219.html

展开阅读全文

没有更多推荐了,返回首页