Those familiar with PHP will know what these include functions do:
[PHP]require(’file.php’);
require_once(’file.php’);
include(’file.php’);
[/PHP]
They enable PHP programmers to include code only when needed. The benefit of using such functions is that it reduces the server load and the response time. Many web applications are thousands of lines long and to parse each of these lines whenever a request is made to the server is very inefficient.
JavaScript does not have similar functions. But it is possible to include JavaScript code only when needed by utilizing the DOM methods. I have created a JavaScript Include Test Page to show how it can be done. On this test page, there are two links. The first link tests to see if the code from script2.js is ‘included.’ The second link runs the function that will include the extra script file. Once you’ve clicked the second link, the first link will show you that you’ve included the code:
Let me explain how it works. The HTML only links to one script file initially:
[HTML]
[/HTML]he DOM Inspector, it will show there’s only one script element attached to the head element:
When you click the first link without first including the second script file you’ll see from the code it will not recognize the function, ‘is_included,’ which is declared on that file:
[js]function include_test(){
var test = typeof is_included;
if(test != ‘function’){
alert(’The code from script2.js is not included.’);
}else{
is_included();
}
return;
}[/js]
If it had been included, the ‘typeof’ statement would have returned ‘function’ but instead it returns ‘undefined.’ Once script2.js is included, it will recognize the function as in the scope chain and execute it.
So how does the include work? With the DOM element methods:
[js]scriptElement = document.createElement(’script’);
scriptElement.type = “text/javascript”;
scriptElement.src = filename;
head[0].appendChild(scriptElement);[/js]
This will create an additional script element. The src will be whatever string is within the variable ‘filename.’ In this case it is script2.js. Once the second link is clicked you can check the DOM Inspector yourself to see the extra script element has been created:
Here’s the code on the second file:
[js]function is_included(){
alert(’The code from script2.js is included!’);
return;
}
[/js]
You see, there’s no way that alert shown in the first image could have been called if the second file had not been incorporated into the (modest) test application.
The benefit to including JavaScript only when needed is that you’ll keep your file sizes smaller. My ColorTool is getting close to 200kb in size. I never made use of the benefit of a DOM include, and therefore it is a large load, and a strain on the server, because most people do not use all of the code available every time they visit. It is a waste of resources and sloppy design.
There’s a couple of things to remember if you decide to use this. One is, check to make sure that you have not included the extra JavaScript file already, otherwise you’ll just keep including the same file over and over again whenever the include processes is enacted. This will eat up the client’s memory. Check to make sure you haven’t included the file already. For the purposes of this test I set a global variable that I test when the include process begins:
[js] if(included == false){
scriptElement = document.createElement(’script’);
scriptElement.type = “text/javascript”;
scriptElement.src = filename;
head[0].appendChild(scriptElement);
alert(’Attempting to include script2.js..’);
included = true;
}else{
alert(”Oops! You’ve already included script2.js successfully!”);
}[/js]
The other thing to remember is that code included will not be available right away, and you should be sure to test to see if it is ready before you attempt to use it.
That’s it! I hope this helped you in your JavaScripting.