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

Question 1

J'ai besoin de quelques variables globales dont j'ai besoin dans tous les .jsfichiers.

Par exemple, considérez les 4 fichiers suivants:

global.js
js1.js
js2.js
js3.js

Existe-t-il un moyen de déclarer 3 variables globales dans global.jset d'y accéder dans l'un des 3 autres .jsfichiers en considérant que je charge les 4 fichiers ci-dessus dans un document HTML?

Quelqu'un peut-il me dire si cela est possible ou y a-t-il une solution pour y parvenir?

Question 2

Définissez simplement vos variables dans global.js en dehors d'une portée 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 / lien vers 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 sûr créer un lien dans les balises de script juste avant la balise de fermeture <body> si vous ne voulez pas que le chargement des fichiers js interrompe le chargement initial de la page.

Question 3

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.

L'intention est explicite. L'utilisation du varmot - clé peut facilement conduire à déclarer des globaux varsdestinés à être locaux ou vice versa. Ce type de portée variable est un point de confusion pour de nombreux développeurs Javascript. Donc, en règle générale, je m'assure que toutes les déclarations de variables sont précédées du mot-clé varou du préfixe window.
Vous standardisez également cette syntaxe pour lire les variables de cette manière, ce qui signifie qu'une portée locale varne coupe pas le global varou 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, c'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 des variables):

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

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

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

Question 4

L'as tu essayé?

Si tu fais:

var HI = 'Hello World';

Dans global.js. Et puis faites:

alert(HI);

Dans js1.jscela l'alertera très bien. Il vous suffit d'inclure global.jsavant le reste dans le document HTML.

Le seul problème est que vous devez le déclarer dans la portée de la fenêtre (et non dans aucune fonction).

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

Question 5

Comme mentionné ci-dessus, il y a des problèmes avec l'utilisation de la portée la plus élevée dans votre fichier de script. Voici un autre problème: le fichier de script peut être exécuté à partir d'un contexte qui n'est pas le contexte global dans un environnement d'exécution.

Il a été proposé d'assigner windowdirectement le global . Mais cela dépend également de l' exécution et ne fonctionne pas dans Node, etc. Cela montre que la gestion des variables globales portables nécessite une attention particulière et des efforts supplémentaires. Peut-être qu'ils le corrigeront dans les futures versions d'ECMS!

Pour l'instant, je recommanderais quelque chose comme celui-ci 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 pérenne.

Avis de non-responsabilité: Une partie de cette idée m'est venue en regardant les versions précédentes de stacktrace.js .

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

Question 6

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

var globalvar1 = 'value';

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