JQuery源码分析----解决全局的JQuery和$冲突问题

564 阅读1分钟

背景

最近在学习JQuery源码,看到源码中,暴露给去全局的JQuery和$ 如果和当前全局的JQuery和$冲突解决办法,很值得学习。特此记录一下!

解决冲突的方法(源码)

var _jQuery=window.jQuery,_$=window.$;
jQuery.onConflict=function onConflict(deep){
	if(window.$===jQuery){
	//把$的使用权归还给之前使用它的人
		window.$===_$
	}
	if(deep&&window.jQuery===jQuery){
	//传递deep=true,可以把Jquery名字的使用权转移出去
		window.jQuery=_jQuery
	}
	//返回自己的:在外面基于一个别名接收,以后别名代表当前自己的
	return jQuery;
}
window.jQuery=window.$=jQuery;

两种冲突问题

不同类库之间对$使用权的冲突

//Zepto.js
window.Zepto=window.$=Zepto;
//Jquery.js
window.jQuery=window.$=jQuery;
  • 当先引入Zepto.js后,$等于Zepto,然后引入Jquery.js,$变成了Jquery,这样相当于我们自己编写的程序变量和原始全局下的内容冲突了
解决办法
  1. 在导入完成JQ之前,先把现有全局下的Jquery和$代表的东西存储到私有变量_jQuery和_$
var _jQuery=window.jQuery;
_$=window.$//此时window.$是Zepto
  1. 提供转让使用权的方法 noConfilct,如果当前的window.$===jQuery,那么就把$的使用权归还给之前的Zepto(window.$===_$)
  2. noConfilct方法最后返回一个jQuery,如果发生冲突了,那就自己定义一个变量接收noConfilct方法的返回值,这样可以使用jQuery。let j=$.noConfilct()

一个产品导入不同版本的jQuery,$和jQuery都会冲突

  • 当我们引入不同的版本的jquery,会使用最后引用版本的jquery,但这样会导致之前老版本的jquery一些功能出问题。
解决办法
var _jQuery=window.jQuery //老版本的jq
//在noConfilct函数中
if(deep&&window.jQuery===jQuery){
		window.jQuery=_jQuery
	}
	return jQuery;
  • deep等于true,把jQuery的使用权归还给之前的老版本,新版本自己再定义一个变量使用。

总结

Jquery解决冲突的思路很简单,在当前类库没有导入完之前,就是把之前冲突变量代表什么保存到私有变量中,然后让现在全大局的$和Jquery都以最新的自己导入的为主。如果发生冲突,就调用onConflict方法,把$的使用权归还给之前使用它的人,然后在外面定义一个变量接收onConflict返回的jquery。