Learning JavaScript Design Patterns

Chapter 13. jQuery Plug-in Design Patterns

jQuery plug-in development has evolved over the past few years. We no longer have just one way to write plug-ins, but many. In reality, certain plug-in design patterns might work better for a particular problem or component than others.

Some developers may wish to use the jQuery UI widget factory; it’s great for complex, flexible UI components. Some may not.

Some might like to structure their plug-ins more like modules (similar to the module pattern) or use a more modern module format such as AMD.

Some might want their plug-ins to harness the power of prototypal inheritance. Others may wish to use custom events or Publish/Subscribe to communicate from plug-ins to the rest of their app. And so on.

I began to think about plug-in patterns after noticing a number of efforts to create a one-size-fits-all jQuery plug-in boilerplate. While such a boilerplate is a great idea in theory, the reality is that we rarely write plug-ins in one fixed way, using a single pattern all the time.

Let us assume that we’ve tried our hand at writing our own jQuery plug-ins at some point and we’re comfortable putting together something that works. It’s functional. It does what it needs to do, but perhaps we feel it could be structured better. Maybe it could be more flexible or could be designed to address more of the issues developers commonly run into. If this sounds familiar, then you might find this chapter useful. In it, we’re going to explore a number of jQuery plug-in patterns that have worked well for other developers in the wild.

Note: This chapter is targeted at intermediate to advanced developers, although we will briefly review some jQuery plug-in fundamentals to begin.

If you don’t feel quite ready for this just yet, I’m happy to recommend the official jQuery Plug-ins/Authoring guide, Ben Alman’s plug-in style guide, and Remy Sharp’s “Signs of a Poorly Written jQuery Plug-in” as reading material prior to starting this section.