web-dev-qa-db-fra.com

Comment déclarer une variable globale dans un fichier .js

J'ai besoin de quelques variables globales dont j'ai besoin en tout .js des dossiers.

Par exemple, considérons les 4 fichiers suivants:

  1. global.js
  2. js1.js
  3. js2.js
  4. js3.js

Est-il possible de déclarer 3 variables globales dans global.js et y accéder dans l’un des 3 autres .js fichiers considérant que je charge tous les 4 fichiers ci-dessus dans un document HTML?

Quelqu'un peut-il s'il vous plaît me dire si cela est possible ou y at-il un travail autour pour y parvenir?

javascriptglobal-variables
82
kp11

Il vous suffit de définir vos variables dans global.js en dehors d’un champ de fonction:

// global.js
var global1 = "I'm a global!";
var global2 = "So am I!";

// other js-file
function testGlobal () {
    alert(global1);
}

Pour vous assurer que cela fonctionne, vous devez inclure/link to global.js avant d'essayer d'accéder aux variables définies dans ce fichier:

<html>
    <head>
        <!-- Include global.js first -->
        <script src="/YOUR_PATH/global.js" type="text/javascript"></script>
        <!-- Now we can reference variables, objects, functions etc. 
             defined in global.js -->
        <script src="/YOUR_PATH/otherJsFile.js" type="text/javascript"></script>
    </head>
    [...]
</html>

Vous pouvez, bien entendu, créer un lien dans les balises de script juste avant la balise <body> -tag si vous ne souhaitez pas que le chargement de fichiers js interrompt le chargement initial de la page.

90
PatrikAkerstrand

L'approche recommandée est:

window.greeting = "Hello World!"

Vous pouvez ensuite y accéder dans n'importe quelle fonction:

function foo() {

   alert(greeting); // Hello World!
   alert(window["greeting"]); // Hello World!
   alert(window.greeting); // Hello World! (recommended)

}

Cette approche est préférée pour deux raisons.

  1. L'intention est explicite. L'utilisation du mot clé var peut facilement conduire à la déclaration de vars globaux destinés à être locaux ou inversement. Ce type de champ variable est une source de confusion pour de nombreux développeurs Javascript. Donc, en règle générale, je m'assure que toutes les déclarations de variable sont précédées du mot-clé var ou du préfixe window.

  2. Vous standardisez également cette syntaxe pour lire les variables de cette manière, ce qui signifie qu'un var de portée locale n'empiète pas sur le var global ou vice versa. Par exemple, ce qui se passe ici est ambigu:

 greeting = "Aloha";

 function foo() {
     greeting = "Hello"; // overrides global!
 }

 function bar(greeting) {
   alert(greeting);
 }

 foo();
 bar("Howdy"); // does it alert "Hello" or "Howdy" ?

Cependant, ceci est beaucoup plus propre et moins sujet aux erreurs (vous n'avez pas vraiment besoin de vous souvenir de toutes les règles de portée variables):

 function foo() {
     window.greeting = "Hello";
 }

 function bar(greeting) {
   alert(greeting);
 }

 foo();
 bar("Howdy"); // alerts "Howdy"
85
aleemb

L'as tu essayé?

Si tu fais:

var HI = 'Hello World';

Dans global.js. Et ensuite faire:

alert(HI);

Dans js1.js ça va alerter bien. Vous devez juste inclure global.js avant le reste du document HTML.

Le seul problème est que vous devez le déclarer dans la portée de la fenêtre (pas à l'intérieur d'une fonction).

Vous pouvez simplement nixer la partie var et la créer de cette façon, mais ce n'est pas une bonne pratique.

7
Paolo Bergantino

Comme mentionné ci-dessus, l'utilisation de la portée la plus haute dans votre fichier de script pose des problèmes. Voici un autre problème: le fichier de script peut être exécuté à partir d'un contexte autre que le contexte global dans un environnement d'exécution.

Il a été proposé d'assigner directement le global à window. Mais cela dépend aussi de l'exécution et ne fonctionne pas dans Node etc.). La gestion des variables nécessite une attention particulière et un effort supplémentaire, peut-être qu’elles le corrigeront dans les futures versions d’ECMS!

Pour le moment, je recommanderais quelque chose comme ceci pour prendre en charge une gestion globale appropriée pour tous les environnements d'exécution:

/**
 * Exports the given object into the global context.
 */
var exportGlobal = function(name, object) {
    if (typeof(global) !== "undefined")  {
        // Node.js
        global[name] = object;
    }
    else if (typeof(window) !== "undefined") {
        // JS with GUI (usually browser)
        window[name] = object;
    }
    else {
        throw new Error("Unkown run-time environment. Currently only browsers and Node.js are supported.");
    }
};


// export exportGlobal itself
exportGlobal("exportGlobal", exportGlobal);

// create a new global namespace
exportGlobal("someothernamespace", {});

C'est un peu plus typé, mais cela rend votre gestion globale des variables à l'épreuve du temps.

Avertissement: Une partie de cette idée m'est venue lorsque j'ai regardé les versions précédentes de stacktrace.js .

Je pense que l'on peut également utiliser Webpack ou d'autres outils pour une détection plus fiable et moins piratée de l'environnement d'exécution.

5
Domi

Oui, vous pouvez y accéder. Vous devez les déclarer dans "l'espace public" (en dehors de toute fonction) en tant que:

var globalvar1 = 'value';

Vous pourrez y accéder ultérieurement, également dans d'autres fichiers.

2
Ropstah