Managing jQuery Plugins

Question

Often, when working with jQuery, the need arises to include multiple plugins. This can quickly become messy work, especially when some plugins require additional components (ima

Answer 1

All of my jQuery plugins are organised into subfolders which include the version number e.g.

• /assets/js/plugin.1.4.1/plugin.1.4.1.min.js
• /assets/js/plugin.1.4.1/images/image.gif

If I need to update to 1.4.2 I can drop it in a new folder without too many problem, I can even use a specific version of the plugin in different parts of the site if needed. When I site is large and your using a few different plugins it's helpful to quickly see version numbers without digging around source comments in a plugin.js file.

If a plugin requires CSS I will take the base styles out of the plugin CSS and bundle these in with my main stylesheet, requesting additional CSS files is expensive and 9 times out of 10 it will be customised anyway. Likewise with images, if I'm doing any image customisation I will bundle these into my main image sprite, otherwise I'll just link to the images into that plugin.1.4.1 directory.

Yes, you end up with a few more files in your repo but it means:

• you can easily upgrade plugins just by updating your paths
• you can debug plugin issues easier because you can see how out of date you are
• you can roll back to an earlier version if everything breaks