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

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

10
global-variables javascript

5 ответов

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

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

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

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

9

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

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

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

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

1:

var global = 5;

вышеуказанное не в функции объема, поэтому даже если это.

2.

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

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

3.

function foo(){}

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

4.

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

при выполнении нескольких заданий с var, только первая переменная становится местной... так что 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 как глобальная переменная. Таким образом, меня не смущает, какие переменные я определил как globals или нет, потому что я явно префикс их с window..

25

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

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

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

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

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

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

но глобальный var по-прежнему 1

3

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

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

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');
});
1
<head>
<script>
    var b = 0;
</script>
<script src="...">
</head>
<body>
    ...
</body>
0