How To Guarantee Dependent JavaScript Files are Included
I’m very much a statically typed kind of programmer and knowing that missing code will not be found, until executed, and then only when it hits that missing code … well, lets just say it makes me … uneasy … actually, I’m nervous as heck every time I run it! I feel like my app is held together with duct tape! …. a house of cards waiting to collapse with the next gentle breeze.
When I started programming in JavaScript, this really bothered me. In addition to my ‘uneasy’ feeling, there was the constant aggravation of missing dependencies. This was more than uneasiness; this was an irritating thorn in my side. It was again only compounded by the fact, that if there were 5 missing dependencies, I would only find them one at a time, and only if I happened to be so luck as to covered it’s reference in my GUI testing!
Wouldn’t it be nice if my code would tell me on the first run ever dependent file that was missing?
I thought so; so I came up with this little trick to test if a JavaScript file is included already. Basically, you create a variable at the top of the JavaScript files which others depend on. I try to keep the name obvious, and weird enough to avoid collisions.
1 | var include_ajax_utility = true; |
Then in all the files which are dependent on this script (the ajax utility in this case), I add the following code to check.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //---------------------------------- // Check for dependencies //---------------------------------- try { var fileName = "mypage.events.js"; if( "undefined" == typeof(include_ajax_utility)) alert( "JavaScript file '" + fileName + "' is missing dependent file" + " : ajax.utility.js"); } catch(e) { alert( "Programmer Alert : At least one dependent” + “ file has not been included."); |
Notice the code is checked to confirm the variable is set (in other words it exists), and if it doesn’t, an alert is displayed to the user indicating exactly which dependent file is missing. [As a side note, the try catch block doesn’t appear to be necessary, but still … I like to cover all my bases]
There are a couple drawbacks to doing this however; a) you may get multiple messages saying practically the same thing, and b) the JavaScript script tags need to be in order! Yes, the ordering of tags can be frustrating, if you insert a new dependency into existing code, only to have this break, and this is enough to make most people quickly abandon this idea. But for me, it’s a small price to pay for a giant step forward in having a sense of stability.
What do you think? A little too anal? 😉
Copyright © John MacIntyre 2009, All rights reserved
WARNING – All source code is written to demonstrate the current concept. It may be unsafe and not exactly optimal.
Hey John,
I just wandered over here from the StackOverflow post about being over 40 🙂 Nice blog.
I’ve taken your concept here a bit further and created a JavaScript dependency injection framework that can identify missing dependencies and load them dynamically. I’ll have to write up a blog post on it some time soon and link you to it.
–FlySwat
EDIT by John – Jonathan did create a post called JSManager.js – Easily manage JS dependancies
Thanks Jonathan,
At least something good came out of that question. 😉
I’m glad you like the dependency idea. And I’d love to see what you do with it.
Regards,
John