Globale variabelen in Javascript over meerdere bestanden

Een groot deel van mijn JavaScript-code staat in een extern bestand met de naam helpers.js. In de HTML die deze JavaScript-code aanroept, moet ik weten of een bepaalde functie van helpers.js is aangeroepen.

Ik heb geprobeerd een globale variabele te maken door het volgende te definiëren:

var myFunctionTag = true;

In globaal bereik zowel in mijn HTML-code als in helpers.js.

Dit is hoe mijn html-code eruitziet:

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

Is wat ik probeer te doen zelfs haalbaar?


Antwoord 1, autoriteit 100%

U moet de variabele declareren voordat u het bestand helpers.js opneemt. Maak eenvoudig een scripttag boven de include voor helpers.js en definieer deze daar.

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

Antwoord 2, autoriteit 12%

De variabele kan worden gedeclareerd in het .js-bestand en er kan eenvoudig naar worden verwezen in het HTML-bestand.
Mijn versie van helpers.js:

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

En een pagina om het te 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>

Je zult zien dat de test alert()twee verschillende dingen zal weergeven, en de waarde die naar de pagina wordt geschreven zal de tweede keer anders zijn.


Antwoord 3, autoriteit 12%

Ok, jongens, hier is ook mijn kleine test. Ik had een soortgelijk probleem, dus besloot ik 3 situaties uit te proberen:

  1. Eén HTML-bestand, één extern JS-bestand… werkt het überhaupt – kunnen functies communiceren via een globale var?
  2. Twee HTML-bestanden, één extern JS-bestand, één browser, twee tabbladen: zullen ze interfereren via de globale var?
  3. Eén HTML-bestand, geopend door 2 browsers, zal het werken en zullen ze interfereren?

Alle resultaten waren zoals verwacht.

  1. Het werkt. Functies f1() en f2() communiceren via globale var (var staat in het externe JS-bestand, niet in HTML-bestand).
  2. Ze bemoeien zich niet. Er zijn blijkbaar verschillende kopieën van het JS-bestand gemaakt voor elk browsertabblad, elke HTML-pagina.
  3. Alles werkt onafhankelijk, zoals verwacht.

In plaats van door tutorials te bladeren, vond ik het gemakkelijker om het uit te proberen, dus dat deed ik. Mijn conclusie: wanneer je een extern JS-bestand in je HTML-pagina opneemt, wordt de inhoud van de externe JS “kopieer/plakt” in je HTML-pagina voordat de pagina wordt weergegeven. Of naar je PHP-pagina als je wilt. Corrigeer me als ik het hier mis heb.Thanx.

Mijn voorbeeldbestanden volgen:

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>

Antwoord 4, autoriteit 2%

//Javascript-bestand 1

localStorage.setItem('Data',10);

//Javascript-bestand 2

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

Vergeet niet je JS-bestanden in html te linken 🙂


Antwoord 5

Hallo, om waarden van het ene js-bestand naar het andere js-bestand door te geven, kunnen we het lokale opslagconcept gebruiken

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

Twee.js-bestand

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

Drie.js-bestand

localStorage.name = 1;

Antwoord 6

Als je node gebruikt:

  1. Maak een bestand aan om waarde te declareren, bijvoorbeeld values.js:
export let someValues = {
  value1: 0
}

Importeer het vervolgens indien nodig bovenaan elk bestand waarin het wordt gebruikt (bijv. file.js):

import { someValues } from './values'
console.log(someValues);

Antwoord 7

Ik denk dat je “lokale opslag” zou moeten gebruiken in plaats van globale variabelen.

Als je bang bent dat “lokale opslag” mogelijk niet wordt ondersteund in zeer oude browsers, overweeg dan een bestaande plug-in te gebruiken die de beschikbaarheid van “lokale opslag” controleert en andere methoden gebruikt als deze niet beschikbaar is.

p>

Ik heb http://www.jstorage.info/gebruikt en ben er tot nu toe tevreden mee .


Antwoord 8

Je kunt een json-object maken als:

globalVariable={example_attribute:"SomeValue"}; 

in fileA.js

En open het vanuit fileB.js zoals:
globalVariable.example_attribute


Antwoord 9

U kunt instellen
window['yourVariableName'] = yourVariableName;
en het maakt die variabele globaal voor alle bestanden.

Other episodes