How should I execute Javascript files independently?

Question

Let's say I had an array of Javascript file names:

["funScriptStuff.js", "jQuery.js", "dojo.js", "scriptyScript.js"]

how could I execute them independently of each other?

For example, let's suppose one script did some evil stuff like

var undefined = true;
var window = "Windows 98";

and another script had code that relied on these global variables being unsabotaged

if (a !== undefined) {
  window.open(url);
}

if the first script ran first, it would ruin everything in the second one. Without changing anything in these script files, how can I run them independently of each other to prevent them from messing each other up?

EDIT: I am not asking what Javascript patterns to use to prevent namespace collisions, like wrapping my code in a big closure and so forth. I know about those. I'm trying to create an environment where you can run arbitrary scripts that I have no control over without them stepping on each other's toes.

Answer 1

As far as I know, you can't reliably roll back pollution of global variables within the same document.

I think you'll have to run them in separate documents (= <iframe>s) on different domains. No other way to prevent them from messing with each other with 100% certainty.

(The "different domains" thing is to prevent really malicious code from polluting the other scripts (as iframes on the same domain have access to each other, so a malicious script could be looking for other iframes to compromise.)

Answer 2

Please define you target environment. Within browser and having only filenames the only thing you can do is to download each script with XHR, treat it as string data, and eval it (yes, solution is as clumsy as it sounds). To prevent rogue script messing with your Global scope you need to use with statement:

var safeGlobal = {};
safeGlobal.isHoneyPot = true;   // whatever scripts might expect in Global scope
with ( safeGlobal ) {
  eval( scriptText );
}
delete safeGlobal;  // purge whatever pollution script leaves in Global scope

The other approach within browser is to use multiple windows or iframes, but this does not make the namespace flat, thus you will have to reference functions via window/iframe variables.

Answer 3

I often use this pattern.

(function(myNamespace, $, undefined) {

    //Public Method
    myNamespace.foo = function() {
        // ..
    };

    //Private Method
    function bar() {
        // ..
    }
}(window.myNamespace = window.myNamespace || {}, jQuery));

Because the third argument isn't provided, it is certain to be undefined.
If you use jQuery, it makes sure $ isn't set to something else (unless, of course, jQuery was set to something else).

Answer 4

.js files are just blocks of javascript that are included in the page. It's not difficult to document.write a script tag into the page based on whatever criteria you have. So, you can have a script that checks for some condition and then adds whatever external script you want, based on that condition.

However, in terms of their "independence" you have a bit of a problem (which is usually Javascript's critics primary one) which is that everything you toss into the page is global and visible to everything else. This is actually quite useful at times, but it does mean that you have to encapsulate your objects very carefully to keep them from bleeding all over one another.

So, if all these scripts are your own, you can control this by making sure that each set of tools is part of some larger object that is very unique. As for using frameworks like jQuery, you just have to be careful not to encroach on their objects. They took this into consideration, however, so, as long as you know what to look for, you should be ok.