同一个页面引入多个版本jQuery实现共存jQuery noConflict方法释放$标识符控制

拼搏现实的明天。 2022-03-29 11:12 168阅读 0赞

##  同一个页面引入多个版本jQuery实现共存jQuery noConflict方法释放$标识符控制 ##

# #

**一、问题背景**

1、一个老项目，需要调整部分前端功能，由于之前的jQuery版本太低，需要升级jQuery的版本。 问题来了，直接升级到高版本的jQuery ， 之前的功能不能使用了。 （不知道为何jQuery高版本不兼容低版本的）

2、需求就是： 同一个页面需要多个不同版本的jQuery共存，在不同的方法里，使用不同的jQuery对象进行操作。

**二、代码尝试**

1、在html页面，引入两个不同版本的 jQuery lib （**低**版本在前，高版本在后）

2、输出jQuery 版本号：**jQuery版本是： 2.0.0**

3、对调jQuery版本引入顺序 （**高**版本在前，低版本在后）

4、使用 2中方法，再次输出jQuery版本号： **jQuery版本是： 1.10.0**

5、结论： 通过调整 jQuery的引入顺序，无法解决不同版本jQuery共存的问题。 **最终获得的jQuery对象是最后加载的那一个。**

**三、问题解决**

1、在菜鸟教程中看到了 ---> [ jQuery - noConflict() 方法][jQuery - noConflict_]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70][]

2、使用 **noConflict()** 方法实现jq版本共存

$(function(){
        var $2 = $.noConflict(); // 第二个加载的jQuery对象变成了 $2
        var version = $.fn.jquery ;
        var version2 = $2.fn.jquery ;
        console.info(version , version2);
        document.write("jQuery版本是： " + version + "jQuery2版本是： " + version2);
    });

3、输出结果： **jQuery版本是： 1.10.0, jQuery2版本是： 2.0.0** 。

**四、总结**

1、当前项目中有多个版本的jQuery对象需要共存，或者 jQuery 对象$ ，与其他js框架 $ 对象冲突时，**可以使用 $.noConflict() 来释放对 $ 标识符的控制。**

参考资料： [jQuery - noConflict() 方法][jQuery - noConflict_]

[jQuery - noConflict_]: http://www.runoob.com/jquery/jquery-noconflict.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70]: /images/20220329/ca81422a745241fe9832941848906602.png