views:

161

answers:

2

In jQuery, I have seen both the following ways of defining a jQuery function:

$.fn.CustomAlert = function() {
  alert('boo!');
};

$.CustomAlert = function() {
  alert('boo!');
};

I understand that they are attached to the jQuery object (or $), but what is the difference between the two? When should I use one or the other?

Thanks.

+8  A: 

I'm sure this question has been asked several times before, but I can't find the link.

$.fn points to the jQuery.prototype. Any methods or properties you add to it become available to all instance of the jQuery wrapped objects.

$.something adds a property or function to the jQuery object itself.

Use the first form $.fn.something when you're dealing with DOM elements on the page, and your plugin does something to the elements. When the plugin has nothing to do with the DOM elements, use the other form $.something.

For example, if you had a logger function, it doesn't make much sense to use it with DOM elements as in:

$("p > span").log();

For this case, you'd simply add the log method to the jQuery object iself:

jQuery.log = function(message) {
    // log somewhere
};

$.log("much better");

However, when dealing with elements, you would want to use the other form. For example, if you had a graphing plugin (plotGraph) that takes data from a <table> and generates a graph - you would use the $.fn.* form.

$.fn.plotGraph = function() {
    // read the table data and generate a graph
};

$("#someTable").plotGraph();

On a related note, suppose you had a plugin which could be used either with elements or standalone, and you want to access it as $.myPlugin or $("<selector>").myPlugin(), you can reuse the same function for both.

Say we want a custom alert where the date is prepended to each alert message. When used as a standalone function, we pass it the message as an argument, and when used with elements, it uses the text of the element as the message:

(function() {
    function myAlert(message) {
        alert(new Date().toUTCString() + " - " + message);
    }

    $.myAlert = myAlert;

    $.fn.myAlert = function() {
        return this.each(function() {
            myAlert($(this).text());
        });
    };
})();

It's wrapped in a self-executing function so myAlert doesn't spill out to the global scope. This is an example or reusing functionality between both the plugin forms.

As theIV mentioned, it is a good practice to return the jQuery wrapped element itself since you wouldn't want to break chaining.

Finally, I found similar questions :-)

Anurag
I had a look before asking the question and couldn't find anything either.
Russell
Practically, when would you use one or the other?
Russell
That makes sense, thanks very much. :)
Russell
Also, from my understanding, it's best practice to use the `$.fn.` form if your method is chainable, because you are starting with DOM elements and want to return DOM elements from your method. Though, that's really an aside from Anurag's answer.
theIV
Thanks @theIV, chaining can make Javascript DOM work a lot cleaner. :)
Russell
+1  A: 

A

$.a = function() {
  return "hello world";
};

alert($.a());

B

$.fn.b = function() {
  return "hello " + $(this).length + " elements";
}

alert($("p").b());
svinto