web-dev-qa-db-fra.com

Puis-je accéder aux variables d'un autre fichier?

Est-il possible d'utiliser une variable dans un fichier appelé first.js dans un autre fichier appelé second.js?

first.js contient une variable appelée colorcodes.

javascriptscope
143
SAK

Comme l'a dit Fermin, une variable de la portée globale devrait être accessible à tous les scripts chargés après sa déclaration. Vous pouvez également utiliser une propriété de window ou (dans la portée globale) this pour obtenir le même effet.

// first.js
var colorCodes = {

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

};

... dans un autre fichier ...

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

... dans votre fichier html ...

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

Vous pouvez exporter la variable du premier fichier en utilisant export .

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

Ensuite, importez la variable dans le deuxième fichier en utilisant import .

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

export - MDN

21
Germa Vinsmoke

Cela devrait fonctionner - définissez une variable globale dans firstfile et accédez-y à partir de 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);

Notez que l'ordre dans lequel vous chargez les fichiers de script est important pour certains navigateurs (IE6 bien sûr, peut-être d'autres)

13
Piskvor

J'ai aimé ce que réponse ci-dessus mais bien que cela n'ait pas fonctionné avec moi

parce que j'étais declaring ces variables inside JQuery $( document ).ready()

alors assurez-vous de déclarer vos variables à l'intérieur de la balise <script> pas ailleurs

11
Basheer AL-MOMANI

Je suis tombé sur amplify.js . C'est vraiment simple à utiliser. Pour stocker une valeur, appelons-la "myValue", vous faites:

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

Et pour y accéder, vous faites

amplify.store("myKey")
4
Ben Leitner

Si vous stockez vos codes de couleur dans une variable globale, vous devriez pouvoir y accéder à partir d'un autre fichier javascript.

2
Fermin

Je peux le faire un peu différemment. Je ne suis pas sûr de savoir pourquoi j'utilise cette syntaxe, copiée depuis un livre il y a longtemps. Mais chacun de mes fichiers js définit une variable. Le premier fichier, sans aucune raison, s'appelle 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();
    })

Et puis si j'ai un gros morceau de code que je veux séparer, je le mets dans un fichier séparé et un nom de variable différent, mais je peux toujours faire référence aux variables et fonctions R. J'ai appelé le nouveau TD sans raison valable:

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

Vous pouvez voir que, dans la TD 'fonction', j'appelle la fonction R.. Je me rends compte que cela ne donne aucune efficacité d'exécution car les deux scripts doivent être chargés, mais cela m'aide à garder mon code organisé.

2
Alan

En utilisant Node.js, vous pouvez exporter la variable via le module.

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

Ensuite, importez le module/la variable dans le deuxième fichier en utilisant require.

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

Vous pouvez utiliser les approches import et export d'ES6 à l'aide de Webpack/Babel, mais vous devez utiliser Node.js activer un indicateur et utiliser le fichier .mjs extension.

0
Xinton

Un meilleur moyen est d’utiliser 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>
0
Karan Shaw