How Do You Load 2 Javascript Files That Could Have Common Variables Between Them And Accessing It On A Html Page?

I got this HTML page. I wanna access variables from 2 javascript files that has common variables. I gotta get values from these variables pertaining to the respective javascript. I

Solution 1:

You need to namespace your variables or use variables with different names. What it sounds like you're doing is the equivalent of:

var x = 'foo';
var x = 'bar';

console.log(x);

    > bar

Which should make sense. If you use namespaces though, things will work better for you. Consider two files, script-1.js and script-2.js:

// script-1.jsvar s1 = {
    x:'foo'
}

// script-2.jsvar s2 = {
    x:'bar'
}

...then...

console.log(s1.x);

    > foo

console.log(s2.x);

    > bar

That's a rather trite example, of course.

EDIT

If you can't change the files themselves do this - save off the values to some other name/object after loading script-1 but before loading script-2:

<script type="text/javascript" src="script-1.js"></script>

<scripttype="text/javascript">var s1 = {
        // Save off values herex:x,
        y:y
    }
</script><scripttype="text/javascript"src="script-2.js"></script>// Then...console.log(s1.x);  // will output the value from script-1.jsconsole.log(x);     // will output the value from script-2.js

Not pretty, but should work fine.

Solution 2:

If your problem is that your variables are colliding, and you want their values maintained separately, you should wrap the code in each file in a closure. Here you can apply the Immediately-Invoked Function Expression pattern.

(function() {
    // your code here// all of it!
}());

This prevents global variables altogether, and if you don't need to share anything across files, this is the way to go.

If you need to create a shared global, declare it this way:

var x = x || {}; // empty object as an example value

Do that at the beginning of each file. If x is new, it will be declared. If it has already been declared, it will retain its previous value.

You can do the same thing using namespaces, which I highly recommend as an easy way to reduce global variables.

var APP = APP || {};

APP.x = APP.x || {}; // example property of APP, in this case initializing an object

You can always combine techniques too. Setup a namespace object outside a closure, and access them within. This way you only expose one global and limit the scope on everything else.

I hope that helps!

Solution 3:

If you have some control over the javascript files, Madbreak's answer is they way to go: whenever you define a javascript library you should be using anonymous functions and namespaces to avoid collisions.

Otherwise, though, you could load them asynchronously and eval them one at a time (There may be a less evil way to do this, but I'm not aware of it) - that way you can use the first in the callback of the download before it is overwritten by the second. If you need them both long term, though, you might be out of luck.

If you need one to run before the other, though remember that you'll need to load the second in the callback of the first download (where doesn't matter unless you're doing more async stuff) otherwise it's a race condition as to which will go first.