Edit: Even adding a comment of "looks good to me" and up-voting that comment would be appreciated :) I just want the feedback! Thanks!
For the fun of it as well as professional development, I wrote a small "library" (single 24 line JavaScript function) that will allow a developer to double check that all external libraries loaded and to reload them with a local copy as a fallback if the CDN is blocked or down.
Double Take Script Loader
This is a simple way to load a local copy of a library as a fallback to an external CDN.
I'm looking for feedback on my methods. Here's the actual gist on GitHub. Is there any (obvious) way I could improve this function? I realize that everyone has their own style and such. I'm not asking about that. I'm asking about better performance/ease of use. See the specific questions on the lines of code.
dt-script-loader.js
var DoubleTakeScriptLoader = function(scripts) { //I have to use the global namespace if I want to let devs call it on their own right?
if (scripts) { //Allows devs to call it with specific scripts
if (Object.prototype.toString.call(scripts) !== '[object Array]' ) { //Is there a better way to check whether it's an array without using another library?
scripts = [scripts]; //Allows devs to call with just an object and I'll change it to an array
}
} else {
scripts = document.getElementsByTagName('script'); //If function is called without argument, we'll get the scripts from the document. I think this will only load the scripts that have been parsed thus far correct?
}
for (var i = 0; i < scripts.length; i++) {
var script = scripts[i];
var propName = script.propName || script.getAttribute('data-prop-name'); //For use without calling with an argument, I get a data attribut. Is getAttribute the best way to get attributes or should I use dot notation in the context? I have seen differing opinions.
var localSource = script.localSource || script.getAttribute('data-local-src');
if (propName != null && localSource != null) {
if (!window[propName]) { //If the library was not loaded. Is there any way to be aware that the request to get the library failed so this can be responsive to failures rather than called regardless?
document.write('<script src="' + localSource + '" type="text/javascript"><' + '/script>'); //I tried creating a DOM element and adding it to the DOM, but the script wouldn't load. Did I do something wrong, or is this the best way to add a script to the DOM as it is parsing?
if (script.originalId) {
script = document.getElementById(script.originalId);
}
!script.parentNode || script.parentNode.removeChild(script); //Remove the old script. Good/bad?
}
}
}
};
DoubleTakeScriptLoader(); //Invoke the script so devs using it don't have to do so. Should I allow them to have a data- attribute on the script itself which says "don't invoke?" I don't see it being any performance issue or anything....
Thanks for any and all input. I realize that a single function is not much of a library, but I'm learning and I want to build something useful for others.
Example
For an example of how to use this function, see example.html. You will of course need local copies of jQuery and Underscore because for the purpose of the example the CDNs do not actually exist. You can also look at the demo.
example.html
<!DOCTYPE html>
<html>
<head>
<title>DT Script Loader</title>
</head>
<body>
<h1>Double Take Script Loader Example</h1>
<div id="message-jQuery">
Waiting to load jQuery...
</div>
<div id="message-underscore">
Waiting to load Underscore...
</div>
<!-- Method 1: Use data- attributes. This does NOT require calling DoubleTakeScriptLoader, just including it. -->
<script src="http://cdn.example.com/underscore/1.4.4/underscore-min.js" data-prop-name="_" data-local-src="underscore-min.js"></script>
<!-- Method 2: Call DoubleTakeScriptLoader directly -->
<script src="http://cdn.example.com/jquery/1.10.1/jquery.min.js" id="jQueryScript"></script>
<script src="dt-script-loader.js"></script>
<script>
DoubleTakeScriptLoader({
propName: '$',
localSource: 'jquery-1.10.2.min.js',
originalId: 'jQueryScript'
});
</script>
<!-- Use libraries. This must be done AFTER calling DoubleTakeScriptLoader() -->
<script>
(function() {
var checkStuff = function(prop, elementId) {
var el = document.getElementById(elementId);
if (window[prop]) {
el.innerText = 'Loading ' + prop + ' worked great!';
el.style.backgroundColor = "green";
} else {
el.innerText = 'Loading ' + prop + ' did NOT work!';
el.style.backgroundColor = "red";
}
};
checkStuff('$', 'message-jQuery');
checkStuff('_', 'message-underscore');
})();
</script>
</body>
</html>
I, the student, thank you for your time and feedback and look forward to your constructive input.
