webentwicklung-frage-antwort-db.com.de

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

Ich benötige ein paar globale Variablen, die ich in allen .js - Dateien 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 in global.js Zu deklarieren und in einer der anderen 3 .js Dateien 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 gibt es eine Lösung, um dies zu erreichen?

82
kp11

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/link zu global.js einfügen, 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 natürlich die Skript-Tags direkt vor dem schließenden <body> -Tag einbinden, wenn Sie nicht möchten, dass das Laden von js-Dateien das Laden der ersten Seite unterbricht.

90

Der empfohlene Ansatz ist:

window.greeting = "Hello World!"

Sie können dann in jeder 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 Schlüsselworts var kann leicht dazu führen, dass globales vars deklariert wird, das lokal sein soll, oder umgekehrt. Diese Art des Variablenscoping ist für viele Javascript-Entwickler ein Grund zur Verwirrung. Als allgemeine Regel stelle ich sicher, dass allen Variablendeklarationen das Schlüsselwort var oder das Präfix window vorangestellt wird.

  2. Sie standardisieren diese Syntax auch für das Lesen der Variablen auf diese Weise, was bedeutet, dass ein lokal begrenzter var den globalen var nicht überlastet oder umgekehrt. Zum Beispiel ist das, was hier passiert, mehrdeutig:

 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 alle Regeln für den Gültigkeitsbereich von Variablen merken):

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

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

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

Hast du es versucht?

Wenn Sie tun:

var HI = 'Hello World';

Im global.js. Und dann mache:

alert(HI);

Im js1.js es wird es in Ordnung warnen. Sie müssen nur global.js vor dem Rest im HTML-Dokument.

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

Sie könnten einfach den Teil var nixen und sie auf diese Weise erstellen, aber es ist keine gute Praxis.

7

Wie oben erwähnt, gibt es Probleme bei der Verwendung des Bereichs mit der höchsten Priorität in Ihrer Skriptdatei. Hier ist ein weiteres Problem: Die Skriptdatei wird möglicherweise in einem Kontext ausgeführt, der in einigen Laufzeitumgebungen nicht der globale Kontext ist.

Es wurde vorgeschlagen, die globale Variable direkt window zuzuweisen. Das ist aber auch laufzeitabhängig und funktioniert nicht in Node usw. Es zeigt das portable global Das Variablenmanagement erfordert einige sorgfältige Überlegungen und zusätzliche Anstrengungen. Vielleicht werden sie es in zukünftigen ECMS-Versionen beheben!

Im Moment würde ich Folgendes 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 etwas typischer, 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 gehe davon aus, dass man auch Webpack oder andere Tools verwenden kann, um eine zuverlässigere und weniger hackige Erkennung der Laufzeitumgebung zu erhalten.

5
Domi

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

var globalvar1 = 'value';

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

2
Ropstah