Posso accedere alle variabili da un altro file?

È possibile utilizzare una variabile in un file chiamato first.jsall'interno di un altro file chiamato second.js?

first.jscontiene una variabile chiamata colorcodes.

Come ha detto Fermin, una variabile nell'ambito globale dovrebbe essere accessibile a tutti gli script caricati dopo che è stata dichiarata. È inoltre possibile utilizzare una proprietà windowo (nell'ambito globale) thisper ottenere lo stesso effetto.

// first.js
var colorCodes = {

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

};

... in un altro file ...

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

... nel tuo file html ...

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

Puoi esportare la variabile dal primo file usando export .

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

Quindi, importa la variabile nel secondo file usando import .

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

esportazione - MDN

Mi è piaciuta la risposta di cui sopra, ma sebbene non abbia funzionato con me

perché ero declaringqueste variabili insideJQuery$( document ).ready()

quindi assicurati di dichiarare le tue variabili all'interno del <script>tag non altrove

Questo dovrebbe funzionare: definire una variabile globale nel primo file e accedervi dal secondo file:

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

Si noti che l'ordine in cui si caricano i file di script è significativo per alcuni browser (IE6 sicuramente, forse altri)

Utilizzando Node.js è possibile esportare la variabile tramite il modulo.

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

Quindi, importare il modulo / la variabile nel secondo file usando request.

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

Puoi usare importe exportaproach da ES6 usando Webpack / Babel, ma in Node.js devi abilitare un flag e usare l'estensione .mjs.

Mi sono imbattuto in amplify.js . È davvero semplice da usare. Per memorizzare un valore, chiamiamolo "myValue", si fa:

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

E per accedervi, lo fai

amplify.store("myKey")

Se memorizzi i tuoi colorcodes in una variabile globale dovresti essere in grado di accedervi da entrambi i file javascript.

Potrei farlo in modo leggermente diverso. Non sono sicuro del motivo per cui utilizzo questa sintassi, l'ho copiata da qualche libro molto tempo fa. Ma ognuno dei miei file js definisce una variabile. Il primo file, per nessun motivo, si chiama 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();
    })

E poi se ho un grosso pezzo di codice che voglio segregare, lo metto in un file separato e con un nome di variabile diverso, ma posso ancora fare riferimento alle variabili R e alle funzioni. Ho chiamato il nuovo TD senza una buona ragione:

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

Potete vedere che in "sepfunction" del TD chiamo R.somefunction. Mi rendo conto che questo non fornisce alcuna efficienza di runtime perché entrambi gli script devono essere caricati, ma mi aiuta a mantenere organizzato il mio codice.

Un modo migliore è usare la finestra. STATO INIZIALE

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