Andrew Sumin, August 22, 2007.
Using dynamic load, I can easily load js files that are required for a page content. With the help of aliases I may create links not to files, but to the functional required.
Aliases allow to divide js files into groups. It’s convenient to separate core files from the files of a concrete project. But if the project is large or there is a lot of functional required for several projects, the division becomes complicated enough. So I (on another level) faced the problem I began with: files of what kind of aliases could be needed on page (I remind, if you want to connect an alias, you should load the file which describes it)?
As a rule, arrangement of js files depends on js programmer. So, I decided to move path indication from HTML to js, without breaking former algorithm. I create an object to control aliases:
var expectedAliases = [];
var Locator = new function(){
this.aliases = [];
// sets alias
this.set = function(name, alias){
this.aliases[name] = alias;
// I load an alias
if it is already being expected
if(expectedAliases[name]){
this.load(name);
}
};
// returns an alias in case it has been already been set
this.get = function(alias){
return this.aliases[alias] || null;
};
// loads alias if it’s not loaded yet and
// is not being loaded at present moment
this.load = function(alias){
if (!this.get(alias) || this.get(alias).called){
return;
}
this.get(alias).called = true;
createScript(this.get(alias).src, this.get(alias).charset);
};
};
Setting alias (set) - link setup to an object that contains a link to a file. The file contains description of alias. Loads alias if required.
Getting alias (get) - returns alias.
Loading alias (load) - generates tag <script>, which loads a file with alias description.
If we don’t take the algorithm of alias set into consideration, in function
require
, we should write a function which is to be realized when alias is being loaded in massive expectedAliases["unknown alias"] and activate its load Locator.load("unknown alias"). If this alias has already been set, it’ll begin loading, otherwise during setting alias nonempty expectedAliases["неизвестный алиас"] will cause its load.
An alias set should be made more complicated then it was described in a previous article because alias could be needed before it would be loaded.
var aliases = {};
function setAlias(name, value){
aliases[name] = value;
if (!expectedAliases[name]){
return;
}
// if someone waits for this alias already
var listener;
while ((listener = expectedAliases[name].shift())){
listener();
}
};
Now we should only set links on files with aliases description.
Locator.set('alias1', {src: 'pathToAlias1', charset: 'utf-8', called: false});
Locator.set('alias2', {src: 'pathToAlias2', charset: 'utf-8', called: false});
These descriptions can be stored in different files and connected on a page at any time. I have one file for one project.
So, if I need to load a file, but I don’t have the description of its alias yet, I store a file load function in massive expectedAliases["unknown alias"] and try to load alias Locator.load("unknown alias"). The file loads in case the path to it is known, otherwise, when I set an alias Locator.set("unknown alias"), I check, whether any file is waiting for it (if a file is waiting, I begin loading alias description). After load of alias description has completed and now an alias is set already in core, I check once more whether any files are waiting for it (iif yes, I begin loading them).
As a result, I have two files connected on all pages.
<script src="path/jsx.js" type="text/javascript"></script>
<script src="path/locator.js" type="text/javascript"></script>
The first one is core file, which allows dynamic load and work with aliases. The second one contains descriptions of paths to all the aliases that could be required on the project. In case new alias is required on the project, I just write up path to it in locator.js.
Example of use.