Dovrei usare window.variable o var?

Abbiamo un sacco di codice JS di impostazione che definisce pannelli, pulsanti, ecc. Che verranno utilizzati in molti altri file JS.

In genere, facciamo qualcosa come:

grid.js

var myGrid = ..... 

combos.js

 var myCombo = ..... 

Quindi, nel nostro codice applicativo, noi:

application.js

 function blah() { myGrid.someMethod() } 

someother.js

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

Quindi, dovremmo usare var myGrid o è meglio usare window.myGrid

Qual è la differenza?

Suggerirei di creare una variabile var App = {}; namespace var App = {};

 App.myGrid = ... 

In questo modo puoi limitare l’inquinamento del namespace globale.

EDIT: Per quanto riguarda il numero di variabili problema – 2 possibili soluzioni vengono in mente:

  1. Puoi ulteriormente assegnare un namespace per tipo (Griglie, Pulsanti, ecc.) O per relazione (ClientInfoSection, AddressSection, ecc.)
  2. Incapsula i tuoi metodi in oggetti che vengono istanziati con i componenti che hai

ex: hai

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

diventa:

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

in questo modo limiti la quantità di piccoli oggetti e esponi solo ciò di cui hai bisogno (vale a dire la funzione foo)

PS: se hai bisogno di esporre i componenti interni, aggiungili a questo all’interno della funzione di costruzione

Una differenza potenzialmente importante nella funzionalità è che window.myGrid può essere delete d e var myGrid non può.

 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 ) 

Un buon uso di window.variable è che puoi controllarlo senza avere un errore javascript. Ad esempio, se hai:

 if (myVar) { //do work } 

e myVar non è definito in nessuna parte della pagina, si otterrà un errore javascript. Però:

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

non dà errori e funziona come ci si aspetterebbe.

var myVar = 'test' e window.myVar = 'test' sono approssimativamente equivalenti.

A parte questo, come già detto, dovresti discendere da un object globale per evitare di inquinare lo spazio dei nomi globale.

Nell’ambito globale i due sono in effetti equivalenti in termini di funzionalità. Nell’ambito della funzione, var è certamente preferibile quando si desidera il comportamento delle chiusure.

Vorrei sempre usare var tutto il tempo: in primo luogo, è coerente con il comportamento solitamente preferito nelle chiusure (quindi è più facile spostare il codice in una chiusura se si decide di farlo in seguito), e in secondo luogo, sembra più semantico a dire che sto creando una variabile piuttosto che albind una proprietà della finestra. Ma per lo più è lo stile a questo punto.

La risposta generale alla domanda sarebbe di usare var .

Più specificamente, metti sempre il tuo codice in un’espressione di funzione immediatamente chiamata (IIFE) :

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

Ciò mantiene variabili come foo e bar dall’inquinamento dello spazio dei nomi globale. Quindi, quando si desidera che una variabile sia posizionata sull’object globale (in genere una window ), è ansible scrivere:

 window.foo = foo; 

JavaScript ha un ambito funzionale ed è molto utile sfruttarlo al meglio. Non vorresti che la tua app si interrompesse solo perché qualche altro programmatore ha fatto qualcosa di stupido come se avesse sovrascritto il tuo handle del timer.

Oltre alle altre risposte, vale la pena notare che se non si utilizza var all’interno di una funzione mentre si dichiara una variabile, questa viene rilevata nell’ambito globale rendendola automaticamente una proprietà dell’object window (o dell’ambito globale).

Per approfondire ciò che Liviu ha detto, usa:

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

Facendo ciò puoi hide alcuni dei tuoi codici di implementazione specifici, che potresti non voler mostrare usando var all’interno. Tuttavia, è ansible accedere a qualsiasi cosa collegata all’object exports .