Как сделать переменные доступными для всех функций в JavaScript?

Question

Мне интересно, что я не понимаю в этом фрагменте кода ...

Почему это работает?

 function insert_number(number){
   var output = document.getElementById('output');
   output.value += number.value;
 }

но это не работает?

var output = document.getElementById('output');

function insert_number(number){
  output.value += number.value;
}

Имеет ли это какое-то отношение к определению переменной output?

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

Примечание: весь мой код находится во внешнем файле ".js"

полный контекст кода на данный момент таков (я добавлю больше позже):

var output = document.getElementById('output');

function insert_number(number){
  output.value += number.value;
}

function clear_output(){
  output.value = "";
}

Answer 1

Вот решение, которое сохранит только один объект / пространство имен в глобальной области видимости:

(function(global, d) {
    var output = d.getElementById('output'),
        myApi = {};

    myApi.insert_number = function(number){
      output.value += number.value;
    };

    //export your api to the global scope
    global.myApi = myApi;
})(window, document);

Теперь вы можете вызывать myApi.insert_number(5); Теперь у вас есть замыкание, которое имеет доступ к переменной output, так что вы можете добавлять дополнительные функции в свой API без необходимости каждый раз обращаться к DOM.

Просто напоминание, такой JavaScript должен быть размещен внизу вашей страницы чуть выше закрывающего </body>

Я бы порекомендовал посмотреть это видео в глобальном масштабе: http://www.watchmecode.net/javascript-scope

Answer 2

Я думаю, что причина того, что ваш код не работает, в том, что DOM не загружается при вызове var output = document.getElementById('output');

Переместите код ниже, где находится выходной div, и он должен работать

Answer 3

На самом деле, они оба работают, пока элемент DOM в

document.getElementById('output')

существует при запуске кода.Важным отличием является то, что ваша функция insert_number, вероятно, запускается после загрузки DOM, в отличие от простого вывода вывода во втором примере.

Также, как бы я записал переменную output в функцииinsert_number(), все еще делая вывод глобально доступным для всех других функций в моем скрипте?

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

var output; // declared, but as yet undefined

window.onload = function () {
    window.output = document.getElementById("output");
}

function insert_number(number) {
    output.value += number.value;
}

Answer 4

Это не имеет ничего общего с глобальными переменными.

Возможно, у вас есть скрипт внутри head.На этом этапе DOM еще не полностью построен, а элемент с идентификатором output еще не существует.Следовательно, document.getElementById('output') вернет null ( пример ).

Но если вы, вероятно, вызываете insert_number через некоторое время после создания DOM, в ответ на некоторое взаимодействие с пользователем.В этом случае элемент будет существовать.

Самое простое решение - поместить код перед закрывающим тегом body ( пример , заметить различные настройки jsfiddle и / или проверить источник).

Answer 5

Если вы объявляете переменную без использования «var», переменная всегда становится global . Больше информации здесь: http://www.w3schools.com/js/js_variables.asp