Question

I have a single file, ‘core.js’, with a collection of my sites JavaScript. I like to combine my script this way so I can cut down on HTTP requests. My problem is, page specific code’s, obviously, getting run on pages it needn’t.

Without splitting ‘core.js’ into separate scripts, what’s the best solution for ensuring my page specific code only gets run on the page it’s supposed to be run on?

Many thanks!

Answer 1

The simplest way is to make everything in core.js be functions and then put one inline function call in each given page to call the code specific to that page. That makes core.js a resource and each page decides what functions in that resource to call.

I’ve also seen it done where you put a trigger class name on the body tag and then the code in core.js examines the classes on the body tag to decide what initialization code to run. This works best when you have a small number of types of pages and you want to run the same initialization code on all pages of the same type, but I don’t think it’s all that good if each page has different JS. In that case, I think it’s better to use the first technique of let the page decide what JS initialization function to call.