欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery中noconflict函数的实现原理分解

程序员文章站 2022-10-25 14:47:27
jquery中,noconflict是用来防止变量冲突,用来释放变量控制权的一个重要方法。我们知道,jquery中对外提供有两个全局变量,$和jquery,虽然jquery只产生了...

jquery中,noconflict是用来防止变量冲突,用来释放变量控制权的一个重要方法。我们知道,jquery中对外提供有两个全局变量,$和jquery,虽然jquery只产生了两个全局变量,极少情况下才会出现冲突,但是如果网页中如果包涵较多的类库,有自定义$或jquery全局变量的存在时,就产生冲突。

jquery提供的noconflict函数很好的解决了变量冲突问题,无论是$或者jquery冲突都可以解决,接下来我们就来分析一下jquery的冲突处理。

先来看一下jquery中noconflict的实现:

(function(window,undefined){
var 
// map over jquery in case of overwrite
_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;
}
})
}(window)


在这里jquery.extend是jquery扩展静态属性的方法,这里可以看成直接在jquery上附加noconflict方法。在匿名函数的内部,分别定义内部变量_jquery和_$用来存储window.jquery和window.$, 这么做的用作在于用内部变量保存jquery运行之前这两个全局变量的状态, 以便在后面的防冲突操作中还原这两个变量。noconflict可处理$和jquery这两个变量冲突的情况,默认处理$,传入一个true参数,则处理jquery冲突的情况。
window.$ === jquery用来判断全局变量是否等于jquery,如果等于,则重新还原全局变量$为jquery运行之前的变量(存储在内部变量 _$ 中);deep && window.jquery === jquery 当开启深度冲突处理并且全局变量jquery等于内部jquery,则把全局jquery还原成之前的状况。判断window.$ === jquery和window.jquery=jquery的意义在于保护已经定义的变量不被重写,如下面的代码:

//引入jquery库
var $="string";
var jq=jquery.noconflict();
var jquery="this is a line";
var j=jq.noconflict(true);
console.log($);//这里如果没有window.$===jquery这句判断,那么$将会等于undefined而不是"string"。
console.log(jquery); //同上,如果没有判断window.jquery===jquery,重新定义的jquery就会被undefined覆盖。

整个运行流程参加下图:

jQuery中noconflict函数的实现原理分解

noconflict返回的是jquery库内部的jquery构造函数, 像使用$一样尽情使用它吧!