Variabel global dalam Javascript di beberapa file

130

Sekelompok kode JavaScript saya ada di file eksternal yang disebut helpers.js. Di dalam HTML yang memanggil kode JavaScript ini saya merasa perlu mengetahui apakah fungsi tertentu dari helpers.js telah dipanggil.

Saya telah mencoba membuat variabel global dengan mendefinisikan:

var myFunctionTag = true;

Dalam lingkup global baik dalam kode HTML saya dan di helpers.js.

Inilah kode html saya:

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

Apakah yang saya coba lakukan bahkan layak?

javascript scope global-variables global Goro
sumber
1
Nah, Anda baru saja mengaturnya ke false di <script>blok tag kedua . Saya baru saja mencoba 2 pendekatan berbeda (tanpa mendeklarasikan var sebelum file helpers.js) dan keduanya bekerja. Saya akan mengirim jawaban, tetapi tampaknya pasti ada beberapa informasi kunci yang hilang dalam pertanyaan Anda.
Stephen P
window.onload = function () {// Mulai Kode Anda} Akan solusi terbaik - Dan ini Slowpoke berbicara :)
Schoening

Jawaban:

125

Anda perlu mendeklarasikan variabel sebelum Anda menyertakan file helpers.js. Cukup buat tag skrip di atas termasuk untuk helpers.js dan tentukan di sana.

<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
sumber
9
tidak berfungsi untuk saya karena ketika mencoba mengakses dari js lain yang dimuat dalam html lain, dikatakan variabel tidak dideklarasikan
ACV
16

Variabel dapat dideklarasikan dalam .jsfile dan hanya direferensikan dalam file HTML. Versi saya dari helpers.js:

var myFunctionWasCalled = false;

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

Dan halaman untuk mengujinya:

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

Anda akan melihat tes alert()akan menampilkan dua hal yang berbeda, dan nilai yang ditulis untuk halaman akan berbeda untuk kedua kalinya.

Stephen P
sumber
15

Oke, teman-teman, ini juga tes kecilku. Saya memiliki masalah yang sama, jadi saya memutuskan untuk menguji 3 situasi:

  1. Satu file HTML, satu file JS eksternal ... apakah berfungsi sama sekali - dapatkah fungsi berkomunikasi melalui global var?
  2. Dua file HTML, satu file JS eksternal, satu browser, dua tab: akankah mereka ikut campur melalui global var?
  3. Satu file HTML, dibuka oleh 2 browser, apakah akan berfungsi dan apakah akan ikut campur?

Semua hasil seperti yang diharapkan.

  1. Berhasil. Fungsi f1 () dan f2 () berkomunikasi melalui global var (var ada di file JS eksternal, bukan di file HTML).
  2. Mereka tidak ikut campur. Rupanya salinan berbeda dari file JS telah dibuat untuk setiap tab browser, setiap halaman HTML.
  3. Semua bekerja secara mandiri, seperti yang diharapkan.

Alih-alih menelusuri tutorial, saya merasa lebih mudah untuk mencobanya, jadi saya melakukannya. Kesimpulan saya: setiap kali Anda memasukkan file JS eksternal di halaman HTML Anda, konten JS eksternal akan "disalin / ditempelkan" ke halaman HTML Anda sebelum halaman tersebut diberikan. Atau ke halaman PHP Anda jika Anda mau. Harap perbaiki saya jika saya salah di sini. Terima kasih.

File contoh saya ikuti:

EKSTERNAL 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
sumber
1
HTML 1 dan HTML 2 identik (kecuali judul halaman) ... masih, saya membuat dua file, hanya untuk memisahkannya secara fisik.
Martin
1

Saya pikir Anda harus menggunakan "penyimpanan lokal" daripada variabel global.

Jika Anda khawatir bahwa "penyimpanan lokal" mungkin tidak didukung di browser yang sangat lama, pertimbangkan untuk menggunakan plug-in yang ada yang memeriksa ketersediaan "penyimpanan lokal" dan menggunakan metode lain jika tidak tersedia.

Saya menggunakan http://www.jstorage.info/ dan saya senang dengan itu sejauh ini.

paulo62
sumber
1

Anda dapat membuat objek json seperti:

globalVariable={example_attribute:"SomeValue"};

di fileA.js

Dan akses dari fileB.js seperti: globalVariable.example_attribute

partizano
sumber
1

Hai untuk meneruskan nilai dari satu file js ke file js lain kita dapat menggunakan konsep penyimpanan lokal

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

Jika Anda menggunakan simpul:

  1. Buat file untuk menyatakan nilai, katakan itu disebut values.js:
export let someValues = {
  value1: 0
}

Kemudian cukup impor sesuai kebutuhan di bagian atas setiap file yang digunakan (mis., file.js):

import { someValues } from './values'

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

// file Javascript 1

localStorage.setItem('Data',10);

// File Javascript 2

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

Jangan lupa menautkan file JS Anda dalam html :)

MrJ
sumber