Глобальные переменные в 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>блоке тегов. Я просто попробовал два разных подхода (без объявления var перед файлом helpers.js), и оба они работали. Я отправлю ответ, но похоже, что в вашем вопросе не хватает какой-то ключевой информации.

— Стивен П.

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>

— tvanfosson
источник

10

у меня не работает, потому что при попытке доступа из другого 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-файл ... он вообще работает - могут ли функции взаимодействовать через глобальную переменную?
Два файла HTML, один внешний файл JS, один браузер, две вкладки: будут ли они мешать через глобальную переменную?
Один HTML файл, открытый двумя браузерами, будет ли он работать и будут ли мешать?

Все результаты были ожидаемыми.

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

Вместо того, чтобы просматривать учебные пособия, мне было проще попробовать, и я это сделал. Мой вывод: всякий раз, когда вы включаете внешний файл JS в свою HTML-страницу, содержимое внешнего JS «копируется / вставляется» на вашу HTML-страницу до того, как страница будет отображена. Или на свою страницу PHP, если хотите. Пожалуйста, поправьте меня, если я ошибаюсь. Thanx.

Мои файлы примеров следуют:

ВНЕШНИЙ 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

— partizanos
источник

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;

— Sajith
источник

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
источник