I've been working on a project with multiple features, and I want to organize each feature in separate JavaScript files for easier loading. I'm developing a function to handle the loading and execution process efficiently. The function should load and execute the JavaScript file if it's not already loaded or simply execute it if it is. One idea is to require two parameters - the file name and the entry point function's name. The function would then check if the script is loaded, execute the entry point function if so, or load the script and execute the entry point function upon onload event if not. However, this approach may become cumbersome as more functions are added, risking duplication of function names. A cleaner solution would be to assign a single "main" function to all entry points and associate it with its corresponding script DOM object, like this:
Loaded module:
function(){
function main(){
.
. some code here
.
}
Install(getThisFileName(),main);
}();
Main module:
function Load(fn){
var el,ff,i
el = document.getElementsByTagName("script");
ff = "http://"+window.location.host+fn;
for(i=el.length-1;i>=0;i--){
if(el[i] && el[i].src==ff){
el[i].Main();
return;
}
}
el = document.createElement("script");
el.type = "text/javascript";
el.src = ff;
}
function Install(ff,ep){
var el,i;
el = document.getElementsByTagName("script");
for(i=el.length-1;i>=0;i--){
if(el[i] && el[i].src==ff){
el[i].Main = ep;
ep();
return;
}
}
}
However, I'm unsure how to retrieve the name of the executing JavaScript file. Any suggestions?