Tidying up jQuery

Question

Hi,

I have a page which uses a lot of jQuery code but it is becoming unmanageable. I want to be able to tidy it up to place related parts into separate .js files and include them onto the page in a script tag.

I seem to be able to do this by creating them as jQuery plugins then by using $(document).*plugin_name();* on the page.

Is it okay to do this or is there a better/easier way?

Thanks

Answer 1

I suggest you try out Sprockets: http://getsprockets.org/. It allows you to separate your Javascript into various manageable files, and have them combined into one file for deployment.

Having Javascript split into multiple files is a must for large applications at development time, but having them combined into one is very important for managing latency at load time in production.

Answer 2

You don't have to do any such shenanigans, if you import the .js files in correct order, it will work like it was all in one file. You can also use $(document).ready(function() { }); block in any file without problems.

Answer 3

Try checking out Rebecca Murphey's post about organizing your code

If you're using jQuery UI its got a very cool widget maker tool that helps you to create your own stateful plugins