Variabili globali in Javascript su più file

130

Un sacco del mio codice JavaScript si trova in un file esterno chiamato helpers.js. All'interno dell'HTML che chiama questo codice JavaScript, ho bisogno di sapere se è stata chiamata una determinata funzione di helpers.js.

Ho tentato di creare una variabile globale definendo:

var myFunctionTag = true;

In ambito globale sia nel mio codice HTML che in helpers.js.

Ecco come appare il mio codice HTML:

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

Ciò che sto cercando di fare è persino fattibile?

— Goro
fonte

1

Bene, l'hai appena impostato su false nel secondo <script>blocco di tag. Ho appena provato 2 approcci diversi (senza dichiarare var prima del file helpers.js) ed entrambi hanno funzionato. Pubblicherò una risposta, ma sembra che ci siano alcune informazioni chiave mancanti nella tua domanda.

— Stephen P,

window.onload = function () {// Inizia il tuo codice} Sarebbe la soluzione migliore - E questo è Slowpoke parlando :)

— Schoening

125

Devi dichiarare la variabile prima di includere il file helpers.js. Basta creare un tag di script sopra l'inclusione per helpers.js e definirlo lì.

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

9

non funziona per me perché quando provo ad accedere da un altro js caricato in un altro html, dice che la variabile non è dichiarata

— ACV

16

La variabile può essere dichiarata nel .jsfile e semplicemente referenziata nel file HTML. La mia versione di helpers.js:

var myFunctionWasCalled = false;

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

E una pagina per testarlo:

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

Vedrai che il test alert()mostrerà due cose diverse e il valore scritto nella pagina sarà diverso la seconda volta.

— Stephen P
fonte

15

Ok ragazzi, ecco anche il mio piccolo test. Ho avuto un problema simile, quindi ho deciso di provare 3 situazioni:

Un file HTML, un file JS esterno ... funziona affatto: le funzioni possono comunicare tramite una var globale?
Due file HTML, un file JS esterno, un browser, due schede: interferiranno tramite la var globale?
Un file HTML, aperto da 2 browser, funzionerà e interferiranno?

Tutti i risultati sono stati come previsto.

Funziona. Le funzioni f1 () e f2 () comunicano tramite var globale (var è nel file JS esterno, non nel file HTML).
Non interferiscono. Copie apparentemente distinte del file JS sono state fatte per ogni scheda del browser, ogni pagina HTML.
Tutto funziona in modo indipendente, come previsto.

Invece di sfogliare i tutorial, ho trovato più facile provarlo, così ho fatto. La mia conclusione: ogni volta che includi un file JS esterno nella tua pagina HTML, il contenuto del JS esterno viene "copiato / incollato" nella tua pagina HTML prima che la pagina venga renderizzata. O nella tua pagina PHP, se vuoi. Per favore, correggimi se sbaglio qui. Grazie.

Seguono i miei file di esempio:

JS ESTERNO:

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>

— balestruccio
fonte

1

HTML 1 e HTML 2 sono identici (tranne il titolo della pagina) ... tuttavia, ho creato due file, solo per separarli fisicamente.

— Martin

1

Penso che dovresti usare la "memoria locale" anziché le variabili globali.

Se temi che la "memoria locale" potrebbe non essere supportata in browser molto vecchi, considera l'utilizzo di un plug-in esistente che controlla la disponibilità della "memoria locale" e utilizza altri metodi se non è disponibile.

Ho usato http://www.jstorage.info/ e sono contento finora.

— paulo62
fonte

1

Puoi creare un oggetto json come:

globalVariable={example_attribute:"SomeValue"};

in fileA.js

E accedervi da fileB.js come: globalVariable.example_attribute

— partizanos
fonte

1

Ciao per passare i valori da un file js a un altro file js possiamo usare il concetto di archiviazione locale

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

File Two.js

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

 alert(test);
}

File Three.js

localStorage.name = 1;

— Sajith
fonte

1

Se stai usando il nodo:

Crea un file per dichiarare il valore, ad esempio, si chiama values.js:

export let someValues = {
  value1: 0
}

Quindi importalo come necessario nella parte superiore di ogni file in cui viene utilizzato (ad es. file.js):

import { someValues } from './values'

console.log(someValues);

— Jared Wilber
fonte

-1

// File Javascript 1

localStorage.setItem('Data',10);

// File Javascript 2

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

Non dimenticare di collegare i tuoi file JS in HTML :)

— MrJ
fonte