Module Pattern - why is JQuery passed in as a parameter?

Question

I think I understand the module pattern, but why do some examples pass JQuery in as a parameter like this:

Namespace.AppName = (function ($) {
     // Code Here
})(jQuery);

If I don't pass in JQuery I can still use the Jquery library just fine by making $() calls inside the module. So why do some people do this?

possible duplicate of [jQuery dollar sign ($) as function argument?](http://stackoverflow.com/questions/4983150/jquery-dollar-sign-as-function-argument) — Felix Kling, Apr 24 '12 at 11:03

score 16 · Accepted Answer · edited Apr 24 '12 at 11:30

The idea here is that you pass jQuery as $ to the inside function, making sure that the $ IS jQuery. This is commonly used to protect code that uses $ especially when using jQuery along with other libraries that use $ like mootools.

example, if you had this code in the <head>

<!--load jQuery-->
<script src="jquery.js"></script>

<script>
    //"$" is jQuery
    //"jQuery" is jQuery 
</script>

<!--load another library-->
<script src="anotherlibrary.js"></script>

<script>
    //"$" is the other library
    //"jQuery" is jQuery 

    //out here, jQuery code that uses "$" breaks

    (function($){
        //"$" is jQuery
        //"jQuery" is jQuery (from the outside scope)

        //in here, jquery code that uses "$" is safe

    }(jQuery));

</script>

"$" is the other library when the anotherlibrary.js defined $ as a global. I think — Paweł Brewczynski, Jul 12 '13 at 17:53

score 1 · Answer 2 · answered Apr 24 '12 at 11:02

1

In order to use the $ 'safely'. Most developers are more comfortable with the '$' instead of jQuery.

When using the $ as a global, it may conflict with other JS libraries.

answered Apr 24 '12 at 11:02

S P

4,615
2
18
31

score 1 · Answer 3 · answered Apr 24 '12 at 11:04

1

This is so you can use $ as s shortcut for jQuery. This can sometimes collide with other libraries if you don't encapsulate it like this.

answered Apr 24 '12 at 11:04

primavera133

1,284
1
15
24

score 0 · Answer 4 · answered Apr 24 '12 at 11:03

0

This if for making sure that your namespace/scope uses $ as jQuery and not other JS libraries like Prototype, which uses $, too.

answered Apr 24 '12 at 11:03

binarious

4,568
26
35

Module Pattern - why is JQuery passed in as a parameter?

4 Answers4