Come posso evitare l'uso di variabili globali nel semplice Javascript SPA?

Question

Come posso evitare l'uso di variabili globali nel semplice Javascript SPA?

#1 da (3 voti)
#2 da (2 voti)

3

Per imparare Javascript sto costruendo una semplice applicazione a pagina singola. Si tratta di un'app per presentazioni di base che deve solo elaborare alcune impostazioni di base ed eseguire alcuni comportamenti. La struttura di base del mio codice è quindi:

var settings = { ... };

function initStartPage() { ... };
function initSlideshow() { ... };
function settingsHandler() { ... };
function doSomething() { ... };

... dove ogni funzione deve accedere e possibilmente modificare i dati contenuti nella variabile settings .

Sono un po 'stordito su come potrei essere in grado di strutturare questo senza usare variabili globali o costrutti inutilmente complicati. Sono abituato a programmare in Java o C, dove le variabili per le piccole app possono vivere comodamente nella funzione principale. L'unica soluzione che posso pensare di eliminare l'ambito globale è il semplice namespacing:

var namespace = {};
namespace.settings = { ... };

namespace.initStartPage = function() { ... };
namespace.initSlideshow = function() { ... };
namespace.settingsHandler = function() { ... };
namespace.doSomething = function() { ... };

Quindi le mie domande sono:

1. È una soluzione ragionevole per un sistema in cui molte parti accederanno agli stessi dati?

2. Esiste una soluzione migliore e più standard?

globals web-development javascript front-end namespace

posta jdd 08.08.2018 - 23:39

fonte

2 risposte

Leggi altre domande sui tag globals web-development javascript front-end namespace

Numero di thread: calcolo intensivo vs operazioni intensive di IO? DDD: decidere quando orientarsi verso l'eventuale coerenza transazionale

score 3 · Answer 1

Sì, credo che sia l'approccio standard se si desidera avere variabili PUBLIC (namespace). Ma per rendere variabili di namespace private, il solito approccio è usare un closure ( esempio usando la chiusura per i dati privati )

Oppure, dal momento che stai imparando, ti preghiamo di considerare l'utilizzo di typescript , che supporta direttamente i membri di dati privati.

score 2 · Answer 2

Come ha detto @Lewis Pringle, una chiusura è il modo tipico per minimizzare l'inquinamento lo spazio dei nomi globale. Questo avviene in termini di cosiddetta IIFE - espressione di funzione immessa.

Con questi blocchi di buil:

una chiusura per conservare uno spazio privato
una funzione, che viene immediatamente richiamata

vieni a rivelando modulo in Javascript.

const app = (()=>{
  const init = ()=>{
    alert("hi");
  };
  return { init: init};
})()

app.init();

Il punto è che hai una funzione anonima definita e invocata immediatamente dopo l'analisi in cui app contiene un riferimento a. Tutto all'interno di questa funzione anonima è fondamentalmente privato di questa funzione. Le uniche interfacce per il pubblico vengono eseguite tramite l'oggetto che viene restituito. Qui la chiave init fa riferimento alla funzione "private" init definita nell'ambito della funzione anonima.

app contiene un riferimento a un oggetto, che a sua volta ha accesso a questo ambito.

Da lì puoi creare qualcosa come l'iniezione di dipendenza. La funzione invocata immediata potrebbe assumere parametri, che potrebbero essere passati allo scopo della chiusura:

const c => ((a,b)=>{ ... })(a,b)

"inietti" prima dichiarato a e b in c .