So this one has been bothering me for quite some time…
Pretend for a second your rapidly web developing a site when the little Software Engineer in the back of your head starts making you feel guilty for loading JavaScript that you are not guaranteed to exercise. So you put on your Engineering hat and go looking for a solution and if your like me you come across RequireJs, which is a fantastic solution. Then the Web developer in your head starts sing songing “Scope Creep, Scope Creep, your a creep, I just want to weep…” or something super bizarre like that.
jQuery to the rescue.
jQuery’s getScript() (or its ajax equivalent) is a much quicker solution for smaller projects.
To use it just:
$.getScript('js/SomeFile.js',function(){
alert("Valid8 loaded!");
});
This is great but you will soon learn that it has one major downside; if the js file you are loading is on the same domain as your web server you wont be able to debug it with any of the in browser development tools (a.k.a firebug and the likes).
James Messinger on StackExchange’s Questions created a quick work around that I had trouble tracking down, which is why I am even wasting your time with this =). He extends the getScript method and makes scripts on your same domain load the same way as scripts from other domains. Here is James’s code to hopefully help the odds of others like you tripping across this on Google.
<script type="text/javascript">
// Replace the normal jQuery getScript function with one that supports
// debugging and which references the script files as external resources
// rather than inline.
jQuery.extend({
getScript: function(url, callback) {
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = url;
// Handle Script loading
{
var done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function(){
if ( !done && (!this.readyState ||
this.readyState == "loaded" || this.readyState == "complete") ) {
done = true;
if (callback)
callback();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
}
};
}
head.appendChild(script);
// We handle everything using the script element injection
return undefined;
},
});
</script>
By no means am I walking with a cane yet but I’d like to say I’ve been around the block a few times. Along my travels I have come across situations where hacks to libraries were needed every one of these caused some degree of headaches when upgrading therefore I suggest NOT extended getScript but instead creating your own function/method to take care of this task. It may look something like this:
// Replace the normal jQuery getScript function with one that supports
// debugging and which references the script files as external resources
// rather than inline.
function dynamicallyLoadJSFile(url, callback){
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = url;
// Handle Script loading
var done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function(){
if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
done = true;
if (callback){
callback();
}
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
}
};
head.appendChild(script);
// We handle everything using the script element injection
return undefined;
};
Hopefully this helps someone at some point! Let me know if you have a better solution, and why its better. I personally have used this on small projects with much success, however I am starting a large scale JS frontend and am looking for a more engineered solution.
