How to organize all jQuery scripts

Question

I use half a dozen jquery plugins as well as my own jquery scripts and each script I have this code:

$(document).ready(function() { .... } 

What is the best way to organize all the scripts in one central location and instead of having multiple $ (document) .ready (function () everywhere in the script.

thoughts?

UPDATE

one.js

 $(document).ready(function() { $("#aspnetForm").validate({ rules: { <%=txtVisitName.UniqueID %>: { maxlength:1, required: true }, deleted lines...... 

two.js

 $(document).ready(function() { $("#btnSubmit").click(function(event) { if ($("#aspnetForm").valid()) SaveVisitBasicPage(); deleted lines...... 

Three.js

 $(document).ready(function() { function initMenu() { $('#menu ul').hide(); $('#menu li a').click( deleted lines...... 

four.js

 $(document).ready(function() { $("#ctl00_cphMaster_txtPurpose").NobleCount('#count01', { max_chars: 25, on_negative: 'go_red', on_positive: 'go_green', block_negative: true deleted lines...... 

how could I arrange the above .js files ?, you see above, with the verbose time $ (document) .ready (function ().

Answer 1

Have you considered using Require.js dependency management framework?

Answer 2

Install all your functions in an object that you can link between files by linking it to a window. Then pass an anonymous function that fires all your DOM-dependent events in the finished document.

Example:

file1

 var MyObj = { init: function(){ // do stuff }, otherStuff: function(){ // do other stuff } } window.MyObj = MyObj 

file2

 var MyObj = window.MyObj; MyObj.moreStuff = function(){ //do more stuff } $(document).ready(function(){ MyObj.init(); MyObj.moreStuff(); }) 

You should have only one document.ready () executed on each page. Or you are mistaken.

Hope this helps.

Answer 3

Not sure if this will help, but this is how I organize jQuery scripts. Our application has 80K JavaScript lines, so organization is important, and it worked beautifully for us.

Spontaneous function template