How to import javascript dependencies in one file

Question

In my application, we have almost 100+ web pages(html page), and all of the container a script which refer to our internal javascript libary.

For example, all of them load this file:

http://server/application/map.js

However, the map.js have to work with jquery and openlayers and something else.

And it is not a good idea to add these dependencies to the 100+ pages directly, because the implemention of the map.js may change someday.

For example, we use openlayers now, but we may use google map some day. If then,we will have to modify the 100+ pages to change from openlaeyrs to google map.

So I wonder if I can add the dependencies in the map.js?

Of course I can add the scripts in the map.js directly like this:

map.js

((function(){
   addScript("jquery");
   addScript("openlayers");

   function addScript(){
     // add a script element to the head of the page 
   }
})();

But it may cause problems because of the js downloding time.

And alternative ideas?

You might want to see this - http://stackoverflow.com/a/950146/728610 — Arvind Sridharan, Jun 05 '13 at 06:04
How about this `https://github.com/openlayers/openlayers/blob/master/lib/OpenLayers.js`, as the end user, I just add the `OpenLayers.js`, then openlayer will add its own files. — hguser, Jun 05 '13 at 07:02

score 1 · Accepted Answer · answered Jun 05 '13 at 06:46

The way jQuery's $.getScript() works is it simply sends an ajax get request and essentially uses eval to load the script. So if you want to use plain old javascript to do this, you could use something like the following:

Plain Old JavaScript Approach to Loading Scripts

function addScript(script)
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            eval(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET",script,true);
    xmlhttp.send();
}
addScript("path/to/jquery.js");
addScript("yourscript.js");

jQuery uses a better approach to eval (that I didn't include in the example above) in case you want to incorporate it into your script.

jQuery's Fancier version of Eval:

globalEval: function( data ) {
        if ( data && jQuery.trim( data ) ) {
            // We use execScript on Internet Explorer
            // We use an anonymous function so that context is window
            // rather than jQuery in Firefox
            ( window.execScript || function( data ) {
                window[ "eval" ].call( window, data );
            } )( data );
        }
    },

Other Ways

A few other ways are discussed by this article for dynamically loading scripts in javascript. Let me know if you have any questions about my examples or anything :)

hi, can you check my comment under my post? I found people use the `document.write` to add scripts, why they do not meet the loading problem? https://github.com/openlayers/openlayers/blob/master/lib/OpenLayers.js — hguser, Jun 05 '13 at 07:20

score 0 · Answer 2 · answered Jun 05 '13 at 06:27

You need an abstracted header and footer which handles all your includes (css, js libraries) automatically.

At WORST you should only be adding those per page.

Better, all that should be done automatically by whatever system you are using/have built (think CMS with a shell/template, at least partially data-driven). Even if you have no system/CMS, it should be pretty trivial to set something extremely basic up.

If you only want certain files included (as dependents) depending on content, even a better reason to table drive some of the includes dynamically in the abstracted header/footers.

How to import javascript dependencies in one file

2 Answers2

Plain Old JavaScript Approach to Loading Scripts

jQuery's Fancier version of Eval:

Other Ways