CODEWITHSUNDEEP
jqueryjavascriptjavascript-framework
Brolag
Brolag

Reputation: 33

Can jQuery's $ interfere with other libraries?

I read that if you do this, you can avoid conflicts with other libraries that use $ symbol.

(function($) {
  // jQuery code  
})(jQuery)

Could someone explain it to me, please?

Upvotes: 2

Views: 587

Answers (5)

millimoose
millimoose

Reputation: 39960

You also have to use jQuery.noconflict.

Normally, when you use jQuery, it defines a global function named $. jQuery also remembers the previous value of $ – like a global $ function defined by another library.

When you call noconflict, jQuery restores the previous (remembered) value of $. But now you cannot use $ to use jQuery – you can only use the function name jQuery, but that's more verbose. That's where the code you mention in your question comes in.

That code lets you use $ to call jQuery in the scope of the anonymous function you're defining, without having it replace the value of the global $. Functions create a separate scope or namespace for their local variables and parameters. The code you posted is equivalent to:

function init() {
    var $ = window.jQuery;
    // do stuff with $
}
init();

A common shortcut to register an initialisation function as a callback to be called when the DOM is ready is passing it as the parameter to $:

$(function() {
    // code
});

To avoid having to nest two anonymous functions when you need to prevent library conflicts, the jQuery function will pass itself as a parameter to this callback, so you can do this:

jQuery(function($) {
    // $ is jQuery here
});

Upvotes: 1

Dave Newton
Dave Newton

Reputation: 160201

Yes, using $ can interfere with other libraries (Prototype, for example).

Your code snippet defines an immediate function then calls it, passing jQuery as the parameter. (jQuery is jQuery's top-level object, as is $ when there's no conflict.)

jQuery is bound to the function's $ parameter. JavaScript functions create their own scope, so function parameters (and locals, declared with var) will "override" any global variables with the same name.

The only value of $ the function will "see" is the parameter, bound to jQuery, ensuring no conflicts for the duration of the function.

Upvotes: 0

Josh
Josh

Reputation: 12566

$ Represents the jQuery object. Other libraries also use the $ to represent their object. So if you load a jQuery plugin, it can try to change the wrong $ object.

You can use jQuery.noConflict() to circumvent this: http://api.jquery.com/jQuery.noConflict/

Upvotes: 0

Daniel A. White
Daniel A. White

Reputation: 190941

Other libraries may use $ for other purposes.

You still should call

jQuery.noConflict();

You can read more here: http://api.jquery.com/jQuery.noConflict/

Upvotes: 1

tskuzzy
tskuzzy

Reputation: 36476

You define an anonymous function with an argument named $. Then you call it immediately thereafter with the jQuery object (whose name is more than likely explicit enough to not collide with some other library object's name).

Thus within the scope of the anonymous function (where all your jQuery code will be), $ will refer to the jQuery object. And hence everyone is happy: your code gets to use the convenient shorthand $ and code later on can use $ for their own business.

Upvotes: 4

Related Questions