当前位置:首页 >> 网络编程

轻松搞定jQuery.noConflict()

jQuery是目前使用最广泛的前端框架之一,有大量的第三方库和插件基于它开发。为了避免全局命名空间污染,jQuery提供了jQuery.noConflict()方法解决变量冲突。这个方法,毫无疑问,非常有效。遗憾的是,jQuery的官方文档对该方法的描述不够清晰,许多开发者并不清楚当他们调用jQuery.noConflict()时,究竟发生了什么,从而导致在使用时出现了许多问题。尽管如此,jQuery.noConflict()背后实现原理依然值得Web开发者学习掌握,成为解决类似全局命名空间污染问题的利器。

jQuery.noConflict()的作用?
"htmlcode">

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

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

window.jQuery = window.$ = jQuery;

"htmlcode">

// 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()的神奇效果?
"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">

避免第三方库的冲突
"color: #800000">1、直接使用No-Conflict模式
"htmlcode">

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

2、使用自执行函数封装
"htmlcode">

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

3、使用标准jQuery(document).ready()函数
"htmlcode">

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

以上就是为大家介绍的jQuery.noConflict()使用方法,希望大家分分钟可以玩转jQuery.noConflict()。