Lets say that we have file structure like this:
In short all we want is to in script.js do this:
//do something when required scripts are loaded
We also want to include only script.js in our HTML file. To require other scripts, we have to know their names and their locations. To find the root location we have to find the URL of script.js. We will remember it as the root url and then use the supplied namespaces, for example ‘ivar.util.string‘ and transform them into ‘<url of script.js>/ivar/util/string.js‘. Now we have to append to html head dom element scripts with given locations. We will put a loading stack so scripts can be loaded asynchronously. Before loading a script we have to check is the script currently loading or is it already loaded. When all of the required scripts are loaded we will fire the functions stacked with ready method. If we want to include all of the scripts in a directory, we have to have _all.js that requires all scripts in that directory. By requiring ‘ivar.net.*‘ we really require ‘ivar.net._all.js’, that requires all scripts required inside it.
The following code does the described job:
I have excluded this code from a large library I am writing so if you find an error or a typo please notify me, I would be grateful. Any suggestions, similar snippets or any other kind of feedback is welcome in the comments section. I only hope that this peace of code helped you in some way. Thank you.