2

Assuming there are no other similar frameworks, and ignoring the potential pitfalls of jQuery dependency and potential performance overhead.

I would like to know when a cohesive group of JavaScript functions should be coded as a jQuery plugin. Of course there's much subjectivity and context involved - perhaps a catalogue of the most important situations for going down the jQuery path should be described.

My main areas of enquiry are:

  • The benefits of jQuery plugin structure compared to a simple JavaScript object
  • Are plugins most beneficial for "chaining" and operating on the DOM level. That is, should a jQuery plugin be focused on DOM manipulations?
  • Perhaps all JavaScript coding scenarios are benefited from structured code? Correct encapsulation of 'this'

I have desire for JavaScript code which is: - Standard - easy to read/modify - More predicable - Minimal in bugs (let's ignore IDEs and CoffeeScript and other technologies, but do consider the benefits of reduced human error)

Hopefully this question is clear and narrow enough of a description to get some useful answers for all JavaScript coders on this very specific design question.

Sen Jacob
  • 3,384
  • 3
  • 35
  • 61
Kind Contributor
  • 17,547
  • 6
  • 53
  • 70
  • http://stackoverflow.com/questions/6974582/jquery-object-and-dom-element/6974603#6974603 – Sen Jacob Apr 12 '13 at 09:19
  • Thanks Sen, yes jQuery is typically about the starting selector, selecting one or more DOM elements. Does this mean jQuery plugins should only be authored for DOM manipulation though? For example the Microsoft SignalR library is accessed by $.connection - no selector. Have they for instance found that the jQuery plugin format is good practice given that they expect their stack to include jQuery? – Kind Contributor Apr 13 '13 at 05:34
  • 1
    This is *wildly* subjective. The answer is: Whenever you feel like it. Is it a piece of code that you think you can use in other projects, or that other people might want, and does it use jQuery? Then maybe you want a plugin. – user229044 Aug 19 '14 at 02:59
  • @meagar, I'm sure there are explicit situations where it is a very good or a very bad idea. My assumption (see earlier comment) about dependency on jQuery is probably one important aspect to consider. Do the jQuery developers provide any guidance? – Kind Contributor Aug 19 '14 at 03:12
  • 1
    @Todd Of course there are times when it's a bad idea, and times when it's a good idea. But ultimately it's subjective. – user229044 Aug 19 '14 at 03:13
  • 1
    @bill-the-lizard Dave's answer below looks great so far, I don't think that opinion-based in my opinion. I was hoping this question might be featured on ars technica, which often tackle such questions. Just check out how many views it got, plenty of programmers are looking for the answer, but there was none given, so I added a bounty, and now all of a sudden moderators think it's "opinion-based"? – Kind Contributor Aug 19 '14 at 23:29
  • 2
    This is a very subjective question. Just because it escaped notice before, doesn't mean it should stay open now. It doesn't matter how many views it gets or where you hope it gets featured, it's off-topic here. – Bill the Lizard Aug 19 '14 at 23:52

1 Answers1

2

What is a JQuery plug-in:

A JQuery plug-in is the JavaScript equivalent of an extension method. Let's look at plug-in syntax:

$.fn.stretch = function(multiple) {
    this.each(function() {
        var $t = $(this);
        $t.height($t.height * multiple);
        $t.width($t.width * multiple);

    });
    return this;
};

I have created a plug-in that multiplies the height and width of an element selected by the multiple passed. (beware, this was slapped this together for demo purposes).

$('#smallDiv').stretch(2);

The method operates on $(this), the object it is attached to, and returns an object, allowing for further

Here is a good guide to a range of JQuery Plugin Design Patterns -- some meant to optimize performance, others interoperability / chaining, mutability, etc.

The benefits of a JQuery plug-in:

1) Chaining

$('#smallDiv').css("background-color", "beige").stretch(2);

2) Re-Usability

I admit this is a forced example, but still...

$('#smallDiv').stretch(2).stretch(1.5);

3) Modularity of scope

The code within our plug-in no variable scope to worry about. It is completely self-contained using only local variables.

4) Readbility

I assume here that your plug-in is appropriately named

To DOM or not to DOM:

Plug-ins can be useful in many ways

I suspect 90% of plug-ins are used for DOM manipulations. And chaining is a great advantage.

But JQuery already has many array extension methods:

$.distinct([1, 2, 2, 3])
$.union([1, 2, 2, 3], [2, 3, 4, 5, 5])
$.intersect([1, 2, 2, 3], [2, 3, 4, 5, 5])
$.except([1, 2, 2, 3], [2, 3, 4, 5, 5])

(all anove borrowed from Kristian Abrahamsen GitHub Repo)

And Plugins for Strings, Cookies, etc exist and can/should be considered

The disadvantages of a JQuery plug-in:

Global isn't always noble: Your nifty new stretch() Plugin can be used on anything. Is that good or bad? You decide. Who should use it? Who shouldn't? What elements should it be used on?

If you don't want repeated use, don't create a plug-in. I'm sure Plenty of Developers on your team are too creative as it is.

Planning is a must! Refer to this Brolick Blog Guide to Developing Plugins

Between the Brolick guide and the patterns reference, you'll notice there are many mistakes and issues you can cause from sloppy plugin development. The most common of these are poor performance and memory leaks. Both are underestimated is potential severity and are rampant and frequent in Plugin development.

Dave Alperovich
  • 32,320
  • 8
  • 79
  • 101