2015-11-23 27 views
22

Pracowałem z niewielkimi fragmentami kodu JavaScript przez 3 lata, ale teraz buduję aplikację React i zajmuję się nią. Jest podstawowa rzecz, której nie rozumiem. React używa Dispatchera i Stores, aby zbudować swój wzorzec Flux, rzeczą, której nie otrzymuję, jest to, że ten Dispatcher jest widoczny we wszystkich aplikacjach, ponieważ Actions używa dispatchera do wysyłania akcji i Store rejestrów do Dispatchera, aby otrzymać powiadomienie (więc za każdym razem nie jest to nowy Dispatcher). Jak zatem osiągnąć ten "globalny" zasięg lub jakkolwiek się nazywa? Jak osiągnąć to za pomocą klas ES6 (modułów)?JavaScript i ES6, zmienne "globalne"

To pytanie może być niejasne z powodu braku doświadczenia w programowaniu prawdziwych skryptów JavaScript, mam nadzieję, że dzięki komentarzom społeczności będę mógł to załatwić.

Odpowiedz

42

Zawsze można przypisać zmienne do window.MyClass = whatever (global.MyClass dla nodejs) bez względu na to, gdzie jesteś, i uzyskać dostęp do tych wartości z dowolnego innego pliku w aplikacji. Nie zawsze jest to najlepszy sposób udostępniania danych globalnie w aplikacji. Moduł ładujący moduły w nodejs (lub AMD w ES6) pobiera wszystko, co eksportujesz i buforuje. Powiedzmy, że mamy plik, takich jak:

MyModule.js:

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

export default (new MyClass); 

teraz ilekroć wymaga tego pliku od gdzie indziej, zawsze jesteśmy poświęca tym samym wystąpieniu MyClass. To znaczy:

file1.js:

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

file2.js:

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

ten jest nazywany Singleton, gdzie mijamy wokół jednego wspólnego wystąpienia z klasy wszystko w całej aplikacji . W ten sposób uzyskujemy dostęp do tego samego wystąpienia MyClass z różnych plików, a wszystko to bez zanieczyszczania zasięgu globalnego (unikamy wykonywania przypisań do global.MyClass, ale zapewniamy tę samą funkcjonalność).

+0

Perfect, ja eksportowała swoje zajęcia jak '' 'domyślnie eksportu MyClassName''' – vicaba

+1

@vicaba jeszcze więcej kontekście wzór I Wyrażone powyżej jest nazywane pojedynczym wzorem^gdzie przechodzisz wokół jednego wspólnego wystąpienia twojej klasy w swoim projekcie – Macmee

+0

Wiem, ale nie byłem pewien czy w JavaScript zostałem nazwany tak samo, Jeszcze raz dziękuję :) – vicaba

6

To, czego szukasz, to stworzyć singleton. Od 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; 
 
    } 
 
}

testowałem to i to działa. Po prostu zamienisz this.time = new Date() na this.singletonFunction = function() {}. Gdzie chcesz używać go wykonać import następnie

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