jQuery Plugins, Easy as 1,2,3

By Don Kiely


Despite the usefulness and comprehensiveness of jQuery, it doesn't do everything it could to make your JavaScript coding life simpler. Frankly, you wouldn't want it to do everything! It doesn't even pretend to be comprehensive, if only because that would make the size of the core library enormous. The bigger the library is, the less likely that it will see wide use because it would have such a big impact on Web page performance and bandwidth, even if the browser effectively caches the library after its first use.

That's why jQuery includes rich support for extensibility. You can create your own plugins, utility methods, and other features that closely integrate with jQuery itself. If jQuery doesn't do something you need, or doesn't do it exactly as you need, always start by doing a search for jQuery extensions online to see if anyone else has already solved the problem. If not, you can write your own extension and use it in your Web pages, and share it with the world if you're so inclined. It is not very hard to write jQuery plugins.

Plugin Conventions

The jQuery community has created an enormous number of jQuery plugins, and over the last few years a few general guidelines for plugin development have emerged. You should always strive to follow these guidelines, because by doing so your plugins will integrate into jQuery effectively and will have the look and feel of jQuery, making your plugins easier to use.

  • Always name your plugin file using the format jquery.myPluginName[-version].js. The major and minor version numbers are optional, but by using this format for your plugins you follow the general convention, make it easy to find your plugin in a set of script files, and reduce the chance that you have name collisions.
  • Choose the name for your plugin carefully. If it becomes popular, you'll not want to share a name with other plugins. Some authors include a subprefix after "jquery" in the name. So, if AppDev were to begin producing and sharing jQuery plugins, we might name our files jquery.appdev.myPluginName[-version].js. That would reduce the chance of filename collisions. And name the plugin method carefully to avoid collisions with other jQuery methods and plugins others may use in their Web pages.
  • Plugins can either return a scalar value or the matched set so that you can chain jQuery methods together. If it makes sense for the plugin, you should always return this to support chaining.
  • Always write your plugin so that it is usable with both the full jQuery method name and its $ alias.
  • Avoid a long list of arguments for your plugin. It's fine to allow lots of options, almost mandatory, but limit yourself to a small number of arguments and make one of them options, through which the user can pass multiple values. This will mimic how most jQuery Library methods work.

It would be well worth your time exploring various popular jQuery plugins available and learn the best practices and conventions that other developers are using. Even if you don't share your plugins with the world, you can and should take advantage of the things that other people have found that work.

Don Kiely

Don Kiely is a featured instructor on many of our SQL Server and Visual Studio courses. He is a nationally recognized author, instructor, and consultant specializing in Microsoft technologies. Don has many years of teaching experience, is the author or co-author of several programming books, and has spoken at many industry conferences and user groups. In addition, Don is a consultant for a variety of companies that develop distributed applications for public and private organizations.

This blog entry was originally posted October 24, 2012 by Don Kiely