Javascript 使用节点JS事件创建自己的状态管理器

我正在尝试使用Node.js“events”和模块化ES6构建自己的状态管理器，但我对如何使其工作感到有点困惑。基本上我有一个

Loader.js

，它可以加载我需要的所有图像。加载完成后，我想将

Manager.js中的状态更改为
Loaded
，现在只需执行
console.log（'Loaded all content！'）。我有加载图像的功能，还有状态管理器，但是如何从
Loader.js
发出事件，让状态管理器运行
changeState（）

编辑：我尝试了此操作，但出现错误
无法读取未定义at函数的属性“emit”。LoadeImage

Loader.js

'use strict';

import Manager from './Manager';

const DIRECTORY = 'assets/img/';

const IMG = {
  BACKGROUND_01: 'background_01.jpg',
  PLAYER_01: 'player_01.png',
  KEEPER_01: 'keeper_01.png'
}

export default class Loader {
  constructor() {
    this.load();
  }

  load() {
    this.imageCount = 0;
    this.loadCount = 0;

    this.loadImage(IMG.BACKGROUND_01);
    this.loadImage(IMG.PLAYER_01);
    this.loadImage(IMG.KEEPER_01);

    if (this.loadCount === this.imageCount) {
      console.log('Loaded images!');
      // Call Manager
      Manager.loadedImages();
    }
  }

  loadImage(image) {
    this.imageCount++;
    let img = new Image();
    img.src = DIRECTORY + image;
    img.onload = this.loadCount++;
    console.log('Loaded: ' + image);
  }
}

'use strict';

import emitter from 'events';
import Canvas from './Canvas';
import Loader from './Loader';

class StateManager extends emitter {
  constructor () {
    super();
  }
}

export default class Manager {
  constructor() {
    this.init();
  }

  init() {
    this.Canvas = new Canvas();
    this.Loader = new Loader();

    this.state = new StateManager();
    this.state.on('loaded', this.changeState());
  }

  static loadedImages() {
    //Emit loaded event
    this.state.emit('loaded');
  }

  changeState() {
    //If state is loaded
    console.log('Loaded all content!');
  }
}

'use strict';

import Manager from './Manager';

const DIRECTORY = 'assets/img/';

const IMG = {
  BACKGROUND_01: 'background_01.jpg',
  PLAYER_01: 'player_01.png',
  KEEPER_01: 'keeper_01.png'
}

export default class Loader {
  constructor() {
  }

  setup(state) {
    this.state = state;
    this.load();
  }

  load() {
    this.imageCount = 0;
    this.loadCount = 0;

    this.loadImage(IMG.BACKGROUND_01);
    this.loadImage(IMG.PLAYER_01);
    this.loadImage(IMG.KEEPER_01);

    if (this.loadCount === this.imageCount) {
      console.log('Loaded images!');

      this.state.setState('loaded');
    }
  }

  loadImage(image) {
    this.imageCount++;
    let img = new Image();
    img.src = DIRECTORY + image;
    img.onload = this.loadCount++;
    console.log('Loaded: ' + image);
  }
}

Manager.js

'use strict';

import Manager from './Manager';

const DIRECTORY = 'assets/img/';

const IMG = {
  BACKGROUND_01: 'background_01.jpg',
  PLAYER_01: 'player_01.png',
  KEEPER_01: 'keeper_01.png'
}

export default class Loader {
  constructor() {
    this.load();
  }

  load() {
    this.imageCount = 0;
    this.loadCount = 0;

    this.loadImage(IMG.BACKGROUND_01);
    this.loadImage(IMG.PLAYER_01);
    this.loadImage(IMG.KEEPER_01);

    if (this.loadCount === this.imageCount) {
      console.log('Loaded images!');
      // Call Manager
      Manager.loadedImages();
    }
  }

  loadImage(image) {
    this.imageCount++;
    let img = new Image();
    img.src = DIRECTORY + image;
    img.onload = this.loadCount++;
    console.log('Loaded: ' + image);
  }
}

'use strict';

import emitter from 'events';
import Canvas from './Canvas';
import Loader from './Loader';

class StateManager extends emitter {
  constructor () {
    super();
  }
}

export default class Manager {
  constructor() {
    this.init();
  }

  init() {
    this.Canvas = new Canvas();
    this.Loader = new Loader();

    this.state = new StateManager();
    this.state.on('loaded', this.changeState());
  }

  static loadedImages() {
    //Emit loaded event
    this.state.emit('loaded');
  }

  changeState() {
    //If state is loaded
    console.log('Loaded all content!');
  }
}

'use strict';

import Manager from './Manager';

const DIRECTORY = 'assets/img/';

const IMG = {
  BACKGROUND_01: 'background_01.jpg',
  PLAYER_01: 'player_01.png',
  KEEPER_01: 'keeper_01.png'
}

export default class Loader {
  constructor() {
  }

  setup(state) {
    this.state = state;
    this.load();
  }

  load() {
    this.imageCount = 0;
    this.loadCount = 0;

    this.loadImage(IMG.BACKGROUND_01);
    this.loadImage(IMG.PLAYER_01);
    this.loadImage(IMG.KEEPER_01);

    if (this.loadCount === this.imageCount) {
      console.log('Loaded images!');

      this.state.setState('loaded');
    }
  }

  loadImage(image) {
    this.imageCount++;
    let img = new Image();
    img.src = DIRECTORY + image;
    img.onload = this.loadCount++;
    console.log('Loaded: ' + image);
  }
}

编辑
实际上我已经修复了它，我必须将
状态管理器
传递给
加载程序
：

Loader.js

'use strict';

import Manager from './Manager';

const DIRECTORY = 'assets/img/';

const IMG = {
  BACKGROUND_01: 'background_01.jpg',
  PLAYER_01: 'player_01.png',
  KEEPER_01: 'keeper_01.png'
}

export default class Loader {
  constructor() {
    this.load();
  }

  load() {
    this.imageCount = 0;
    this.loadCount = 0;

    this.loadImage(IMG.BACKGROUND_01);
    this.loadImage(IMG.PLAYER_01);
    this.loadImage(IMG.KEEPER_01);

    if (this.loadCount === this.imageCount) {
      console.log('Loaded images!');
      // Call Manager
      Manager.loadedImages();
    }
  }

  loadImage(image) {
    this.imageCount++;
    let img = new Image();
    img.src = DIRECTORY + image;
    img.onload = this.loadCount++;
    console.log('Loaded: ' + image);
  }
}

'use strict';

import emitter from 'events';
import Canvas from './Canvas';
import Loader from './Loader';

class StateManager extends emitter {
  constructor () {
    super();
  }
}

export default class Manager {
  constructor() {
    this.init();
  }

  init() {
    this.Canvas = new Canvas();
    this.Loader = new Loader();

    this.state = new StateManager();
    this.state.on('loaded', this.changeState());
  }

  static loadedImages() {
    //Emit loaded event
    this.state.emit('loaded');
  }

  changeState() {
    //If state is loaded
    console.log('Loaded all content!');
  }
}

'use strict';

import Manager from './Manager';

const DIRECTORY = 'assets/img/';

const IMG = {
  BACKGROUND_01: 'background_01.jpg',
  PLAYER_01: 'player_01.png',
  KEEPER_01: 'keeper_01.png'
}

export default class Loader {
  constructor() {
  }

  setup(state) {
    this.state = state;
    this.load();
  }

  load() {
    this.imageCount = 0;
    this.loadCount = 0;

    this.loadImage(IMG.BACKGROUND_01);
    this.loadImage(IMG.PLAYER_01);
    this.loadImage(IMG.KEEPER_01);

    if (this.loadCount === this.imageCount) {
      console.log('Loaded images!');

      this.state.setState('loaded');
    }
  }

  loadImage(image) {
    this.imageCount++;
    let img = new Image();
    img.src = DIRECTORY + image;
    img.onload = this.loadCount++;
    console.log('Loaded: ' + image);
  }
}

Manager.js

'use strict';

import emitter from 'events';
import Canvas from './Canvas';
import Loader from './Loader';

class StateManager extends emitter {
  constructor () {
    super();
    this.currentState = '';
  }

  setState(id) {
    this.currentState = id;
    console.log(this.currentState);

    this.emit(id);
  }
}

export default class Manager {
  constructor() {
    this.init();
  }

  init() {
    this.state = new StateManager();
    this.state.on('loaded', this.changeState);

    this.Canvas = new Canvas();
    this.Loader = new Loader();

    this.Loader.setup(this.state);
  }

  changeState() {
    console.log('Loaded all content! Lets go!')
  }
}

loadeImage
是
静态的
，因此您无法访问参数
状态