Глобальні змінні у Javascript у кількох файлах

130

Купа мого коду JavaScript знаходиться у зовнішньому файлі, який називається helpers.js. Всередині HTML, який викликає цей код JavaScript, я маю потребу знати, чи була викликана певна функція від helpers.js.

Я спробував створити глобальну змінну, визначивши:

var myFunctionTag = true;

У глобальному масштабі як у моєму HTML-коді, так і в helpers.js.

Ось як виглядає мій 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>

Це те, що я намагаюся зробити, навіть здійснене?

— Горо
джерело

1

Ну, ви просто встановили це значення false у другому <script>блоці тегів. Я просто спробував 2 різних підходи (не оголошуючи var перед файлом helpers.js), і вони працювали. Я опублікую відповідь, але, здається, у вашому запитанні має бути відсутня якась ключова інформація.

— Stephen P

window.onload = function () {// Почніть свій код} Буде найкращим рішенням - І це говорить Slowpoke :)

— Schoening

125

Вам потрібно оголосити змінну перед тим, як включити файл helpers.js. Просто створіть тег сценарію над включенням для helpers.js і визначте його там.

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

— тванфоссон
джерело

9

не працює для мене, оскільки при спробі доступу з іншого js, завантаженого в інший html, він говорить, що змінна не оголошується

— ACV

16

Змінна може бути оголошена у .jsфайлі та просто посилатися на файл HTML. Моя версія helpers.js:

var myFunctionWasCalled = false;

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

І сторінка для тестування:

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

Ви побачите, що в тесті alert()відобразяться дві різні речі, а значення, записане на сторінці, буде другим.

— Стівен П
джерело

15

Гаразд, хлопці, ось і мій маленький тест. У мене була подібна проблема, тому я вирішив перевірити 3 ситуації:

Один HTML-файл, один зовнішній JS-файл ... чи працює він взагалі - чи можуть функції спілкування через глобальний var?
Два файли HTML, один зовнішній файл JS, один браузер, дві вкладки: чи будуть вони заважати через глобальний var?
Один HTML-файл, відкритий двома браузерами, чи він працюватиме, і чи будуть вони заважати?

Всі результати були як очікували.

Це працює. Функції f1 () та f2 () спілкуються через глобальний var (var знаходиться у зовнішньому файлі JS, а не у файлі HTML).
Вони не заважають. Очевидно чіткі копії файлу JS були зроблені для кожної вкладки браузера, кожної сторінки HTML.
Все працює незалежно, як очікувалося.

Замість того, щоб переглядати підручники, мені було легше спробувати це, так я і зробив. Мій висновок: щоразу, коли ви додаєте зовнішній файл JS на свою сторінку HTML, вміст зовнішнього JS потрапляє "копіювати / вставляти" на вашу HTML-сторінку до того, як сторінка буде надана. Або на вашу сторінку PHP, якщо хочете. Будь ласка, виправте мене, якщо я тут помиляюся. Дякую.

Мої приклади наступні:

ЗОВНІШНІ 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>

— Мартін
джерело

1

HTML 1 і HTML 2 однакові (крім назви сторінки) ... все-таки я створив два файли, просто щоб їх фізично розділити.

— Мартін

1

Я думаю, вам слід використовувати "локальне зберігання", а не глобальні змінні.

Якщо ви стурбовані тим, що "локальне зберігання" може не підтримуватися в дуже старих браузерах, подумайте про використання наявного плагіна, який перевіряє наявність "локального сховища" та використовує інші методи, якщо вони недоступні.

Я використовував http://www.jstorage.info/ і до цього часу задоволений.

— paulo62
джерело

1

Ви можете зробити об’єкт json на зразок:

globalVariable={example_attribute:"SomeValue"};

у fileA.js

І отримати доступ до нього з fileB.js, наприклад: globalVariable.example_attribute

— партизани
джерело

1

Привіт, щоб передати значення з одного js-файлу в інший js-файл, ми можемо використовувати локальну концепцію зберігання

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

Файл Two.js

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

 alert(test);
}

Файл Three.js

localStorage.name = 1;

— Саджіт
джерело

1

Якщо ви використовуєте вузол:

Створіть файл, щоб оголосити значення, скажімо, його називають values.js:

export let someValues = {
  value1: 0
}

Потім просто імпортуйте його за потреби у верхній частині кожного файлу, в якому він використовується (наприклад, file.js):

import { someValues } from './values'

console.log(someValues);

— Джаред Вілбер
джерело

-1

// Файл Javascript 1

localStorage.setItem('Data',10);

// Файл Javascript 2

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

Не забудьте зв’язати свої файли JS в html :)

— MrJ
джерело