Why does jQuery use 'deep' while checking conflicts with the global object?

user_13932449 0
Viewed 35

I was observing the source code of the jQuery library, and I noticed one thing. At the end of the whole library, a method checks if there is any other function called jQuery or $ on the global object.

Anyway, here is that method:

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;
};

I couldn't understand what deep actually does here. How having a deep copy situation can change the result of that function?

jquery javascript
1 Answers

According to jQuery's documentation, the function jQuery.noConflict() restores the global variable window.$ to its previous value, from before jQuery was initialized:

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.

When initialized, jQuery overwrites the global variable $. If you are using another library that writes to window.$, jQuery might overwrite window.$, causing the other library to break.

In such cases, you can call jQuery.noConflict() to have jQuery restore window.$ to its previous value. Since jQuery is also available through window.jQuery, you can still use jQuery after calling noConfilct() (for example by writing window.jQuery("#id")).

But what if you are running two versions of jQuery on the same page? In this case, the second version will overwrite both window.$ and window.jQuery, which means you won't have access to the first version of jQuery after the second version initializes.

This is where the deep parameter comes into play. This parameter isn't related to "deep copy", it's more like a "deep clean". calling jQuery.noConflict(true) restores both window.$ and window.jQuery. If you call this function from the second version you loaded, it will restore the first version into the global scope.

Now let's take another look at the code you mentioned:

var
    _jQuery = window.jQuery, // Store the previous value of `window.jQuery`
    _$ = window.$; // Store the previous value of `window.$`

jQuery.noConflict = function( deep ) {
    if ( window.$ === jQuery ) {
        window.$ = _$; // Restore `window.$` to the value we previously stored in the variable
    }

    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery; // If called with the parameter `deep`, also restore `window.jQuery`
    }

    return jQuery; // Return a reference to this version of jQuery
};
user_106874710
Related