javascript - Can I access variables from another file? - Stack Overflow

admin管理员组

文章数量:1129269

Is it possible to use a variable in a file called first.js inside another file called second.js?

first.js contains a variable called colorcodes.

Is it possible to use a variable in a file called first.js inside another file called second.js?

first.js contains a variable called colorcodes.

• javascript
• scope

Share Improve this question Follow edited Jan 31, 2017 at 4:26 Right leg 16.7k77 gold badges5555 silver badges8888 bronze badges asked Jul 14, 2010 at 8:10 SAKSAK 3,90077 gold badges2929 silver badges3838 bronze badges 3

• @Roki: For example, you could be loading data from another website, while the script to process them is on your site: <script src="http://datasource.example.net/first.js"></script><script src="second.js"></script> – Piskvor left the building Commented Jul 14, 2010 at 8:23
• the datasource site don't have a callback? what i mean: download second.js contains: ... function secondscriptFn(o) { //do something /w data; } ... download datasource.example.net/first.js?callback=secondscriptFn then first contain: secondscriptFn({back:"#fff",front:"#888",side:"#369"}); more controllable and robust than global scope versions, because you can control the first.js scope... – Roki Commented Jul 14, 2010 at 8:43
• 4 Just as a note if you are using jQuery and you are trying to do this. You need to make sure that you don't put the variable that you trying to access from the first file in the '$(document).ready()' function; otherwise it won't load properly, at least from my experience. – Collin McGuire Commented Dec 13, 2013 at 23:44

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 274

As Fermin said, a variable in the global scope should be accessible to all scripts loaded after it is declared. You could also use a property of window or (in the global scope) this to get the same effect.

// first.js
var colorCodes = {
  back  : "#fff",
  front : "#888",
  side  : "#369"
};

... in another file ...

// second.js
alert(colorCodes.back); // alerts `#fff`

... in your html file ...

<script type="text/javascript" src="first.js"></script> 
<script type="text/javascript" src="second.js"></script> 

You can export the variable from first file using export.

//first.js
const colorCode = {
    black: "#000",
    white: "#fff"
};
export { colorCode };

Then, import the variable in second file using import.

//second.js
import { colorCode } from './first.js'

export - MDN

Using Node.js you can export the variable via module.

//first.js
const colorCode = {
    black: "#000",
    white: "#fff"
};
module.exports = { colorCode };

Then, import the module/variable in second file using require.

//second.js
const { colorCode } = require('./first.js')

You can use the import and export aproach from ES6 using Webpack/Babel, but in Node.js you need to enable a flag, and uses the .mjs extension.

This should work - define a global variable in firstfile and access it from secondfile:

<script src="/firstfile.js"></script>
<script src="/secondfile.js"></script>

firstfile.js:

var colors = {
   text:'#000000',
   background:'#aaaaaa',
   something_else:'blue'
};

secondfile.js:

do_something_with(colors.background);

Note that the order in which you load the script files is significant for some browsers (IE6 for sure, maybe others)

I did like the answer above said, but it didn't work for me at first because I was declaring these variables inside jQuery $( document ).ready().

So make sure you declare your variables inside the <script> tag not somewhere else.

I came across amplify.js. It's really simple to use. To store a value, let's call it "myValue", you do:

amplify.store("myKey", "myValue")

And to access it, you do

amplify.store("myKey")

If you store your colorcodes in a global variable you should be able to access it from either javascript file.

I may be doing this a little differently. I'm not sure why I use this syntax, copied it from some book a long time ago. But each of my js files defines a variable. The first file, for no reason at all, is called R:

    var R = 
    { 
        somevar: 0,
        othervar: -1,

        init: function() {
          ...
        } // end init function

        somefunction: function(somearg) {
          ...
        }  // end somefunction

        ...

    }; // end variable R definition


    $( window ).load(function() {
       R.init();
    })

And then if I have a big piece of code that I want to segregate, I put it in a separate file and a different variable name, but I can still reference the R variables and functions. I called the new one TD for no good reason at all:

    var TD = 
    { 
        xvar: 0,
        yvar: -1,

        init: function() {
           ...
        } // end init function

        sepfunction: function() {
           ...
           R.somefunction(xvar);
           ...
        }  // end somefunction

        ...

    }; // end variable TD definition


    $( window ).load(function() {
       TD.init();
    })

You can see that where in the TD 'sepfunction' I call the R.somefunction. I realize this doesn't give any runtime efficiencies because both scripts to need to load, but it does help me keep my code organized.

本文标签： javascriptCan I access variables from another fileStack Overflow