extending jquery with a generic function

Question

I am writing the a generic function for my website using jquery which would be used over the entire site for displaying a success/error message. I decided to make it a plugin.

A simple form of the plugin is given below:

; (function ($) {
        jQuery.FlashMessage=function(msg){
            alert(msg);
        }

})(jQuery);

I wanted to know whether it is a good practice to define plugins in the jquery namespace or should it defined under $.fn.XXXX ..or am i overthinking and it doesn't matter it at all.

However you do it, the point of `function($)` is that `$` is an internally scoped reference to the `jQuery` parameter passed to the anonymous closure at the bottom. Hence you should use `$` inside the closure and not `jQuery`. — Alnitak, Mar 10 '11 at 18:30
It seems that you don't understand the difference between `$.foo` and `$.fn.foo`. — Šime Vidas, Mar 10 '11 at 18:44

score 4 · Accepted Answer · answered Mar 10 '11 at 18:31

4

You add those functions to jQuery.fn which should be run on selected elements, e.g. $('div').yourFunction().

If you want a "generic" function, like $.ajax(), then you should add it to the jQuery object, like you already do. But I would use $ inside the function:

(function ($) {
        $.FlashMessage=function(msg){
            alert(msg);
        }

})(jQuery);

So it depends on what kind of functionality you want.

answered Mar 10 '11 at 18:31

Felix Kling

795,719
175
1,089
1,143

1

But doesn't this pattern use the jQuery object merely as a namespace? In that case, I'd rather define my own namespace object to avoid collisions with jQuery's built-in functions. – Šime Vidas Mar 10 '11 at 18:43

Praveen Prasad · Answer 2 · 2011-03-10T18:35:24.727

2

jQuery.fn is equivalent to jQuery.prototype

with jQuery.fn.FlashMessage you can do

 jQuery.fn.FlashMessage=function(){
    return this.each(function(){
        //do some thing
    });
  });


//use like this, your chaining is secured    
jQuery('#someElement').FlashMessage().DoSomeThingElse().SomethingMore();

if you are concerned is modifying only one element than why to use jQuery.FlashMessage, do it like myNameSpace.FlashMessage

edited Mar 10 '11 at 18:35

answered Mar 10 '11 at 18:28

Praveen Prasad

31,561
18
73
106

No, `jQuery.fn` is not equivalent to `jQuery.prototype`. But `jQuery.fn` is the prototype for the object returned by `jQuery(selector)`. – gilly3 Mar 10 '11 at 18:46
http://stackoverflow.com/questions/1755080/why-jquery-do-this-jquery-fn-init-prototype-jquery-fn – Praveen Prasad Mar 10 '11 at 18:50
2

@gilly Yes, it is. Try `jQuery.fn === jQuery.prototype`. It evaluates to true. `fn` is used as a shorthand name for `prototype`. – Šime Vidas Mar 10 '11 at 18:52

score 0 · Answer 3 · answered Mar 10 '11 at 18:30

Typically plugins on the fn namspace return a jQuery object to maintain chainability. Also they are applied to jQuery.prototype so all jQuery objects can call it.

Check out this page for a very good overview on plugin authoring: http://docs.jquery.com/Plugins/Authoring

extending jquery with a generic function

3 Answers3