天天看点

jQuery.noConflict() 解决冲突 原理深入

<code>jquery.noconflict()</code>函数用于让出jquery库对变量$(和变量jquery)的控制权。

一般情况下,在jquery库中,变量<code>$</code>是变量<code>jquery</code>的别名,它们之间是等价的,例如<code>jquery("p")</code>和<code>$("p")</code>是等价的。由于变量<code>$</code>只有一个字符,并且特点鲜明,因此我们更加习惯使用<code>$</code>来操作jquery库。

不过,其他js库也可能使用变量<code>$</code>来进行操作,例如prototype库。这个时候两个库可能会由于变量<code>$</code>的控制权问题而发生冲突。

此时,你可以使用该函数让出jquery库对变量<code>$</code>的控制权,将该变量交给上一个实现它的js库,之后我们只能使用变量<code>jquery</code>来操作jquery库。

此外,使用该函数,还可以同时让出变量<code>$</code>和变量<code>jquery</code>的控制权,从而实现多个不同版本的jquery库共存(详情见下面的示例说明)。

该函数属于全局<code>jquery</code>对象。

参数

描述

removeall

可选/boolean类型是否彻底移交对变量jquery的控制权,默认为<code>false</code>。

如果省略了参数<code>removeall</code>或该参数不为<code>true</code>,则表示只让出对变量<code>$</code>的控制权;如果该参数为<code>true</code>,则表示同时让出变量<code>$</code>和<code>jquery</code>的控制权。

以下是加载prototype和jquery库的情况:

此外,我们还可以使用其他自定义的变量名来操作jquery:

即使是多个库共存,我们也可以在<code>jquery.ready()</code>的回调函数或其他自定义函数中将局部变量<code>$</code>作为jquery的别名使用:

如果要实现两个版本的jquery库共存,我们可以编写如下代码:

三个版本的jquery库共存,对应的jquery示例代码如下:

注意:多个可能存在全局变量重名冲突的js库,变量的实际控制权一般取决于js库的加载顺序。以上面三个版本的jquery库的示例代码为例,后加载的jquery库的变量覆盖了之前版本的变量,因此每次让出变量的控制权,控制权就会交给上一个js库。

继续阅读