Archive for September, 2017

Published by Pui-chor on 29 Sep 2017

single include script with variable initializing scripts right after

To complement what is needed after the post “Include script files in one script file”, I found that some variables needed to be initialized cannot be done unless the loading of all scripts is completed. Looks like loading all scripts and other script initalizing variable are running in different thread. To solve the problem when error occurs identifying variable to be initialized, all variable initializing functions can be inserted as this:

This is how I altered the “loadScriptInOrder” and inserted the initializing scripts in it. Here is the inorder master.js file:
var scriptMap =["/jquery.js","/script1.js", "/script2.js", "/script3.js"];// list of to be loaded script in an array
var order = 0;
function loadScriptInOrder(){
if(order == scriptMap.length) {
initalize_variable1();initialize_variable2();//do this right after the loading
return;
}
var JSLink = scriptMap[order];
var JSElement = document.createElement(’script’);
JSElement.src = JSLink;
JSElement.onload = callback;
document.getElementsByTagName(‘head’).item(0).appendChild(JSElement);

function callback(){
order++;
loadScriptInOrder();
}
};
loadScriptInOrder();//load the script in a recursive manner

This way I will not need to load jquery.js in HTML file and then inlude the master.js file. It will be one once and for all. That’s perfect!

Published by Pui-chor on 24 Sep 2017

single javascript file when having dependents

Last post we discussed different ways to load javascripts into the header and now I discovered when some function is dependent on some script being loaded, the earlier solution did not cover that.

Here is the example of the masterscript:

var scriptMap =[... whatever scripts ...];// list of to be loaded script in an array
function include(file){
var script = document.createElement(’script’);
script.src = file;
document.head.appendChild(script);
}
/*basic include any js files here */
for(var i=0;i<scriptMap.length;i++) include(scriptMap[i]);
//or
include(’script1.js’);
include(’script2.js’);

/* this helps */
function loadScript( url, callback ) {
var script = document.createElement( “script” )
script.type = “text/javascript”;
if(script.readyState) { //IE
script.onreadystatechange = function() {
if ( script.readyState === “loaded” || script.readyState === “complete” ) {
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function() {
callback();
};
}
script.src = url;
document.getElementsByTagName( “head” )[0].appendChild( script );
}
// call the function…
loadScript(script3.js’, function() {
alert(’script3 ready now!’);
});
loadScript(’script4.js’, function() {
//alert(’script4 ready now!’);
load_other_script();
});
loadScript(‘/script5.js’, function() {
//alert(’script5 ready now!’);
script6();
});

function load_other_script(){
var imported = document.createElement(’script’);
imported = document.createElement(’script’);
imported.src = ‘/script7.js’;
document.head.appendChild(imported);
include(‘/script8.js’);
}

In addition to make one script loaded one after another, this will make sure one script is loaded and ready for another script to be load as the later script is dependent on the first script to be loaded .

Published by Pui-chor on 15 Sep 2017

Include all javascipts with one javascript file

The power of computing is to load a program from another program. Just like booting up the computer. To load an HTML page with many scripts files can be loaded with one script file.

After a few research, I found the following techniques:

1. create this master js file:
var tobeadded = document.createElement(’script’);//start script
tobeadded.src = ‘/script1.js’;//script src
document.head.appendChild(tobeadded);//close script
tobeadded = document.createElement(’script’);// repeat until all done
tobeadded.src = ‘/script2.js’;
document.head.appendChild(tobeadded);
tobeadded = document.createElement(’script’);// repeat until all done
tobeadded.src = ‘/script3.js’;
document.head.appendChild(tobeadded);

Save this file called master.js and enter this into the HTML file:
<script type=”text/javascript” src=”/master.js”></script>

The problem is that all the scripts will be loaded asynchronously, that is, you have no control which is loaded first. When one of the script depends on the other to be loaded first, you will experience error when scripts are executed “onload”.

2. Same problem as #1. You can need to add a script file first before adding this master file because of the reason mention before:
<script type=”text/javascript” src=”/jquery.js”></script>
It is because jquery.js is needed for all scripts in the master.js
Here is a different master.js file:
function include(file){
var script = document.createElement(’script’);
script.src = file;
script.type = ‘text/javascript’;
script.defer = true;
document.getElementsByTagName(‘head’).item(0).appendChild(script);
}
/* include any js files here */
include(‘/script1.js’);
include(‘/script2.js’);
include(‘/script3.js’);
This master.js is creating a function called include to ease the repetition.

3. This is what I prefer as I can control the order of the scripts loaded. Here is the inorder master.js file:
var scriptMap =["/jquery.js","/script1.js", "/script2.js", "/script3.js"];// list of to be loaded script in an array
var order = 0;
function loadScriptInOrder(){
if(order == scriptMap.length) {
return;
}
var JSLink = scriptMap[order];
var JSElement = document.createElement(’script’);
JSElement.src = JSLink;
JSElement.onload = callback;
document.getElementsByTagName(‘head’).item(0).appendChild(JSElement);

function callback(){
order++;
loadScriptInOrder();
}
};
loadScriptInOrder();//load the script in a recursive manner

This way I will not need to load jquery.js in HTML file and then inlude the master.js file. It will be one once and for all. That’s perfect!