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
.
This question is related to
javascript
scope
I did like what answer above said but although, it didn't worked with me
because I was declaring
these variables inside
JQuery $( document ).ready()
so make sure you declare your variables inside the
<script>
tag not somewhere else
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 is quite an old question, but I'm going to provide a modern solution that's been available since ES6 - export and import:
In first.js
:
let colorcodes = <whatever>;
export default colorcodes //or a different export statement
In second.js
:
import colorcodes from <path-to-first.js> //or a matching import statement
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'
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 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.
One best way is by using window.INITIAL_STATE
<script src="/firstfile.js">
// first.js
window.__INITIAL_STATE__ = {
back : "#fff",
front : "#888",
side : "#369"
};
</script>
<script src="/secondfile.js">
//second.js
console.log(window.__INITIAL_STATE__)
alert (window.__INITIAL_STATE__);
</script>
If you store your colorcodes in a global variable you should be able to access it from either javascript file.
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")
Source: Stackoverflow.com