2015-11-23 18 views
22

Ho lavorato con piccoli frammenti di JavaScript durante 3 anni, ma ora sto creando un'applicazione React e ci sto lavorando. C'è una cosa di base che non capisco. React utilizza Dispatcher e Stores per costruire il suo pattern Flux, la cosa che non ottengo è che questo Dispatcher è visibile in tutte le applicazioni, perché Actions usa il dispatcher per inviare azioni e Memorizza registro al Dispatcher per ricevere notifiche (quindi non è un nuovo Dispatcher ogni volta). Quindi, come posso raggiungere questo scopo "globale" o come si chiama? Come si può ottenere questo utilizzando le classi ES6 (moduli)?JavaScript ed ES6, variabili "globali"

Questa domanda potrebbe non essere chiara a causa della mia mancanza di esperienza nella programmazione di JavaScript reale, spero che con l'approvazione dei commenti della community sarò in grado di organizzarlo.

risposta

42

È sempre possibile assegnare variabili a window.MyClass = whatever (global.MyClass per nodejs) indipendentemente dalla posizione in cui ci si trova e accedere a tali valori da qualsiasi altro file nell'applicazione. Tuttavia, non è sempre il modo migliore per condividere i dati a livello globale nella tua applicazione. Il modulo loader in nodejs (o AMD in ES6) prende tutto ciò che viene esportato e lo memorizza nella cache. Diciamo che avere un file del tipo:

MyModule.js:

class MyClass { 
    constructor() { 
    this.someData = 55; 
    } 
} 

export default (new MyClass); 

ora ogni volta abbiamo bisogno di questo file da qualche altra parte, siamo sempre viene data la stessa istanza di MyClass. Ciò significa:

file1.js:

import MyClass from './MyModule' 
MyClass.someData = 100; 

file2.js:

import MyClass from './MyModule' 
console.log(MyClass.someData); 

questo è chiamato il pattern Singleton, dove passiamo circa un esempio comune della classe tutta in tutta l'applicazione . In questo modo, siamo in grado di accedere alla stessa istanza di MyClass da file diversi, il tutto senza inquinare l'ambito globale (evitiamo di assegnare assegnazioni a global.MyClass ma realizziamo la stessa funzionalità).

+0

Perfetto, ho esportava mie classi come '' 'default esportazione MyClassName''' – vicaba

+1

@vicaba per ancora più contesto, il modello che ho ho espresso sopra è chiamato il modello singleton^dove passi un'istanza comune della tua classe nel tuo progetto – Macmee

+0

Lo so, ma non ero sicuro che se in JavaScript fosse stato chiamato lo stesso, Grazie ancora :) – vicaba

6

Quello che stai cercando è creare un singleton. Da http://amanvirk.me/singleton-classes-in-es6/.

let instance = null; 
 
export default class Cache{ 
 
    constructor() { 
 
    if (!instance) { instance = this; } 
 
    this.time = new Date() 
 

 
    return instance; 
 
    } 
 
}

Ho provato questo e funziona. Sostituire semplicemente this.time = new Date() con this.singletonFunction = function() {}. Dove si desidera utilizzarlo fare l'importazione poi

let aSingleton = (new importName()).singletonFunction;