Guidelines for using jQuery plugins and their dependencies

Question

jQuery plugins often have dependencies on extrnal files: jQuery library, style sheets (CSS), images, other plugins, etc. What are the guidelines for using (and writing) jQuery plugins that would address the placement of the dependencies? In the other words, where should the required files go: under main app folders (Img, Css, JS, or whatever folders you use), under plugin folder (e.g. Plugins/MyPlugin/Img, Plugins/MyPlugin/Css, etc), or something else.

After including several plugins to the project, I'm concerned that other project members will have hard time figuring out which dependencies are required and which files should go where.

What worked and did not work for you?

Answer 1

Personally, when I build a plugin, I try to make it dependent as little as possible on other resources as to avoid this issue. Sometimes you can't avoid using external stylesheets in which case I've always put them with my other CSS files even if they are originally included in the same folder as the plugins. This avoids any ambiguity when trying to decide which stylesheets should go where etc. You will manually have to include them anyways. If the plugin has any dependencies, they go in the JS folder, organized in a similar manner as the other plugins. Images, in this case, would then go with all of the other images.

When building a plugin, you can make it more flexible by allowing the user to define the classes that are applied to certain objects, or let the user define the structure of what the plugin will manipulate. All of this can be done while giving it a set of good defaults to follow while relying as little as possible on external resources.

As to whether best practices have been defined for these situations, I have not found any yet. I have only found the plugin authoring guidelines on the jQuery site: http://docs.jquery.com/Plugins/Authoring.

EDIT:

As to clarify about plugin dependency organization:

When say you have jquery.x.js and jquery.y.js. They both depend on jquery.z.js. I have always put jquery.z.js in the same folder as jquery.x.js and jquery.y.js. This avoids duplication and any confusion related to breaking the organizational convention. So:

• ./jquery.x.js
• ./jquery.y.js
• ./jquery.z.js

I normally organize my folders as such:

• ./js/jquery-x.x.x.js
• ./js/plugins/jquery.x.js
• ./js/plugins/jquery.y.js
• ./js/plugins/jquery.z.js