Глобальные переменные в Javascript для нескольких файлов

Связка моего кода 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

Вам нужно объявить переменную, прежде чем включать файл helpers.js. Просто создайте тег script выше include для 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>

Ответ 2

Переменная может быть объявлена ​​в файле .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() будут отображаться две разные вещи, а значение, записанное на странице, будет отличаться во второй раз.

Ответ 3

Хорошо, ребята, здесь тоже мой маленький тест. У меня была аналогичная проблема, поэтому я решил проверить три ситуации:

  • Один HTML файл, один внешний JS файл... он вообще работает - могут ли функции связываться через глобальный var?
  • Два файла HTML, один внешний JS файл, один браузер, две вкладки: будут ли они вмешиваться через глобальный var?
  • Один HTML файл, открытый двумя браузерами, будет работать, и они будут вмешиваться?

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

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

Вместо того, чтобы просматривать учебники, мне было проще попробовать его, поэтому я и сделал. Мое заключение: всякий раз, когда вы добавляете внешний 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>

Ответ 4

Я думаю, вы должны использовать "локальное хранилище", а не глобальные переменные.

Если вы обеспокоены тем, что "локальное хранилище" может не поддерживаться в очень старых браузерах, подумайте об использовании существующего подключаемого модуля, который проверяет наличие "локального хранилища" и использует другие методы, если он недоступен.

Я использовал http://www.jstorage.info/, и я доволен им до сих пор.

Ответ 5

Вы можете создать json-объект, например:

globalVariable={example_attribute:"SomeValue"};

в файлеA.js

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