I’m having a little trouble wrapping my head around the $ sign being an alias for the jQuery function, particularly in a plugin. Can you explain how jQuery achieves this aliasing: how does it define '$' to be an alias for the jQuery function? That's the first question.
Secondly, can you explain how/why the following code works to map '$' to the jQuery function in a plugin's definition and why if you don't do this, your plugin could collide with other libraries that might use the dollar sign?
(function( $ ){
$.fn.myPlugin = function() {
// Do your awesome plugin stuff here
};
})(jQuery);
It simply declares a variable. See here
jQuery itself is a large self executing function. This means that it declares a function and then runs it. Inside the function it declares the local jQuery object which is a function.
It will then right at the end of it set window.jQuery = window.$ = jQuery
This is setting both window.jQuery and window.$ to the local jQuery object. We can set global variables by making them properties of the window object.
Now both window.jQuery and window.$ both point at jQuery since objects are passed by reference.
var jQuery = (function() {
var jQuery = function( selector, context ) {
...
};
...
return (window.jQuery = window.$ = jQuery);
}());
it actaully declares jQuery twice for a small efficiency gain since the when looking for the variable it doesn't have to look upwards into an extra outer function.
You can use two assignments like that because (var a = b) === b
As others have mentioned the fact that $ is a legimate variable name and that functions are first class objects, thus we can treat them as objects also helps to make this possible.
A function, like any object in javascript, can be assigned to a variable. This variable can have any name (that follows the JS variable naming rules). "$" satisfies the naming rules, so the jQuery function is aliased to "$" for brevity. Consider the following example:
var myFn = function() { alert('myFunc'); };
var $ = myFn;
$();
// alerts 'myFunc'
Exact code (from jquery-1.4.1-vsdoc.js):
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;