jQuery源码阅读[1]noConflict

noConflict主要用于避免jQuery和$与其他库冲突。

1. 先来看一下他的用法

主要有两种情况,一种是先引入了jQuery库,另一种是后引入jQuery库,无论哪种情况,只要调用了$.noConflict()方法,均可以很好的处理全局变量名冲突的情况,其原理是将jQuery对象赋值给别的变量,从而让出$和jQuery这两个变量名。

1.先引入jQuery,即$和jQuery有可能在后面被修改,这时你可以发挥绅士风度,有预见性的主动将这两个变量名让出,如下所示:

var iQuery = $.noConflict();
console.log(iQuery("div").html()); //正确输出
$ = 123; //不会影响jQuery的使用,因为现在我们用的是 “iQuery”

2.在jQuery被引入之前已经有别的库占用了$或jQuery,这种情况下jQuery的引入便覆盖了了这两个变量,为了让先前的库仍可以使用$或jQuery变量,你命令jQuery让出这两个变量,即调用$.noConflict()方法。此时jQuery做了两件事,一是将jQuery对象赋值给新的变量,二是将$或jQuery变量重新赋值为之前被覆盖的库。该情况如下:

<script src="lib1.js"></script>
<script src="./jquery2.0.3.js"></script>
<script>
	var iQuery = $.noConflict();
</script>

2. 我们来看一下jQuery中的实现,代码非常简单

// Map over jQuery in case of overwrite
_jQuery = window.jQuery,

// Map over the $ in case of overwrite
_$ = window.$,

这段代码是在jQuery刚开始的地方,主要应对第二种情况,即$或jQuery已经被占用的情况,jQuery将他们缓存,如果用户决定使用noConflict()方法让出这两个变量,则将缓存的内容还原到全局变量中。

noConflict: function( deep ) {
	if ( window.$ === jQuery ) {
		window.$ = _$;
	}

	if ( deep && window.jQuery === jQuery ) {
		window.jQuery = _jQuery;
	}

	return jQuery;
},

可以看到如果调用noConflict方法是使用true参数,则将jQuery变量也让出,否则只让出$。不管怎样最会会将jQuery对象返回。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值