¿Puedo acceder a variables desde otro archivo?

¿Es posible usar una variable en un archivo llamado first.jsdentro de otro archivo llamado second.js?

first.jscontiene una variable llamada colorcodes.

Como dijo Fermín, una variable en el ámbito global debería ser accesible para todos los scripts cargados después de que se declare. También puede usar una propiedad de windowo (en el ámbito global) thispara obtener el mismo efecto.

// first.js
var colorCodes = {

  back  : "#fff",
  front : "#888",
  side  : "#369"

};

... en otro archivo ...

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

... en su archivo html ...

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

Puede exportar la variable desde el primer archivo usando exportar .

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

Luego, importe la variable en el segundo archivo usando import .

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

exportación - MDN

Me gustó lo que dijo la respuesta anterior pero, aunque no funcionó conmigo

porque yo era declaringestas variables insideJQuery$( document ).ready()

así que asegúrese de declarar sus variables dentro de la <script>etiqueta, no en otro lugar

Esto debería funcionar: defina una variable global en el primer archivo y acceda desde el segundo archivo:

<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);

Tenga en cuenta que el orden en el que carga los archivos de script es significativo para algunos navegadores (IE6 seguro, tal vez otros)

Usando Node.js puede exportar la variable a través del módulo.

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

Luego, importe el módulo / variable en el segundo archivo usando require.

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

Puede usar el importy el exportacercamiento desde ES6 usando Webpack / Babel, pero en Node.js necesita habilitar un indicador, y usa la extensión .mjs.

Me encontré con amplify.js . Es realmente simple de usar. Para almacenar un valor, llamémosle "myValue", usted hace:

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

Y para acceder, lo haces

amplify.store("myKey")

Si almacena sus códigos de color en una variable global, debería poder acceder a ellos desde cualquier archivo javascript.

Puede que esté haciendo esto un poco diferente. No estoy seguro de por qué uso esta sintaxis, la copié de algún libro hace mucho tiempo. Pero cada uno de mis archivos js define una variable. El primer archivo, sin ningún motivo, se llama 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();
    })

Y luego, si tengo un gran fragmento de código que quiero segregar, lo pongo en un archivo separado y un nombre de variable diferente, pero aún puedo hacer referencia a las variables y funciones de R. Llamé al nuevo TD sin ninguna buena razón:

    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();
    })

Puede ver que en la 'sepfunción' de TD llamo a la función R. Me doy cuenta de que esto no brinda ninguna eficiencia de tiempo de ejecución porque ambos scripts deben cargarse, pero me ayuda a mantener mi código organizado.

Una mejor manera es mediante el uso de la ventana. ESTADO INICIAL

<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>