2 ways of writing jquery, what's the difference?

I have got a function, inside which are some simple expressions, adding nums, appending doms, etc. Since I only have to call it once, so an anonymous function could do it. But which way should I choose and what's the difference?

1: Shorthand for $(document).ready() {}) I seen this a l开发者_运维知识库ot,

$(function(){
    var something;
    ++something;
});

2: Found in jquery plugins. Is it binded to $(document).ready() too?

(function ($) {
    var something;
    ++something;
})(jQuery);

The second one is not bound to the ready event.

In detail. This:

$(function(){  /* ... */ });

needs a variable $ defined. Usually this variable exists when jQuery is loaded and points to the jQuery function.

Subsequently, when you call the jQuery function with a function argument, jQuery is binding this function argument to the ready event. The above is equivalent to

jQuery(function(){  /* ... */ });

which is in turn a convenience shorthand for

jQuery(document).ready(function(){  /* ... */ });

Your second code snippet

(function ($) { /* ... */ })(jQuery);

does not rely on $ being defined or pointing to jQuery() (this can happen if multiple JS frameworks are loaded in parallel).

To still have the convenience of $ within a certain region of code, it creates a function within which $ is defined and points to jQuery(). However, it is not bound to a DOM event.

But this would be:

(function ($) { 
   $(function(){  /* ... */ });
})(jQuery);

This set-up is used to minimize the conflict between JS frameworks or other pieces of code that rely on $. jQuery plug-in authors use it to write plug-ins that work under many environments.

If you think the combined one is too complicated, jQuery also has a shorthand feature, which avoids variable conflicts and binds to document ready at the same time. But be careful, it only works on jQuery and has some downsides.

jQuery(function($) { /* some code that uses $ */ });

For more details, see these two articles:

1. Using jQuery with Other Libraries
2. .ready() @ api.jquery.com (Aliasing the jQuery Namespace)

First

It's just shorthand

Second

You are sandboxing the use of $ to reduce conflicts with other libraries that use the $ shorthand.

$ is just a shortcut for the jQuery variable and is being passed into the inner function of the immediately invoked function...

Example

var outerVar = "something";

(function innerFunc(passedVar) {

    passedVar === "something"; //true

})(outerVar);

innerFunc is executed and passed outerVar as its argument.

In your first example, the shorthand form is functionally identical to $(document).ready().

The second example is an immediately-invoked anonymous function (Thanks @Raynos for the correction: this is often called a self-invoking function; it is not one). The function is defined and executed in place, taking jQuery as its argument. One advantage of this approach is that variables declared within the function will not "pollute" the global (window) scope (as opposed, for example, to simply running that code outside the function). In your example, something is undefined outside the function.

Since jQuery is brought into the function as the argument $, $ is guaranteed to be jQuery within the body of that function -- even in cases where other libraries are using $ outside the function.

A useful side note: it's sometimes helpful to name "anonymous" functions. The, uh, functionality remains the same, but names can make it much easier to debug complex code.

(function superFunction (foo) { // naming this "superFunction"
    var something = 10;
    do_something_with( foo, something );
})(bar);

1. No it isn't, it is just a shorthand

2. No it isn't. This code makes sure that $ is really jQuery and not just another javascript library

From http://docs.jquery.com/Plugins/Authoring:

But wait! Where's my awesome dollar sign that I know and love? It's still there, however to make sure that your plugin doesn't collide with other libraries that might use the dollar sign, it's a best practice to pass jQuery to a self executing function (closure) that maps it to the dollar sign so it can't be overwritten by another library in the scope of its execution.

Just combine the two styles.

jQuery(function($) {
  // uses the real jQuery as $
  // code
});

The first style was used to run some code when the DOM is ready.

The second style is used to ensure $ === jQuery and also to make $ a local variable (reduces lookup time by a tiny fraction)