Где я могу объявить глобальные переменные JavaScript на веб-странице? - PullRequest
10 голосов
/ 22 ноября 2010

Где мне нужно разместить фрагмент кода JavaScript, который инициализирует переменную, которая должна быть видна всему коду, выполняемому со страницей?(Например, обработчикам событий на элементах потребуется доступ к этой переменной).

Ответы [ 5 ]

26 голосов
/ 22 ноября 2010

Единственный способ не иметь глобальной переменной - это использовать ключевое слово var в области действия функции.Все остальное - глобальная переменная.

(function() {
  var local = 5;
})();

Неважно, является ли функция литералом или определением функции, она имеет в качестве некоторого типа функции.

Примеры глобальных переменных:

1 :

var global = 5; 

Вышеуказанное не входит в область действия функции, поэтому глобальное дажеесли var используется.

2.

(function() {
   global = 5;
})();

В приведенном выше примере var не использовалось, поэтому оно становится подразумеваемым глобальным.

3.

function foo(){}

foo не определен внутри другой функции или не назначен объектной клавише, поэтому ее можно использовать глобально.

4.

(function() {
   var local = global = 5;
})();

При выполнении нескольких присваиваний с var только первая переменная становится локальной ... so global является глобальной переменной и равняется 5.

5.

window.foo = 5;

Префикс window. является явным способом определения глобальной переменной в контекстебраузер.

6.

this.x = 5;

По умолчанию в браузерах this указывает на DOMWindow, если только вы не используете метод, привязанный к объектучто не window.Это так же, как # 5.Обратите внимание, что если вы используете метод, такой как XMLHttpRequest, контекст имеет вид окна.

7.

with ( window ) { name = 'john'; }

Если вы используете оператор with и выНе ссылайтесь на объект, который уже имеет свойство, определяется глобальная переменная.Лучше всего избегать использования ключевого слова with.

Вывод:

Лично я бы оставил свой код в области действия анонимной функции, и только явно объявляет глобальные переменные, когда мне нужно.

(function() {

   var governor = 'Schwarzenegger',
       state = 'California';

   window.president = 'Obama';
})();

В приведенном выше описании я определяю governor и state переменные, и они являются локальными для моей функции.Я хочу явно определить president как глобальную переменную.Таким образом, меня не смущает, какие переменные я определил как глобальные или нет, потому что я явно префиксирую их как window..

11 голосов
/ 22 ноября 2010

Вы можете сделать это из любой функции или из функции без использования ключевого слова 'var'.Назначьте его перед любыми другими сценариями (вероятно, в самом верху страницы), чтобы сценарии могли прочитать значение.

Вы также можете поместить его во включенный файл JS, но правильное размещение на странице обычно болееудобен в использовании, так как вы можете легко увидеть глобальные значения, и они могут быть изменены для каждой страницы с помощью кода на стороне сервера.Также попытайтесь предотвратить присвоение глобальных переменных в теле, это может привести к путанице и будет труднее читать.

<head>
    <script>
        var numberOfDucks = 1000; // Global

        function some_function() {
            // numberOfDucks is accessible here
            alert (numberOfDucks);
            //  until you mask it by defining a local variable using the 'var' keyword
            var myLocal = 0; // is a local
            anotherGlobal = 0; // is a global
        }
    </script>

    <script>
        // potentially some other script
    </script>

    <script src="even_more_script.js">
</head>

Определение глобальных функций (подразумеваемых глобальных) не является хорошей идеей, потому что это будетсделать много путаницы.

3 голосов
/ 22 ноября 2010

вы могли бы поместить эту переменную в начало страницы (в глобальную область, если вам нужно было сделать ее видимой везде), но я предлагаю две вещи

1) так как вам нужно открыть блок скриптов, избегайте объявления его внутри тела вашей страницы, так как скрипты блокируют рендеринг. Так что поставьте это как раз перед </head>

2) избегайте создания простой переменной, но вместо этого используйте пространство имен, чтобы снизить риск конфликта идентификаторов

<script>
var YOUR_APP_NS = {};
YOUR_APP_NS.yourvar = ....
</script>

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

YOUR_APP_NS.yourvar1 = ....
YOUR_APP_NS.yourvar2 = ....
YOUR_APP_NS.yourvarN = ....

но глобальная переменная все еще 1

1 голос
/ 22 ноября 2010

Объявите переменную без какой-либо из ваших функций, чтобы она стала глобальной переменной.

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

var globalVar = 1;

function testFunc1 () {
    globalVar = 2; //Updates the global variable
}

function testFunc2 () {
    var globalVar = 5; // This variable masks the global and only updates within the scope of this function
    globalVar = 3;
}

Кроме того, вы упомянули, что фрагмент должен инициализировать глобальный объект перед любой другой ссылкой. Для этого я бы посоветовал вам поместить свой блок сценария или ссылку на ваш файл javascript перед любыми другими ссылками javascript в вашем элементе, насколько это возможно. Если у вас есть другие файлы javascript, которые будут полагаться на глобальную переменную, вы можете убедиться, что они не загружаются, пока остальная часть страницы не загрузится первой, используя атрибут defer. Смотрите следующее:

<script src="dependant.js" type="text/javascript" defer="defer"></script>

Другим вариантом является динамическое добавление зависимых сценариев после загрузки исходного сценария. Вы можете сделать это, используя что-то вроде jQuery следующим образом:

$(window).load( function() {
    $.getScript('dependant.js');
});
0 голосов
/ 22 ноября 2010
<head>
<script>
    var b = 0;
</script>
<script src="...">
</head>
<body>
    ...
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...