[turboid] javascript solutions

Include files in JavaScript

Is there such a feature as in other languages?

Many of us who are familiar with PHP or Java miss in JavaScript a command like include or import which you can load the code of other PHP files retroactively into your main code with in a very simple way. You only need to write the command and after it the name of the other file in quotes. Unfortunately, there is no such command in JavaScript - except you build it by yourself or use a sophisticated framework, Turboid for example (or at least its core). Turboid is an easy to embed JS file, as you can see at the end of this article. If you have done that, you can let your script include code from other files at any time after running the script. And it's incredibly simple and more powerful than someone might have thought:

include("myOtherFile.js", function(){
	// Next steps here...
});

Please keep in mind that the HTML body element must already have been established when the include function is called, so it is recommended to write this function below the body element or into an event handler which does not fire before the body element is already established: window.onload.

Howsoever, there is a really fantastic feature provided by our Turboid include function. Let's say you have a huge bunch of functions and dispersed them over several files. But most of them you don't need at the beginning, so you want to save your website loading speed and don't want to load all functions directly at the beginning - but you don't want to write the include function call at each place you have written a call to the external function - although this could seem to be necessary if there is no guarantee about which function will be called first and which second while the script is running. But you want each file to be loaded exactly when one of its functions has been or is going to be called. So if you have 100 external functions spread over five files you could be forced to write the include call at 100 places in your script or more.

Now with our Turboid include function there is an almost incredible possibility: You can use it to register all functions you don't want to be loaded at the beginning, and if you've done that, you can let your script call those functions as if their files had been already loaded from the beginning, but in fact they would be loaded in time as the functions are called! You don't believe that? Check this example:

include.register("myFnc1" , "myFnc2", "myFnc3", "otherFile.js");
include.register("myFnc4" , "myFnc5", "yetAnotherFile.js");
include.register("myFnc6" , "myFnc7", "myFnc8" , "myFnc9", "someOtherFile.js");
// Next steps here...

Superb, isn't it? The last argument is the file name, as you see. The file is not loaded until one of the registered functions has been called.

This lets you get several pretty cool advantages:

• No need to check at every function call wether it is already loaded
• Space saving
• Website shows up faster

There is only one small (solvable) problem: If the external function has a return value, the way of getting that value is not this:

x = myFnc1();

But this:

myFnc1();
myFnc1.resume(function(){
	x = myFnc1.retVal;
	// Rest of the code here...
});

The resume function is also important if you have some other reason to wait until the file has been loaded completely.

What you need to use this technique? Download the Turboid framework and put it into the directory of your HTML file, then write this line into the head section of your HTML file, and that's it:

Alternatively, you can use the smaller Turboid core if you don't want to download the whole framework.