Globale Variablen in Javascript über mehrere Dateien hinweg

130

Ein Teil meines JavaScript-Codes befindet sich in einer externen Datei namens helpers.js. In dem HTML-Code, der diesen JavaScript-Code aufruft, muss ich wissen, ob eine bestimmte Funktion von helpers.js aufgerufen wurde.

Ich habe versucht, eine globale Variable zu erstellen, indem ich Folgendes definierte:

var myFunctionTag = true;

Im globalen Bereich sowohl in meinem HTML-Code als auch in helpers.js.

Hier ist, wie mein HTML-Code aussieht:

<html>
...
<script type='text/javascript' src='js/helpers.js'></script>    
...
<script>
  var myFunctionTag = false;
  ...
  //I try to use myFunctionTag here but it is always false, even though it has been se t to 'true' in helpers.js
</script>

Ist das, was ich versuche, überhaupt machbar?

javascript scope global-variables global Goro
quelle
1
Nun, Sie haben gerade gesetzt , es zu falsch in dem zweiten <script>Tag - Block. Ich habe gerade zwei verschiedene Ansätze ausprobiert (ohne die Variable vor der Datei helpers.js zu deklarieren) und beide haben funktioniert. Ich werde eine Antwort posten, aber es scheint, dass in Ihrer Frage einige wichtige Informationen fehlen müssen.
Stephen P
window.onload = function () {// Code starten} Wäre die beste Lösung - Und das spricht Slowpoke :)
Schöning

Antworten:

125

Sie müssen die Variable deklarieren, bevor Sie die Datei helpers.js einfügen. Erstellen Sie einfach ein Skript-Tag über dem Include für helpers.js und definieren Sie es dort.

<script type='text/javascript' > 
  var myFunctionTag = false; 
</script>
<script type='text/javascript' src='js/helpers.js'></script>     
... 
<script type='text/javascript' > 
  // rest of your code, which may depend on helpers.js
</script>
Tvanfosson
quelle
9
funktioniert bei mir nicht, weil beim Versuch, von einem anderen in ein anderes HTML geladenen js zuzugreifen, die Variable nicht deklariert ist
ACV
16

Die Variable kann in der .jsDatei deklariert und einfach in der HTML-Datei referenziert werden. Meine Version von helpers.js:

var myFunctionWasCalled = false;

function doFoo()
{
    if (!myFunctionWasCalled) {
        alert("doFoo called for the very first time!");
        myFunctionWasCalled = true;
    }
    else {
        alert("doFoo called again");
    }
}

Und eine Seite zum Testen:

<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="helpers.js"></script>
</head>

<body>


<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>

<script type="text/javascript">doFoo();</script>

<p>Some stuff in between</p>

<script type="text/javascript">doFoo();</script>

<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>

</body>
</html>

Sie werden sehen, dass der Test alert()zwei verschiedene Dinge anzeigt und der auf die Seite geschriebene Wert beim zweiten Mal unterschiedlich ist.

Stephen P.
quelle
15

OK, Leute, hier ist auch mein kleiner Test. Ich hatte ein ähnliches Problem und beschloss, drei Situationen zu testen:

  1. Eine HTML-Datei, eine externe JS-Datei ... funktioniert das überhaupt - können Funktionen über eine globale Variable kommunizieren?
  2. Zwei HTML-Dateien, eine externe JS-Datei, ein Browser, zwei Registerkarten: Werden sie über die globale Variable stören?
  3. Eine HTML-Datei, die von zwei Browsern geöffnet wird, funktioniert sie und stören sie?

Alle Ergebnisse waren wie erwartet.

  1. Es klappt. Die Funktionen f1 () und f2 () kommunizieren über globales var (var befindet sich in der externen JS-Datei, nicht in der HTML-Datei).
  2. Sie stören nicht. Anscheinend wurden für jede Browser-Registerkarte und jede HTML-Seite unterschiedliche Kopien der JS-Datei erstellt.
  3. Alles funktioniert wie erwartet unabhängig.

Anstatt in Tutorials zu stöbern, fand ich es einfacher, es auszuprobieren, also tat ich es. Mein Fazit: Wenn Sie eine externe JS-Datei in Ihre HTML-Seite aufnehmen, wird der Inhalt des externen JS vor dem Rendern der Seite in Ihre HTML-Seite "kopiert / eingefügt". Oder in Ihre PHP-Seite, wenn Sie so wollen. Bitte korrigieren Sie mich, wenn ich hier falsch liege.Danke.

Meine Beispieldateien folgen:

EXTERNE JS:

var global = 0;

function f1()
{
    alert('fired: f1');
    global = 1;
    alert('global changed to 1');
}

function f2()
{
    alert('fired f2');
    alert('value of global: '+global);
}

HTML 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>

HTML 2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index2.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>
Martin
quelle
1
HTML 1 und HTML 2 sind identisch (mit Ausnahme des Seitentitels). Trotzdem habe ich zwei Dateien erstellt, um sie physisch zu trennen.
Martin
1

Ich denke, Sie sollten "lokalen Speicher" anstelle von globalen Variablen verwenden.

Wenn Sie befürchten, dass "lokaler Speicher" in sehr alten Browsern möglicherweise nicht unterstützt wird, sollten Sie ein vorhandenes Plug-In verwenden, das die Verfügbarkeit von "lokalem Speicher" überprüft und andere Methoden verwendet, wenn dieser nicht verfügbar ist.

Ich habe http://www.jstorage.info/ verwendet und bin bisher damit zufrieden.

paulo62
quelle
1

Sie können ein JSON-Objekt wie folgt erstellen:

globalVariable={example_attribute:"SomeValue"};

in fileA.js

Und greifen Sie von fileB.js darauf zu wie: globalVariable.example_attribute

Partizanos
quelle
1

Hallo, um Werte von einer JS-Datei an eine andere JS-Datei zu übergeben, können wir das lokale Speicherkonzept verwenden

<body>
<script src="two.js"></script>
<script src="three.js"></script>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>

Two.js Datei

function myFunction() {
var test =localStorage.name;

 alert(test);
}

Three.js-Datei

localStorage.name = 1;
Sajith
quelle
1

Wenn Sie den Knoten verwenden:

  1. Erstellen Sie eine Datei, um den Wert zu deklarieren. Sagen wir, sie heißt values.js:
export let someValues = {
  value1: 0
}

Importieren Sie es dann einfach nach Bedarf oben in jede Datei, in der es verwendet wird (z. B. file.js):

import { someValues } from './values'

console.log(someValues);
Jared Wilber
quelle
-1

// Javascript-Datei 1

localStorage.setItem('Data',10);

// Javascript Datei 2

var number=localStorage.getItem('Data');

Vergessen Sie nicht, Ihre JS-Dateien in HTML zu verlinken :)

MrJ
quelle