Javascript 使用事件侦听器时更新类数据

我正在构建一个简单的绘图应用程序。 假设我有4门课：

App.js handles the communication between the classes
Pixels.js stores the image data
Display.js displays the data
Load.js loads in data

通常，在应用程序类中，我可以执行以下操作

$('#icon-flip').mouseup((e) =>
{
  this.pixels.flip_pixels();
  this.display.update(this.pixels.get_pixels());
});

现在我添加了一个Load类，我的问题是我不知道如何让App类知道数据已完全加载和处理，因为Load类不应该知道App类

这是负载类

class Load
{

  constructor(config)
  {
    this.config = config;
    this.setup_load_input();
  }

  setup_load_input()
  {
    let element = document.createElement('div');
    element.innerHTML = '<input type="file" id="input-load" style="display: none">';
    let fileInput = element.firstChild;
    document.body.append(fileInput);
    var that = this;
    fileInput.addEventListener('change',function() {  that.read_file_data(fileInput); });
  }

  read_file_data(fileInput)
  {
    var file = fileInput.files[0];

      if (file.name.match(/\.(spm|json)$/)) 
      {
        var reader = new FileReader();
        reader.onload = () => 
        {
          this.parse_file(reader.result);
        };
        reader.readAsText(file);    
      } else {
          alert("File not supported, .spm or .json files only");
      }
  }


  parse_file(file) 
  {
    this.imported_file = JSON.parse(file);
  }

  get_imported_file()
  {
    return this.imported_file;
  }

}

数据加载和解析后，我需要

this.pixels.update(this.load.get_imported_file());
this.display.update(this.pixels.get_pixels());

但是我不知道如何做，因为我不知道Load类何时完成数据处理。我想解决办法可能是回拨，但因为我是个笨蛋，我不知道怎么回拨

---

很抱歉我的帖子太长，代码质量太差。谢谢你的支持

您可以将事件处理程序传递给

Load

？例如：

/* App.js */

function updateThings() {
    this.pixels.flip_pixels();
    this.display.update(this.pixels.get_pixels());
}

// then later...
new Load({ onLoad: updateThings.bind(this) });

/* Load.js */

// In read_file_data()...
reader.onload = () => {
   this.parse_file(reader.result);
   this.config.onLoad();
};

---

这不会解决你的问题，但是你应该把你的卷发放在同一条线上，而不是放在新的线上。如果你的评论以“这不会解决你的问题”开头，那么也许最好不要离开它+感谢Allman Braces非常感谢您提供此解决方案并花时间关注我的问题。我真的很感激，这很有帮助！

/* App.js */

function updateThings() {
    this.pixels.flip_pixels();
    this.display.update(this.pixels.get_pixels());
}

// then later...
new Load({ onLoad: updateThings.bind(this) });

/* Load.js */

// In read_file_data()...
reader.onload = () => {
   this.parse_file(reader.result);
   this.config.onLoad();
};