7

What does the following syntax mean?

(function($){
    $.fn.columnize = function(options) {
    ...

What’s function($)?

What’s $.fn. …?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
aneuryzm
  • 63,052
  • 100
  • 273
  • 488

6 Answers6

17

This convention is used when writing plugins to ensure there is no confilict with other Javascript libraries using the $ notation, whilst ensuring the plugin author can still use this notataion:

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

The author is declaring an anonymous function with a single parameter ($), then immediately calling it and passing the jQuery object to it. This ensures the function is called and that everything in it is defined.

A longer notation might be:

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

Although that would create a variable MyDefs in the global namespace. The anonymous function pattern leaves the global namespace empty, avoiding conflicts.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
James Wiseman
  • 29,946
  • 17
  • 95
  • 158
  • thanks, now I get it. I would like to call a method of my plugin from outside code. How can I make it public ? Is there a way to declare the interface ? – aneuryzm Feb 22 '10 at 08:38
  • ok, I found the answer here: http://stackoverflow.com/questions/1204822/jquery-plugin-public-method-function – aneuryzm Feb 22 '10 at 08:55
  • Excellent explanation James. However, what happens if several plugins do '$.fn.columnize...' - wouldn't that cause a conflict? This is something that I've been meaning to look into for a while now but, as I haven't written a plugin yet, it hasn't become urgent enough to do so. – belugabob Feb 22 '10 at 08:57
  • @belugabob; It would, yeah, as you're reassigning a var. – Douwe Maan Feb 22 '10 at 15:56
  • That's what I thought, so it's just a case of thinking up a name that is unlikely to already exist - a rough kind of namespace mechanism. It's a shame that there isn't a foolproof way of dealing with this, as it's only a matter of time before two really useful plugins conflict with each other. – belugabob Feb 23 '10 at 08:47
2

It declares the columnize function as a jQuery plugin allowing you to use it on elements like this $('.someSelector').columnize(). You could read more about plugin authoring here.

Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
1

It's probably a jQuery extension, which basically pass (jQuery) at the end like

(function($){
    //$ is jQuery here

    //added columnize function to existing jQuery object
    $.fn.columnize = function(options) {

    }

})(jQuery);
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
YOU
  • 120,166
  • 34
  • 186
  • 219
  • yeah it is a jQuery plugin. I found it is the same syntax of Proxy Patterns. By the way, I need to call a function inside the plugin. When I try to call it, I get an error (function is not defined), although it actually works in the browser. How can I make a function visible ? In the plugin interface ? thanks – aneuryzm Feb 22 '10 at 08:26
  • May I know how are you calling that function? may be post some codes? – YOU Feb 22 '10 at 08:31
0

I just found this... is it a Proxy Pattern ?

Proxy Pattern

Combining the above knowledge gives you as a JavaScript developer quite a lot of power. One way to combine that is to implement a proxy pattern in JavaScript, enabling the basics of aspect-oriented programming (AOP):

(function() {
  // log all calls to setArray
  var proxied = jQuery.fn.setArray;
  jQuery.fn.setArray = function() {
    console.log(this, arguments);
    return proxied.apply(this, arguments);
  };
})();

The above wraps its code in a function to hide the "proxied"-variable. It saves jQuery's setArray-method in a closure and overwrites it. The proxy then logs all calls to the method and delegates the call to the original. Using apply(this, arguments) guarantees that the caller won't be able to notice the difference between the original and the proxied method.

aneuryzm
  • 63,052
  • 100
  • 273
  • 488
0

Don't get confused by the $. Actually, $is a valid variable name in JavaScript (as are all variables containing $, source (PDF)).

So, the first line could be rephrased as

(function (someVariable) {

which might look more common. For the rest, yes it is a proxy pattern, and James Wiseman's answer is explaining, what's going on.

Boldewyn
  • 81,211
  • 44
  • 156
  • 212
0

function($) {...} defines an anonymous function with a formal parameter named $. $.fn refers to the property named fn of the object referred to by the variable $.

outis
  • 75,655
  • 22
  • 151
  • 221