Understanding jQuery plugin development pattern

Question

According to the jQuery plugin authoring guidelines, a basic plugin structure would look like this:

(function($){

  $.fn.myPlugin = function( options ) {  

    return this.each(function() {

      // Do something...

    });
  };
})( jQuery );

Yet I've seen the following pattern in several jQuery plugins I've inspected:

(function($){
        $.extend($.fn, {
            myPlugin: function( options ) {

                $(this).each( function() {
                    // Do something
                });
        },
    })
})(jQuery);

Can someone explain the second approach- What is $.extend(... and the object-notation all about?

Thanks-

Michael Mior · Accepted Answer · 2011-07-04 22:29:06Z

4

These two are basically accomplishing the same task, but in a slightly different manner.

$.fn.myPlugin = … is directly assigning the function to the place you want it in the jQuery namespace.

$.extend($.fn, {myPlugin:… is extending the $.fn object with the object specified as the second parameter. In this case, the object simply contains a single property, myPlugin, which is the function to add.

You can use either structure, although I personally find the first a bit cleaner.

answered Jul 4, 2011 at 22:29

Michael Mior

28.9k10 gold badges95 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mu is too short · Accepted Answer · 2011-07-04 22:29:39Z

2

The $.extend function is used to:

Merge the contents of two or more objects together into the first object.

So this:

$.extend($.fn, { ... });

Is just merging the contents of the object literal into $.fn. Using $.extend like this just really just another way of doing the normal/standard assignment:

$.fn.myPlugin = ...

answered Jul 4, 2011 at 22:29

mu is too short

436k71 gold badges863 silver badges822 bronze badges

2 Comments

Yarin Over a year ago

Thanks alot for the explanation- Michael beat you by a hair

mu is too short Over a year ago

@Yarin: That's cool, I mostly wanted to get the link to the official $.extend docs through. And yes, the direct assignment is a lot cleaner (IMHO, YMMV, etc).

Collectives™ on Stack Overflow

Understanding jQuery plugin development pattern

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related