CODEWITHSUNDEEP
javascriptjquery
Mahdi
Mahdi

Reputation: 9417

"jQuery(...)" instead of "$(...)"

Is it a good practice to write jQuery("...") instead of $("...")?

I heard that it might be useful for avoiding future conflicts with other libraries if they use the $ as well, but is that a real-world concern? Let say I really have no idea what other libraries I'm gonna use in the future, so should I avoid writing $("...") in my scripts? Is there any other well known libraries relying on $ as well?

Also I'd love to know if there is any other issues attached to this subject.

Upvotes: 10

Views: 21881

Answers (6)

user2437417
user2437417

Reputation:

If you're using the .ready() function (or shortcut version) to wrap your code, then there's already functionality built in to give you safe access to the jQuery library. That is through defining a function parameter in the callback you provide. 

jQuery(document).ready(function($) { 
    /* in here, $ is safe */ 
}); 

jQuery(function($) { 
    /* in here, $ is safe */ 
});

Since jQuery passes itself as the first argument to the callback, you can just give it any name that you want, including $. Because it forms a local parameter, it will be unaffected by and will not affect an identical name in the global space.

This way there's no need for .noConflict() or manual IIFE approaches. Everything you need is already right there for you.

Upvotes: 5

Dory Zidon
Dory Zidon

Reputation: 10719

It's perfectly safe to use the $ for jQuery, it's the jQuery idiom, at least on your own pages which you control.

If you do choose to use jQuery in widgets you can structure it in a way that prevents it from conflicts.

In general jQuery binds to both $ and jQuery so using jQuery alone does not guarantee you safey..

If you are concerned with conflict jQuery does expose the $.noConflit(); http://api.jquery.com/jQuery.noConflict/

Which relinquishes the control of $ and you can store jQuery in a variable of your choice (or use jQuery).

Here are the libraries that use the $ sign based on the Wikipedia page and this stackoverflow answer:

Scanning this page, the only ones that come to mind are:

  1. jQuery - Provides jQuery.noConflict() to release the $
  2. Prototype
  3. MooTools

However jQuery is killing it with about 90% market share..

  1. http://www.theregister.co.uk/2012/08/14/jquery_used_by_half_of_all_websites/
  2. https://stackoverflow.com/questions/176324/why-does-everyone-like-jquery-more-than-prototype-script-aculo-us-or-mootools-or

Upvotes: 7

David Barker
David Barker

Reputation: 14620

The $ is just a shorthand namespace, due to jQuery being very well known many javascript frameworks tend to view $ as a reserved namespace and shy away from using it. That said it is very easy for anyone to namespace any code to window.$.

If you are conscious about what the $ namespace refers to exactly you can remove jQuerys bindings to that namespace and rebind it yourself outside of the global scope.

jQuery.noConflict();

(function($) {

    // your code that can use $ as jQuery namespace

})(jQuery);

Upvotes: 2

apparat
apparat

Reputation: 1952

Some other libraries use the dollar sign as well. Mootools for example can use it too. But there is always the possibility to use jQuerys noConflict mode, so you can quite safely use the dollar sign in your code.

Upvotes: 1

Vitalii Petrychuk
Vitalii Petrychuk

Reputation: 14225

You can wrap your code with sell-invoking function and use name you want

(function (JQUERY, otherLIB) {
  // ...
}(jQuery, $))

Upvotes: 5

Adil
Adil

Reputation: 148130

$ is now used frequently and might be use by other libraries event if you do not use it. You can use jQuery.noConflict.

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, Reference.

Upvotes: 2

Related Questions