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>