Birden çok dosyada Javascript'teki global değişkenler

130

JavaScript kodumun bir kısmı helpers.js adlı harici bir dosyada. Bu JavaScript kodunu çağıran HTML'nin içinde kendimi helpers.js'den belirli bir işlevin çağrılıp çağrılmadığını bilmeye ihtiyaç duyuyorum.

Şunları tanımlayarak global bir değişken oluşturmaya çalıştım:

var myFunctionTag = true;

Global kapsamda hem HTML kodumda hem de helpers.js'de.

İşte html kodum neye benziyor:

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

Yapmaya çalıştığım şey mümkün mü?

— Goro
kaynak

1

Eh, ikinci etiket bloğunda bunu yanlış olarak ayarladınız<script> . Sadece 2 farklı yaklaşım denedim (var'ı helpers.js dosyasından önce bildirmeden) ve ikisi de çalıştı. Bir cevap göndereceğim, ancak görünen o ki sorunuzda bazı önemli bilgiler eksik.

— Stephen P

window.onload = function () {// Kodunuzu Başlatın} En iyi çözüm mü - Ve bu Yavaş konuşmadır :)

— Schoening

125

Helpers.js dosyasını eklemeden önce değişkeni bildirmeniz gerekir. İnclude for helpers.js öğesinin üzerinde bir komut dosyası etiketi oluşturun ve orada tanımlayın.

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

10

benim için çalışmıyor çünkü başka bir html'de yüklü başka bir js'den erişmeye çalışırken, değişkenin bildirilmediğini söylüyor

— ACV,

16

Değişken .jsdosyada bildirilebilir ve HTML dosyasında basitçe referans gösterilebilir. Benim versiyonum helpers.js:

var myFunctionWasCalled = false;

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

Ve test etmek için bir sayfa:

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

Testin alert()iki farklı şey göstereceğini ve sayfaya yazılan değerin ikinci seferde farklı olacağını göreceksiniz.

— Stephen P
kaynak

15

Tamam çocuklar, benim de küçük testim. Benzer bir problemim vardı, bu yüzden 3 durumu test etmeye karar verdim:

Bir HTML dosyası, bir harici JS dosyası ... hiç çalışıyor mu - işlevler global bir değişken aracılığıyla iletişim kurabilir mi?
İki HTML dosyası, bir harici JS dosyası, bir tarayıcı, iki sekme: bunlar global var aracılığıyla müdahale edecek mi?
2 tarayıcı tarafından açılan bir HTML dosyası çalışacak mı ve müdahale edecek mi?

Tüm sonuçlar beklendiği gibiydi.

İşe yarıyor. F1 () ve f2 () işlevleri global var aracılığıyla iletişim kurar (var, HTML dosyasında değil, harici JS dosyasındadır).
Müdahale etmezler. Görünüşe göre, her tarayıcı sekmesi, her HTML sayfası için JS dosyasının farklı kopyaları oluşturulmuş.
Beklendiği gibi, tümü bağımsız olarak çalışır.

Öğreticilere göz atmak yerine, denemeyi daha kolay buldum, bu yüzden yaptım. Sonuç olarak, HTML sayfanıza harici bir JS dosyası eklediğinizde, harici JS'nin içeriği sayfa oluşturulmadan önce HTML sayfanıza "kopyalanır / yapıştırılır". Veya isterseniz PHP sayfanıza. Burada yanılıyorsam lütfen beni düzeltin. Teşekkürler.

Örnek dosyalarım şu şekildedir:

HARİCİ 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>

— kırlangıç
kaynak

1

HTML 1 ve HTML 2 aynı (sayfa başlığı hariç) ... yine de, fiziksel olarak ayrı olmaları için iki dosya yaptım.

— Martin

1

Genel değişkenler yerine "yerel depolama" kullanmanız gerektiğini düşünüyorum.

"Yerel depolamanın" çok eski tarayıcılarda desteklenmeyeceğinden endişeleniyorsanız, "yerel depolama" nın kullanılabilirliğini kontrol eden ve mevcut değilse diğer yöntemleri kullanan mevcut bir eklentiyi kullanmayı düşünün.

Http://www.jstorage.info/ kullandım ve şimdiye kadar memnunum.

— paulo62
kaynak

1

Aşağıdaki gibi bir json nesnesi yapabilirsiniz:

globalVariable={example_attribute:"SomeValue"};

fileA.js'de

Ve fileB.js'den şu şekilde erişin: globalVariable.example_attribute

— partizanos
kaynak

1

Merhaba, değerleri bir js dosyasından başka bir js dosyasına geçirmek için Yerel depolama konseptini kullanabiliriz

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

Two.js dosyası

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

 alert(test);
}

Three.js Dosyası

localStorage.name = 1;

— Sajith
kaynak

1

Düğüm kullanıyorsanız:

Değer bildirmek için dosya oluşturun, bunun adı olduğunu söyleyin values.js:

export let someValues = {
  value1: 0
}

Ardından, onu kullanıldığı her dosyanın üst kısmına gerektiği gibi içe aktarın (örneğin, file.js):

import { someValues } from './values'

console.log(someValues);

— Jared Wilber
kaynak

-1

// Javascript dosyası 1

localStorage.setItem('Data',10);

// Javascript dosyası 2

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

JS dosyalarınızı html'de bağlamayı unutmayın :)

— MrJ
kaynak