Reuse your JavaScript as jQuery Plugins
By Christopher Haupt | February 10th, 2011 at 2:02PM
Today’s guest post is from Christopher Haupt of Webvanta, an Engine Yard partner. Christopher is co-founder of Webvanta, co-host of the Learning Rails podcast, and frequent contributor at Ruby and Web Development and Design related conferences, meet-ups, and publications.
Webvanta is co-sponsoring the first annual North Bay Web Design Conference on April 12, 2011 in Rohnert Park, CA. Join the mailing list to be the first to find out when the agenda and registration info are announced in March.
Our team finds that we get the greatest leverage out of our existing collection of code snippets by organizing them into well structured, easy to maintain libraries of pluggable modules. This is the first article in a two part series. In this article, we take a whirl-wind tour of how to create reusable modules with front-end JavaScript code using the popular jQuery library.
In the follow-up article, we will briefly examine the Web Storage technology that has come out of the HTML5 specification process and then show how simple it is to wrap it within a jQuery plugin.
If you go back and look through the last few web app projects you’ve completed, you probably will find that you have accumulated a variety of snippets of JavaScript that may have even been tweaked to be reused in follow-on projects. If you haven’t yet organized these bits of code in a particular way, you may want to consider leveraging an existing framework that provides well-defined structure for code reuse.
Our team primarily uses jQuery, a very straightforward and easy to use JavaScript library originally created by John Resig back in 2006. If you are new to jQuery, we recommend the excellent jQuery in Action book and jQuery’s own website for pointers to tutorials and documentation.
JQuery has two logical components. The base jQuery library
includes a powerful CSS-like selector mechanism, easy methods to manipulate the DOM, rich effects, Ajax support, utilities, and more. The jQuery UI library provides a collection of user interface widgets.
These two parts of jQuery form the basis of a rich ecosystem that is further enhanced with many plugins. Writing jQuery plugins is pretty straight-forward once you are familiar with the basic conventions.
Conventions Conventions
If jQuery is a fit for your project, you can utilize its conventions to reap the benefits of a consistent code style, logical approach to working with data, and to easily leverage other basic building blocks of code.
Three particular best practices are self-evident with a quick review of the jQuery community (see the plugin authoring guidelines for more details).
First, files, functions, data, and events should follow naming rules to help form and maintain namespaces. Files will typically use the pattern of “jquery-prefix-name-version. js”. “jquery” identifies the file as a jQuery compatible piece of code, often a plugin. “prefix” is an optional word, acronym, or hyphenated phrase that identifies an organization or group of related files. “name” is the name of the plugin. “version” is usually the major and minor version numbers of the code, e. g. jquery-webvanta-icon-picker-1.0.js.
Functions, data, and events should use specific techniques outlined in the jQuery Plugin Authoring guidelines to minimize conflicts between different plugins.
(No Ratings Yet)