JavaScript и ES6, "глобальные" переменные

Я работаю с небольшими фрагментами JavaScript в течение 3 лет, но теперь я создаю приложение React, и я вхожу в него. Есть основная вещь, которую я не понимаю. React использует диспетчер и хранилища для создания своего шаблона потока, то, что я не получаю, заключается в том, что этот диспетчер отображается во всем приложении, потому что действия используют диспетчер для отправки действий и хранения регистра в диспетчер для получения уведомления (так это не новый диспетчер каждый раз). Итак, как я могу достичь этого "глобального" масштаба или как он называется? Как это можно достичь с помощью классов ES6 (модулей)?

Этот вопрос может быть неясным из-за моего отсутствия опыта программирования реального JavaScript, я надеюсь, что с помощью hep комментариев сообщества я смогу это устроить.

Ответы

Ответ 1

Вы всегда можете назначать переменные window.MyClass = whatever (global.MyClass для nodejs) независимо от того, где вы находитесь, и получать доступ к этим значениям из любого другого файла в вашем приложении. Это не всегда лучший способ совместного использования данных в глобальном масштабе в вашем приложении. Загрузчик модуля в nodejs (или AMD в ES6) берет все, что вы экспортируете и кэширует. Допустим, у вас есть файл вроде:

MyModule.js:

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

export default (new MyClass);

теперь, когда мы требуем этот файл из других источников, мы ВСЕГДА получаем ТОЧНЫЙ экземпляр MyClass. Это означает:

file1.js:

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

file2.js:

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

Это называется шаблоном singleton, где мы передаем один общий экземпляр вашего класса во всем приложении. Таким образом, мы можем получить доступ к тому же экземпляру MyClass из разных файлов, без загрязнения глобальной области (мы избегаем назначений global.MyClass, но выполняем те же функции).

Ответ 2

То, что вы ищете, это создать синглтон. Из 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;
  }
}