Including Javascript within web pages

Question

Can anyone please recommend the best and easiest way to include multiple Javascript files on a (PHP based) web page?

I have a website that uses jQuery, and anything up to around 10 plugins on any one particular page. I'm not entirely sure of the best way to go about including all these files to make life simple for me as a dev, and to ensure that they are best served to a user.

Ideally I thought the easiest way myself would be to build a PHP handler file that I could use to call which plugins I reqire for each page, and then have it output javascript that used document.write() to 'include' each plugin JS file on the page, like so:

<script src="handler.php?jquery,plugin1,plugin2,plugin3,plugin4"></script>

which might then output Javascript with multiple document.write()'s to each individual plugin.

I am led to believe this might lead to problems with browser caching however, as some browsers ignore caching of items with query strings.

Is this OK to do, or is there a simpler method that I'm perhaps missing?

Answer 1

you could be interested in Google AJAX API, i.e.:

google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");
google.load("prototype", "1.6.0.3");

• user107201: Thanks for that dfa, I do already use Google's CDN for loading the main jQuery file - it's just all the darn plugins I need to load with it - of course, not every plugin is needed for every page, so being able to load what I need quickly is essential. I think the fact I'm trying to the code -dead- clean (clean freak that I am) is perhaps making things harder, and I should just use a PHP function to write out and include the plugins via standard script tags than be all clever and try and load multiple files with one script tag.

Answer 2

Joely,

Browsers have no problem caching url's with questionmarks. It's probably better to not include a js file, which in turn includes another js file. If you are already writing a script that manages all the js files that are supposed to be included, why not output all those script tags right there?

• Frank Farmer: This may be a little out of date, but see: thinkvitamin.com/features/webapps/serving-javascript-fast "At this point, you might ask why we don’t just add a query string to the end of the resource - /css/main.css?v=4. According the letter of the HTTP caching specification, user agents should never cache URLs with query strings. While Internet Explorer and Firefox ignore this, Opera and Safari don’t - to make sure all user agents can cache your resources, we need to keep query strings out of their URLs."

Answer 3

Why not just include each of the files individually with their own <script> tag? Then everything gets cached individually and all is well. It'll only be a lot of HTTP requests on the first page load. Dynamically building an "include file" every time will probably not be any better for performance.

Does the combination of scripts vary heavily? If you really want to reduce HTTP requests and you're always including the same 10 files, just put them all together into one long file.

• user107201: It does vary heavily - some pages use no plugins, others use upto 10. I think I might just stick with using a PHP function to output script tags for the required javascript plugins I need, and I'll have to ignore my 'trying to keep the code simple' urges. Thanks.
• Frank Farmer: Minimizing HTTP requests by combining javascript files is a well accepted practice. developer.yahoo.com/performance/rules.html

Answer 4

If you're really averse to including the files individually, you could probably write a php function to generate the script tags given a list of plugin names.

• user107201: And thanks again - PHP would seem the wise choice rather than trying to include javascript from javascript files etc.

Answer 5

function loadScripts(funcs){
 //funcs being an array list of paths to the scripts.
 var temp;
 //lets get a reference to the head tag
 var h = document.getElementsByTagName('head')[0];
 for(var i=0; i < funcs.length; i++){
 temp = document.createElement('script');
 temp.setAttribute('src', funcs[i]);
 temp.setAttribute('type', 'text/javascript');
 h.appendChild(temp);
 }
}