A simple question about closing jquery

Question

what does it mean?

(function($){ })(jQuery); 

to make the question clearer what the transfer of the function in parentheses to JS means (sorry, I'm a little confused about the concept of closure). What about the $ parameter? and "jQuery" in the end bracket?

Can I do the same with mootools and merge them into 1 JS file?

 (function($){})(jQuery); (function($){})(mooTools); 

I only worked with jquery and plan to work with Mootools

Answer 1

Wrapping a function between brackets ensures that the function will be evaluated as an expression of the function.

This is because Grouping Operator (parentheses) can only evaluate expressions.

If the bracket is not used, it will be interpreted as a function declaration, and this will cause a syntax error, since the function name is not optional for function declarations.

 (function(arg){ alert(arg); // alerts test })("test"); 

In the above example, a function expression is automatically executed by passing an argument.

This template is heavily used by jQuery plugins because jQuery can operate in noConflict mode, the global variable $ will not be created, therefore the global jQuery object is passed as an argument to this anonymous function and inside this function, you can freely refer to it as $ (received argument).

Keep in mind that the function context ( this ) inside self-executing function expressions called as in the above example will always refer to the Global object.

For more information on the differences between function expressions and function declarations, see the following resources:

• Explain syntax syntax for anonymous JavaScripts functions
• Named Functional Expressions Demystified

Answer 2

CMS gave you the correct answer, but I just want to add that this is not a close. It is just a statement () that is used to return the result of an expression, which in this case is a function expression, and the fact that in javascript, the returned anonymous function can be called directly. So this is just a union of both:

 var x = (1+1); // <-- () evaluates an expression 

and

 var arr = [0,1,2]; arr.push(function(text){alert(text)}); arr[3]('hello'); // <-- function returned by array called directly 

As for the $ parameter, there is only one of the characters that javascript allows variable names. Your examples are exactly equivalent:

 (function(jQ){})(jQuery); (function(moo){})(mooTools); 

Answer 3

The main point for this is that the objects created in the function expression can be used from the properties and methods associated with the transferred objects, without publicly disclosing these objects. This can help prevent collision variables. It also allows you to create variables created for access as a private repository for everything that is connected.

 (function($){ //jQuery is available here as $ 
 var myPrivateArray = []; //this is private 
 $.addItem = function(item) { myPrivateArray.push(item); } 
 })(jQuery); 

// I can't access myPrivateArray here ... // but I can use jQuery.addItem to add something.

Answer 4

Here is an article on closing: http://www.jibbering.com/faq/faq_notes/closures.html

Basically, as CMS said, this is an expression of a function. There is a great example to help you better understand about 2/3 of the way down this page.

jQuery in the last set of brackets means that you are passing a jQuery object to an internal function. This internal function takes an object and is assigned as $ . So, when you access $ inside the function, you are actually acting on the jQuery object you passed in.

As for mixing with jQuery and Mootools, I never used Mootools, so I'm not sure how it assigns itself. The only thing I think is that if it uses $ as jQuery, you can call jQuery.noConflict(); and reassign jQuery to another variable, possibly var $j = jQuery; Then you can use Mootools as usual.

Answer 5

function($) { ... } creates a function that takes a parameter named $ .

Including parentheses does nothing.

Adding (jQuery) calls a function with jQuery as a parameter.

---

This is done so that the function does not depend on $ in the global area.
When you write $ in a function, you are referring to the $ parameter, not the global variable $ .

Answer 6

mootools equivalent for $ namespace:

 (function($) { // $ is the mootools one (aliasing document.id) })(document.id); 

you can combine them into one file, but keep in mind that mootools is a prototype structure, and $ is only for the selector, while all functions are included in the prototypes element / array / class etc. so doing this in mootools works:

 var foo = $("bar"); foo.hide(); // the element inherits .hide() 

but in jquery it will fail and should be transcribed as

 var foo = $("#bar"); $(foo).hide(); 

the point is that you cannot miss the space that mootools exports to prototypes.