三分钟带你玩转jQuery.noConflict()

<script src="/UploadFiles/2021-04-02/jquery.min.js">

jQuery在匿名函数内部定义了两个全局对象:jQuery和$，把自己暴露给外部环境。开发者习惯使用的各种公共方法都是通过这两个对象进行访问的，如jQuery.ajax(),jQuery.css()等。在最初，它们指向匿名函数内部的同一个对象jQuery(私有变量)，通过它访问匿名函数内部的私有变量和函数。这使得匿名函数在自执行后其内部的私有变量和函数仍然进驻在内存里，不会被javascript的垃圾回收机制清除。




window.jQuery = window.$ = jQuery; 


当jQuery被页面加载后，当前页面有可能已经存在了jQuery和$这两个全局变量（比如，加载了其它的第三方库，其内部也定义了它俩），这就会导致已经存在的对象被覆盖（全局命名空间污染）。为了解决这个问题，jQuery在内部先将已经存在的全局变量缓存起来，保存在私有变量_jQuery和_$中，供后续调用。所以，如果页面在加载jQuery库时，还不存在jQuery和$对象，那么_jQuery和_$都是undefined；否则，它们都会保存对已有jQuery和$的引用（也许来自之前引用的第三方库或是不同版本的jQuery库）。之后，jQuery会像上文说描述的那样，覆盖这两个全局变量并将自己暴露给外部环境。至此，页面上的全局变量jQuery和$已经指向刚刚引入的jQuery库。




// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
// Otherwise expose jQuery to the global object as usual
window.jQuery = window.$ = jQuery; 


jQuery.noConflict()的神奇效果？


假设你维护的系统已经引用了1.7.0版本的jQuery库，而你在新添加的功能里引用了1.10.2版本的jQuery库。那么，还有办法重新使用jQuery 1.7.0 或是同时使用两个版本的jQuery库吗？答案是肯定，那就是jQuery.noConflict()。实际上，利用jQuery.noConflict()，你可以立刻把全局变量jQuery和$重新指向之前引用的对象。很神奇吧？这就是为什么jQuery在对外暴露自己前内部缓存了之前引用的对象。
"htmlcode">

// "Renaming" jQuery
var jayquery = jQuery.noConflict( true );
// Now we can call things like jayquery.ajax(), jayquery.css(), and so on


我们再来看一个代码片段，测试一下是否真正理解了神奇的noConflict()




<!-- jQuery and $ are undefined -->
<script src="/UploadFiles/2021-04-02/jquery.min.js">

避免第三方库的冲突


以上的代码片段展示了如何解决多版本jQuery的冲突。接下来，我们尝试解决jQuery库和第三方库的冲突，下面出现的代码片段在jQuery的官方文档中都有，有兴趣的程序猿可以仔细阅读官方文档体会其中的区别。


直接使用No-Conflict模式


使用No-Conflict模式，其实就是对jQuery进行重命名，再调用。




<!-- 采用no-conflict模式，jquery.js在prototype.js之后被引入. -->
<script src="/UploadFiles/2021-04-02/prototype.js">

使用自执行函数封装


使用这种方式，你可以在匿名函数内部继续使用标准的$对象，这也是众多jQuery插件采用的方法。需要注意的是，使用这种方法，函数内部无法再使用prototype.js定义的$对象了。




<!-- jquery.js在prototype.js之后被引入. -->
<script src="/UploadFiles/2021-04-02/prototype.js">

使用标准jQuery(document).ready()函数


如果jQuery库在其它库之前引入，那么jQuery内部定义的jQuery和$会被第三方库覆盖，这时候再使用noConflict()已经没有什么意义了。解决的方法很简单，直接使用jQuery的标准调用方式。




<!-- jquery.js在prototype.js之前被引入. -->
<script src="/UploadFiles/2021-04-02/jquery.js">

下面给大家介绍jQuery noConflict() 方法
noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。
实例
当然，您仍然可以通过全名替代简写的方式来使用 jQuery：


$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行！");
});
});


实例


您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：


var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍在运行！");
});
});


实例
如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：


$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍在运行！");
});
});


        
        

            
上一篇：在JavaScript中使用JSON数据
            
下一篇：轻松搞定jQuery.noConflict()
        
        
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。