jQuery源码剖析之noConflict()

2019年8月31日 157次阅读 来源: Change

noConflict()

noConflict()将$或许jQuery的控制权让给第一个完成它的谁人库，确保jQuery不会与别的库的$对象发生争执。

jQuery中源码以下：


var _jQuery = window.jQuery,
    _$ = window.$;
jQuery.noConflict = function(deep){
    if(window.$ === jQuery){
        window.$ = _$;
    }
    if(deep && window.jQuery === jQuery){
    window.jQuery = _jQuery;
    }
};

剖析源码之前，我们应当注重几个点：

  • jQuery文件应当在别的争执库文件以后导入；noConflict()必需在你导入jQuery文件以后运用；

  • 致使争执的库中必需已存在一个$或许jQuery的定名空间，不然_jQuery = window.jQuery和_$ = window.$就没有意义了

下面最先剖析源码：

假如我们引入了两个库，prototype.js和jQuery.js。prototype.js在前,jQuery.js在后，而且prototype.js中存在一个$的定名空间

//这句代码实际上是在jQuery文件最最先的处所定义的，目标是保留prototype.js文件中的$或许jQuery定名空间
var _jQuery = window.jQuery,_$ = window.$;
jQuery.noConflict = function(deep){
//这里推断假如当前的window.$已被jQuery占用了，就把之前保留的prototype.js中的$的变量_$赋值给window.$举行掩盖
    if(window.$ === jQuery){
        window.$ = _$;
    }
    //这里推断假如deep为true而且当前的window.jQuery也已被jQuery占用了，就把之前保留的prototype.js中的jQuery的变量_jQuery赋值给window.jQuery举行掩盖
    if(deep && window.jQuery === jQuery){
    window.jQuery = _jQuery;
    }
};

剖析完上面的源码以后，这里有几个点要思索一下：

为何挪用noConflict()以后我们发明window.$已即是jQuery了？

在jQuery代码末了有一段代码能够诠释这个题目：

if ( typeof window === "object" && typeof window.document === "object" ) {
    window.jQuery = window.$ = jQuery;
}

假如prototype.js中没有争执的定名空间，那挪用noConflict()会怎样么？

假如之前没有争执的定名空间，那_&和_jQuery都是undefined，所以window.$和window.jQuery都会被undefined掩盖；也就是说，只需挪用了noConflict()，jQuery就会交出$或许jQuery的控制权，不管之前有无定名空间争执

参考资料：
http://www.imooc.com/learn/172

    原文作者：Change
    原文地址: https://segmentfault.com/a/1190000009028784
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞