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

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

[javascript] view plain copy

print ?

1. <script>  
2.     var $&nbsp;=&nbsp;</span><span class="string">"$”;  
3. </script>  
4. <script src=”jquery-1.10.2.js”></script>  
5. <script>  
6.     alert($&nbsp;===&nbsp;<span class="string">"$”);//false  
7.     alert($().jquery);//1.10.2  
8. </script>  

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

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

[javascript] view plain copy

print ?

1. <script>  
2.     var $&nbsp;=&nbsp;</span><span class="string">"$”;  
3. </script>  
4. <script src=”jquery-1.10.2.js”></script>  
5. <script>  
6.     var stillJQuery = $.noConflict();&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;alert(stillJQuery().jquery);<span class="comment">//1.10.2</span><span>&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;alert($ === ”$”);//true  
7. </script>  

<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框架都是如下结构,实现原理如下：

[javascript] view plain copy

print ?

1. (function(window) {  
2.     // 保存之前数据  
3.     var _$E&nbsp;=&nbsp;window.$E;  
4.   
5.     var myplugin = {“name”:“aty”};  
6.     myplugin.noConflict = function(){  
7.         window.$E&nbsp;=&nbsp;_$E;  
8.         return myplugin;  
9.     };  
10.       
11.     // 向全局对象注册$E</span><span>&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;window.$E = myplugin;  
12. })(window);  

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

    var myplugin = {"name":"aty"};
    myplugin.noConflict = function(){
        window.$E = _$E;
        return myplugin;
    };

    // 向全局对象注册$E
    window.$E = myplugin;
})(window);

            **转载地址http://blog.csdn.net/aitangyong/article/details/44225859**