So deklarieren Sie eine globale Variable in einer .js-Datei

86

Ich benötige einige globale Variablen, die ich in allen .jsDateien benötige .

Betrachten Sie beispielsweise die folgenden 4 Dateien:

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

Gibt es eine Möglichkeit, 3 globale Variablen zu deklarieren global.jsund in einer der anderen 3 .jsDateien darauf zuzugreifen, wenn ich alle oben genannten 4 Dateien in ein HTML-Dokument lade?

Kann mir bitte jemand sagen, ob dies möglich ist oder ob es eine Lösung gibt, um dies zu erreichen?

javascript global-variables kp11
quelle

Antworten:

94

Definieren Sie einfach Ihre Variablen in global.js außerhalb eines Funktionsumfangs:

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

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

Um sicherzustellen, dass dies funktioniert, müssen Sie global.js einschließen / verknüpfen, bevor Sie versuchen, auf in dieser Datei definierte Variablen zuzugreifen:

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

Sie können die Skript-Tags natürlich direkt vor dem schließenden <body> -Tag verknüpfen, wenn Sie nicht möchten, dass das Laden von js-Dateien das anfängliche Laden der Seite unterbricht.

PatrikAkerstrand
quelle
4
Obwohl diese Antwort richtig ist, würde ich Ihnen empfehlen, das Scoping von Google Javascript-Variablen zu verwenden, um ein besseres Verständnis zu erhalten und möglicherweise zu vermeiden, dass die Dinge genau so ausgeführt werden.
Aleemb
1
Einverstanden. Ich versuche immer, alle Funktionen und Variablen in einem gemeinsamen "Namespace" zu erfassen, um Unordnung und Konflikte zu vermeiden. Normalerweise nenne ich es eine Abkürzung für das Projekt oder die Firma.
PatrikAkerstrand
Diese Antwort und die anderen mögen sie nicht, weil davon ausgegangen wird, dass die globale Variable in einem globalen Bereich erstellt wird, und es ist auch erforderlich, dass die erste Erwähnung der Variablen im globalen Bereich erfolgt, bevor alle anderen Erwähnungen erfolgen.
Andrew
1
@ Andrew Diese Antwort wurde vor acht Jahren geschrieben. In jeder Hinsicht war es damals richtig. Wenn Sie tatsächlich einen Beitrag leisten möchten, möchten Sie möglicherweise stattdessen eine Bearbeitung vorschlagen?
PatrikAkerstrand
@PatrikAkerstrand Die Datierung macht eigentlich keinen Unterschied. Die anderen Antworten, die ein globales Objekt verwenden, sind ausreichend. Ich erklärte, warum das nicht so ist.
Andrew
89

Der empfohlene Ansatz ist:

window.greeting = "Hello World!"

Sie können dann mit einer beliebigen Funktion darauf zugreifen:

function foo() {

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

}

Dieser Ansatz wird aus zwei Gründen bevorzugt.

  1. Die Absicht ist explizit. Die Verwendung des varSchlüsselworts kann leicht dazu führen, varsdass global deklariert wird , die lokal sein sollten, oder umgekehrt. Diese Art des variablen Scoping ist für viele Javascript-Entwickler ein Punkt der Verwirrung. Daher stelle ich in der Regel sicher, dass allen Variablendeklarationen das Schlüsselwort varoder das Präfix vorangestellt ist window.

  2. Sie standardisieren diese Syntax auch für das Lesen der Variablen auf diese Weise, was bedeutet, dass ein lokaler Gültigkeitsbereich varnicht den globalen Bereich beeinträchtigt varoder umgekehrt. Zum Beispiel ist das, was hier passiert, nicht eindeutig:

 

 greeting = "Aloha";

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

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

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

Dies ist jedoch viel sauberer und weniger fehleranfällig (Sie müssen sich nicht wirklich an alle Regeln für den variablen Gültigkeitsbereich erinnern):

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

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

 foo();
 bar("Howdy"); // alerts "Howdy"
Aleemb
quelle
Das Anhängen von Variablen an das Fenster sollte in allen Browsern funktionieren (und ist auch der Ansatz, den ich verfolge, +1!).
Dandy
1
@ Dan, wenn Sie "var testvar = 'hello';" Außerhalb einer Funktion wird es automatisch zum Fensterobjekt hinzugefügt und Sie können mit "window.testvar" darauf zugreifen.
zkent
1
@zkent, das stimmt, aber die Verwendung des Window-Objekts ist immer noch besser, da Sie Ihren Code später möglicherweise in etwas wie Kaffee verwandeln möchten.
Nami WANG
Ist es besser, Window als Document Prefix zu verwenden?
Andrew
7

Hast du es versucht?

Wenn Sie tun:

var HI = 'Hello World';

In global.js. Und dann mache:

alert(HI);

Darin js1.jswird es gut alarmieren. Sie müssen nur global.jsvor dem Rest in das HTML-Dokument aufnehmen.

Der einzige Haken ist, dass Sie es im Bereich des Fensters deklarieren müssen (nicht innerhalb von Funktionen).

Sie könnten das varTeil einfach nixen und auf diese Weise erstellen, aber es ist keine gute Praxis.

Paolo Bergantino
quelle
6

Wie oben erwähnt, gibt es Probleme bei der Verwendung des obersten Bereichs in Ihrer Skriptdatei. Hier ist ein weiteres Problem: Die Skriptdatei wird möglicherweise in einem Kontext ausgeführt, der in einer Laufzeitumgebung nicht der globale Kontext ist.

Es wurde vorgeschlagen, das Globale windowdirekt zuzuweisen . Dies ist jedoch auch zur Laufzeit abhängig und funktioniert nicht in Node usw. Dies zeigt, dass die Verwaltung tragbarer globaler Variablen einige sorgfältige Überlegungen und zusätzlichen Aufwand erfordert. Vielleicht werden sie es in zukünftigen ECMS-Versionen beheben!

Im Moment würde ich so etwas empfehlen, um eine ordnungsgemäße globale Verwaltung für alle Laufzeitumgebungen zu unterstützen:

/**
 * 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", {});

Es ist ein bisschen mehr Tipparbeit, aber es macht Ihr globales Variablenmanagement zukunftssicher.

Haftungsausschluss: Ein Teil dieser Idee kam mir, als ich mir frühere Versionen von stacktrace.js ansah .

Ich denke, man kann auch Webpack oder andere Tools verwenden, um eine zuverlässigere und weniger hackige Erkennung der Laufzeitumgebung zu erhalten.

Domi
quelle
2
GLOBAList jetzt veraltet und globalsollte stattdessen verwendet werden.
Thomas
2

Ja, Sie können darauf zugreifen. Sie sollten sie im "öffentlichen Raum" (außerhalb aller Funktionen) wie folgt deklarieren:

var globalvar1 = 'value';

Sie können später auch in anderen Dateien darauf zugreifen.

Ropstah
quelle