Должен ли я использовать window.variable или var?

Question

У нас много настроек JS-кода, который определяет панели, кнопки и т. Д., Которые будут использоваться во многих других JS-файлах.

Как правило, мы делаем что-то вроде:

grid.js

var myGrid = .....

combos.js

var myCombo = .....

Затем в нашем коде приложения мы:

application.js

function blah() {
    myGrid.someMethod()
}

someother.js

function foo() {
    myCombo.someMethod();
    myGrid.someMethod();
}

Итак, должны ли мы использовать var myGrid или лучше использовать window.myGrid

Какая разница?

Answer 1

Потенциально важное различие в функциональности заключается в том, что window.myGrid может быть delete d, а var myGrid - нет.

var test1 = 'value';
window.test2 = 'value';


console.log( delete window.test1 ); // false ( was not deleted )
console.log( delete window.test2 ); // true  ( was deleted )


console.log( test1 );  // 'value'         ( still accessible )
console.log( test2 );  // ReferenceError  ( no longer exists )

Answer 2

Я бы предложил создать переменную пространства имен var App = {};

App.myGrid = ...

Таким образом, вы можете ограничить загрязнение глобального пространства имен.

РЕДАКТИРОВАТЬ: Относительно количества переменных проблема - на ум приходит 2 возможных решения:

1. Вы можете далее именовать их по типу (сетки, кнопки и т. Д.) Или по связи (ClientInfoSection, AddressSection и т. Д.)
2. Вы инкапсулируете свои методы в объектах, которые создаются с помощью имеющихся у вас компонентов

например: у вас есть

function foo() {
    myCombo.someMethod();
    myGrid.someMethod();
}

становится:

var Foo = function(combo, grid) {
    var myCombo = combo;//will be a private property
    this.myGrid = grid;//will be a public property
    this.foo = function() {//public method
        myCombo.someMethod();
        myGrid.someMethod();
    }
}
App.myFoo = new Foo(someCombo, someGrid);
App.myFoo.foo();

таким образом вы ограничиваете количество маленьких объектов и выставляете только то, что вам нужно (а именно, функцию foo)

PS: если вам нужно выставить внутренние компоненты, добавьте их в функцию конструктора

Answer 3

Одним из приятных вариантов использования window.variable является то, что вы можете проверить его без ошибки javascript.Например, если у вас есть:

if (myVar) {
    //do work
}

и myVar не определено где-либо на странице, вы получите ошибку javascript.Однако:

if (window.myVar) {
    //do work
}

не дает ошибок и работает, как и следовало ожидать.

var myVar = 'test' и window.myVar = 'test' примерно эквивалентны.

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

Answer 4

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

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

Answer 5

Общим ответом на этот вопрос будет использование var.

В частности, всегда помещайте свой код в выражение немедленного вызова функции (IIFE) :

(function(){
  var foo,
      bar;
  ...code...
})();

Это предотвращает загрязнение глобального пространства имен таким переменным, как foo и bar.Затем, когда вы явно хотите, чтобы переменная была в глобальном объекте (обычно window), вы можете написать:

window.foo = foo;

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

Answer 6

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

Answer 7

Чтобы расширить сказанное Ливиу, используйте:

App = (function() {
    var exports = {};
    /* code goes here, attach to exports to create Public API */
    return exports; 
})();

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