My Favorite jQuery Plugin Template

http://kolodny.github.io/blog/blog/2013/12/27/my-favorite-jquery-plugin-template/

by kolodny • 13 years ago

56 17 13 years ago

kolodny.github.io

phlyingpenguin• 13 years ago

Why not: options = $.extend(true, {}, defaults, options);

kolodny4• 13 years ago

Because I didn't think of it :)

Actually that's better because if one of the options is an object I wouldn't have to worry about accidentally changing a propery because this does a deep copy.

I've updated the post, thanks.

cturhan• 13 years ago

What is the problem with `$this = $(this)` ? You used `that` but I didn't get that.

kolodny4• 13 years ago

Once I set up an alias for `this` I try to only use that from then on to be consistent. The reason I do that in the first place is in case I need to pass it to a callback, I can just use the alias and don't have to worry about when `this` will be the global object

jasonlotito• 13 years ago

If you minimize your javascript, `that` can be minimized, `this` cannot.

5vforest• 13 years ago

Neat. I also like this one (Coffeescript): https://gist.github.com/rjz/3610858

rdebeasi• 13 years ago

Cool stuff! This reminds me a lot of jQuery Boilerplate: https://github.com/jquery-boilerplate/jquery-boilerplate/blo...

Personally, I find the "that" variable to be a little confusing. A developer looking at the code might wonder whether "that" is the plugin, a DOM element, or something else. To make the code a little clearer, you could use something like "elem" to represent the element on which the plugin has been called, and "plugin" to represent the plugin itself.

Happy coding!

kolodny4• 13 years ago

That's a good point. I've updated the post to use `elem` and `$elem`

Thanks

maemilius• 13 years ago

I'm not a huge fan of the double wrap of anonymous functions. The inner one seems entirely superfluous unless you're adding multiple plugins in one file and, I think, makes the code a little harder to read since you have to look at the invocation of the function to get all the information you need about it.

It seems a lot clearer to simply declare `var pluginName = "borderize";` at the top of the function than to pass it in. Granted, that does add 6 characters to the total length of the file.

kolodny4• 13 years ago

Well I plan on using this for multiple plugins in that same iffe. I also like that I'm able to copy/paste it as a block inside other jQuery blocks.

jbeja• 13 years ago

"I plan on using this for multiple plugins in that same iffe"

Isn't a little bit inconvinient, talking about modularity, will you be the only one using those plugins?

xiata2• 13 years ago

Double wrapping is necessary for closure compiler to collapse variable names.

xiata2• 13 years ago

Save a few bytes.

  ;!function($){
    ...
    return this.each(function($elem, elem){
      $elem = $(elem);
      ...
    });
   ...
  }(jQuery);

prezjordan• 13 years ago

Ho boy not this again...

https://github.com/twbs/bootstrap/issues/3057

nilliams• 13 years ago

These days I'd prefer a plugin template that doesn't infect the jQuery namespace by default (and is AMD compatible) so I can use it with a module loader:

  var borderize = require('jquery.borderize');
  ...
  borderize('div');

And my linter will tell me off if I forget a require.

Edit: I guess such a thing is not really a 'jQuery plugin' but a 'module that depends on jQuery'.

amadeus• 13 years ago

How does anyone consider this sane javascript? Is this what the community has been reduced too?

voidr• 13 years ago

I find the pluginName parameter excessive.

My Favorite jQuery Plugin Template

Related Stories