web-dev-qa-db-de.com

Soll ich window.variable oder var verwenden?

Wir haben eine Menge Setup-JS-Code, der Bedienfelder, Schaltflächen usw. definiert, die in vielen anderen JS-Dateien verwendet werden.

Typischerweise machen wir so etwas wie:

grid.js

var myGrid = .....

combos.js

var myCombo = .....

Dann in unserem Anwendungscode, wir:

application.js

function blah() {
    myGrid.someMethod()
}

someother.js

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

Also, sollten wir die var myGrid oder ist besser zu verwenden window.myGrid

Was ist der Unterschied?

javascriptglobal-variables
55
cbmeeks

Ich würde vorschlagen, eine Namespace-Variable var App = {};

App.myGrid = ...

Auf diese Weise können Sie die Verschmutzung des globalen Namespaces begrenzen.

EDIT: In Bezug auf die Anzahl der Variablen Problem - 2 mögliche Lösungen in den Sinn kommen:

  1. Sie können den Namespace nach Typ (Raster, Schaltflächen usw.) oder nach Beziehung (ClientInfoSection, AddressSection usw.) erweitern.
  2. Sie kapseln Ihre Methoden in Objekte, die mit den vorhandenen Komponenten instanziiert werden

bsp .: Sie haben

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

wird:

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();

auf diese Weise begrenzen Sie die Anzahl der kleinen Objekte und belichten nur das, was Sie benötigen (nämlich die Funktion foo).

PS: Wenn Sie die internen Komponenten verfügbar machen müssen, fügen Sie diese in der Konstruktorfunktion hinzu

40
Liviu T.

Ein potenziell wichtiger Unterschied in der Funktionalität ist, dass window.myGrid kann deleted sein, und var myGrid kann nicht.

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 )
58
user113716

Eine nette Verwendung von window.variable ist, dass Sie es überprüfen können, ohne einen Javascript-Fehler zu haben. Zum Beispiel, wenn Sie:

if (myVar) {
    //do work
}

und myVar ist nirgendwo auf der Seite definiert, erhalten Sie einen Javascript-Fehler. Jedoch:

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

gibt keinen fehler und funktioniert wie man es erwarten würde.

var myVar = 'test' und window.myVar = 'test' sind ungefähr gleichwertig.

Abgesehen davon sollten Sie, wie bereits erwähnt, von einem globalen Objekt abstammen, um eine Verschmutzung des globalen Namespaces zu vermeiden.

11
aepheus

In globaler Hinsicht sind die beiden Funktionen tatsächlich gleichwertig. Im Funktionsumfang ist var sicherlich vorzuziehen, wenn das Verhalten von Abschlüssen gewünscht wird.

Ich würde nur die ganze Zeit var verwenden: Erstens entspricht es dem normalerweise bevorzugten Verhalten in Closures (sodass es einfacher ist, Ihren Code in einen Closure zu verschieben, wenn Sie sich später dafür entscheiden), und zweitens Ich finde es nur semantischer zu sagen, dass ich eine Variable erstelle, als eine Eigenschaft des Fensters anzuhängen. Aber zu diesem Zeitpunkt ist es meistens Stil.

8
Jeremy Roman

Die allgemeine Antwort auf die Frage wäre var.

Setzen Sie Ihren Code immer in ein Sofort aufgerufener Funktionsausdruck (IIFE) :

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

Dies verhindert, dass Variablen wie foo und bar den globalen Namespace verschmutzen. Wenn Sie dann explizit möchten, dass eine Variable auf dem globalen Objekt ist (normalerweise window), können Sie Folgendes schreiben:

window.foo = foo;

JavaScript hat einen Funktionsumfang, und es ist sehr gut, ihn voll auszunutzen. Sie möchten nicht, dass Ihre App kaputt geht, nur weil ein anderer Programmierer so etwas Dummes getan hat, als ob er Ihr Timer-Handle überschrieben hätte.

6
zzzzBov

Zusätzlich zu anderen Antworten ist es erwähnenswert, dass wenn Sie var nicht innerhalb einer Funktion verwenden, während Sie eine Variable deklarieren, ndicht in den globalen Bereich, wodurch sie automatisch zu einer Eigenschaft von window object (oder globalem Bereich) wird. .

3
Mrchief

Um zu erweitern, was Liviu sagte, verwenden Sie:

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

Auf diese Weise können Sie einen Teil Ihres implementierungsspezifischen Codes verbergen, den Sie möglicherweise nicht anzeigen möchten, indem Sie var verwenden. Sie können jedoch auf alles zugreifen, was an das Objekt exports angehängt ist.

1
Justin Long