JQuery/Underscore等javascript框架中noConflict()的使用跟实现原理

JQuery/Underscore等javascript框架中noConflict()的使用和实现原理

一般的javascript框架，都是通过向全局对象window中注入自己的属性实现的。比如JQuery向window中添加"$"对象,Underscore向window对象中添加"_"对象。如果在框架加载之前，已经存在这些全局变量呢，会怎么样呢？

<script>
	var $ = "$";
</script>
<script src="jquery-1.10.2.js"></script>
<script>
	alert($ === "$");//false
	alert($().jquery);//1.10.2
</script>

很显然$被jquery框架占用了,我们之前定义的$变量值被覆盖。如果既想使用JQuery框架，又想使用之前定义的$变量。那么noConflict()函数就派上用场了。

<script>
	var $ = "$";
</script>
<script src="jquery-1.10.2.js"></script>
<script>
	var stillJQuery = $.noConflict();
	alert(stillJQuery().jquery);//1.10.2
	alert($ === "$");//true
</script>

一般的javascript框架都是如下结构,实现原理如下：

(function(window) {
	// 保存之前数据
	var _$E = window.$E;

	var myplugin = {"name":"aty"};
	myplugin.noConflict = function(){
		window.$E = _$E;
		return myplugin;
	};
	
	// 向全局对象注册$E
	window.$E = myplugin;
})(window);