Zmienne globalne w JavaScript w wielu plikach

Question 1

Część mojego kodu JavaScript znajduje się w zewnętrznym pliku o nazwie helpers.js. W kodzie HTML, który wywołuje ten kod JavaScript, potrzebuję wiedzieć, czy została wywołana pewna funkcja z helpers.js.

Próbowałem utworzyć zmienną globalną, definiując:

var myFunctionTag = true;

W zakresie globalnym zarówno w moim kodzie HTML, jak iw helper.js.

Oto jak wygląda mój kod 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>

Czy to, co próbuję zrobić, jest w ogóle wykonalne?

Question 2

Musisz zadeklarować zmienną przed dołączeniem pliku helpers.js. Po prostu utwórz tag skryptu powyżej dołączenia dla helpers.js i zdefiniuj go tam.

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

Question 3

Zmienną można zadeklarować w .jspliku i po prostu odwołać się do niej w pliku HTML. Moja wersja helpers.js:

var myFunctionWasCalled = false;

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

I stronę do przetestowania:

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

Zobaczysz, że test alert()wyświetli dwie różne rzeczy, a wartość zapisana na stronie będzie inna za drugim razem.

Question 4

OK, chłopaki, oto mój mały test. Miałem podobny problem, więc postanowiłem przetestować 3 sytuacje:

Jeden plik HTML, jeden zewnętrzny plik JS ... czy to w ogóle działa - czy funkcje mogą się komunikować poprzez globalną zmienną?
Dwa pliki HTML, jeden zewnętrzny plik JS, jedna przeglądarka, dwie zakładki: czy będą kolidować przez globalną zmienną?
Jeden plik HTML, otwarty przez 2 przeglądarki, czy zadziała i czy będą przeszkadzać?

Wszystkie wyniki były zgodne z oczekiwaniami.

To działa. Funkcje f1 () i f2 () komunikują się poprzez globalną zmienną (var znajduje się w zewnętrznym pliku JS, a nie w pliku HTML).
Nie przeszkadzają. Najwyraźniej odrębne kopie pliku JS zostały wykonane dla każdej karty przeglądarki, każdej strony HTML.
Wszystko działa niezależnie, zgodnie z oczekiwaniami.

Zamiast przeglądać samouczki, łatwiej mi było go wypróbować, więc tak zrobiłem. Mój wniosek: za każdym razem, gdy umieścisz zewnętrzny plik JS na swojej stronie HTML, zawartość zewnętrznego JS zostanie „skopiowana / wklejona” do strony HTML przed renderowaniem strony. Lub na swojej stronie PHP, jeśli chcesz. Proszę, popraw mnie, jeśli się mylę. Dzięki.

Moje przykładowe pliki to:

ZEWNĘTRZNY 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>

Question 5

Myślę, że powinieneś używać „lokalnej pamięci” zamiast zmiennych globalnych.

Jeśli obawiasz się, że „pamięć lokalna” może nie być obsługiwana w bardzo starych przeglądarkach, rozważ użycie istniejącej wtyczki, która sprawdza dostępność „pamięci lokalnej” i używa innych metod, jeśli jest ona niedostępna.

Użyłem http://www.jstorage.info/ i póki co jestem z niego zadowolony.

Question 6

Możesz utworzyć obiekt json taki jak:

globalVariable={example_attribute:"SomeValue"};

w plikuA.js

I uzyskaj do niego dostęp z plikuB.js, na przykład: globalVariable.example_attribute

Question 7

Cześć, aby przekazać wartości z jednego pliku js do innego pliku js, możemy użyć koncepcji lokalnego przechowywania

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

Plik Two.js.

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

 alert(test);
}

Plik Three.js

localStorage.name = 1;

Question 8

Jeśli używasz węzła:

Utwórz plik, aby zadeklarować wartość, powiedzmy, że nazywa się values.js:

export let someValues = {
  value1: 0
}

Następnie po prostu zaimportuj go w razie potrzeby u góry każdego pliku, w którym jest używany (np. file.js):

import { someValues } from './values'

console.log(someValues);

Question 9

// Plik Javascript 1

localStorage.setItem('Data',10);

// Plik Javascript 2

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

Nie zapomnij połączyć plików JS w html :)