jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理

jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理

最近在看jquery源码分析的视频教学，希望将视频中学到的知识用博客记录下来，更希望对有同样对jquery源码有困惑的童鞋能有一点点的帮助（我是从一个小白的角度出发，感觉挺容易理解的，顺带说下视频中jquery源码选取的是2.0.3版本）。

我们都知道，使用$和jQuery效果是一样的，比如:

 <button id="btn">点我</button>
 $("#btn").click(function(e) {
     console.info(e.type);
 });
 jQuery("#btn").click(function(e) {
     console.info(e.type);
 });

为什么是这样子呢？因为jquery源码中是包在一个立即调用的函数表达式中（一个闭包），对外暴露的接口就是$和jQuery,将这两个属性绑定在window下：

 window.jQuery = window.$ = jQuery;

因为别的库也用$或者jQuery符号，比如prototype.js，所以同时引prototype和jquery就有可能造成命名冲突，jquery解决命名冲突问题的代码如下：

 (function(window, undefined) 

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

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

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

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

         return jQuery;
     };
 })(window);

noConflict是jquery通过extend扩展的工具方法（静态方法），与ajax方法一样，调用方法为$.noConflict()或者jQuery.noConflict()，不带参数是对$的处理，带参数true时是对jQuery的处理，这个函数返回值就是jQuery对象。jquery源码中用_jQuery和_$来保存全局中jQuery和$的值，因为jquery对外接口的时候将$和jQuery全部挂在window上，window.$和jQuery始终是相等的，都等于jquery源码中的jQuery对象，所以jquery会放弃对$的使用（我不用$了，你们用吧）,将_$中保存的值赋给window.$；如果加一个参数true的时候，jquery会放弃jQueryde的使用，将_jQuery中保存的值赋给window.jQuery（2种情况都会返回jQuery对象，我们还是可以用继续用$来用别的库的方法，并且用另外的变量来保存返回的jQuery对象来使用jquery的方法。

 <script>
     var  $  = {
         sayName: function() {
             console.info('我是prototype中的$');
         }
     };
 </script>
 <script src="jquery.2.0.3.js"></script>
 <script>
     var iAmRealJQ = $.noConflict();
     $.sayName(); // 我们还可以使用自定的$对象的方法
     console.info(iAmRealJQ);  // 我们还可以用jquery源码的jQuery对象来实例化一个新对象 -->
 </script>

 <script>
     var  jQuery  = {
         sayName: function() {
             console.info('我是某个库中的jQuery');
         }
     };
 </script>
 <script src="jquery.2.0.3.js"></script>
 <script>
     var iAmRealJQ = jQuery.noConflict(true);
     jQuery.sayName(); // 我们还可以使用自定的jQuery对象的方法
     console.info(iAmRealJQ);  // 我们还可以用jquery源码的jQuery对象来实例化一个新对象
 </script>