Correct way to unify separate js files with several jquery (document).ready() events

Question

I have a very large project that has several external javascript files that I would like to unify in a single large one to optimize server load.

The problem is that many of these scripts have they own (document).ready() events that targets element that are only available on that page.

Unifying everything would put a lot of (different) (document).ready() in a single file and most of them will target elements that are not on the page, is this a problem?

What is the correct way to approach this?

EDIT: Clarification: I mean unify hundreds of javascript file included in they own tag in a single file, so I can minify it.

Despite sounding like I condone not caring about other people... but what server load are you optimizing if they are external files ? — Khez, Jan 09 '13 at 04:11
@Khez - I expect it was a typo - he meant page load time or they are external to the html but still on the same web server. — Hogan, Jan 09 '13 at 04:12
http://www.latentmotion.com/separating-jquery-functions-into-external-files-without-selectors/ — Alex W, Jan 09 '13 at 04:14
As far as page load time, you'll have to test to see if it's a problem. Assuming you're using jQuery, having several `(document).ready()`'s should be ok according to [this SO post](http://stackoverflow.com/questions/1327756/can-you-have-multiple-document-readyfunction-sections). — mgamba, Jan 09 '13 at 04:16
Moving all your `(document).ready(...)` structures into a single file won't change a thing. Order may or may not be important. The safest thing to do is to organise your unified code in the same order it was originally loded when it was in separate files. — Beetroot-Beetroot, Jan 09 '13 at 04:17
Personally, I find that as code volume increases, I am more likely to go the other way - namely to split code into separate files, not to combine it. Either way, it has everything to do with managing the code and nothing to do with server load. — Beetroot-Beetroot, Jan 09 '13 at 04:21

score 3 · Answer 1 · answered Jan 09 '13 at 04:12

3

I'm not quite clear on the question (where some of the elements are not on the page) but jQuery is specifically designed to have multiple $(function () {}) (short cut for document ready) calls in a page and have them run at the correct time.

answered Jan 09 '13 at 04:12

Hogan

69,564
10
76
117

I meant that some of the document ready functions targets specific elements that exists only in a page. That is why the have been separated in the first place. So there might be a $('#element_that_do_not_exist').show(); – 0plus1 Jan 09 '13 at 04:19

score 3 · Accepted Answer · answered Jan 09 '13 at 04:21

It sounds to me like you have a different javascript file included on each page and you want to consolidate them together.

If that is what you are trying to do then the simplest way is to just concatenate all the javascript into a single file. It is fine to have multiple ready calls in the same file. Also jQuery should not error if elements are not present on the page so long as you use jQuery methods to do things (for example $('.element').show() would be fine, but $('.element')[0].style.display = 'block'; would error if the element is not present on that page.

Putting them all together could have unexpected consequences though if you have things that you only want to apply to specific pages. One way to handle this would be to check which page you are on before attaching specific events. You can do this by checking for specific elements on the page like

// check if element is present and visible
if ($('.element').is(':visible')) {
    // now we are on this specific page so let's do everything 
    // specific to this page here
}

or

// checks for presence of element
if ($('.element').length) {
}

Or you could use an id or other means to differentiate.

You could now make one $(document).ready(init); call at the bottom of your javascript and the init function could decide what needs to be initialized for that page.

Hope this helps!

score 1 · Answer 3 · answered Jan 09 '13 at 10:38

I tend to add a check in to see if the elements I want jQuery to interact with actually exist before I start using them.

Having said that, a lot of standard jQuery stuff will just silently fail if the elements it's operating on aren't there, which is usually the desired behaviour. There are a few plugins though that output warnings to the console if they fail. On modern browsers this is not a problem, but on IE without the debug bar installed, it results in a full error, which is obviously not desired at all.

score 0 · Answer 4 · answered Jan 09 '13 at 04:24

You don't need to have multiple (document).ready() blocks, you should be able to keep all of your code inside a single (document).ready() block. The code will target only the items that correspond to the selector, so you should be fine.

On a side note, you need to make sure you won't have different objects from different pages which have the same id, class or other attributes - if a single JS file corresponds to all of these pages and there are multiple elements on different pages that have the attribute that your JS selector matches with, you'll have un-desired (if the project is too complex, hard-to-identify) side-effects.

Correct way to unify separate js files with several jquery (document).ready() events

4 Answers4