javascript - 在 Javascript 回调列表中添加/删除方法

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 5 年前。

Improve this question

我有一个对象，用于存储页面上 UI 小部件的所有实例，其中一些实例在创建小部件时将回调作为选项传递。

Page.menu = Widget.sidePanel({
  trigger: "#menu-toggler",
  panel: "#menu-panel",
  onOpen: function(){
    Page.otherPanel.close();
    Page.yetAnother.close();
  }
}),

创建后，“onOpen”选项在“Page.menu.onOpen”中存储/可访问，并由“open”方法调用，例如:

this.open(){
  // ... panel opening stuff
  this.onOpen.apply();
}

我正在寻找一种从回调中添加/删除方法的方法。我想过将回调方法设置为数组，但这需要用一个函数包装每个方法(否则如果该方法尚未设置，JS 会提示(例如，回调方法之一是关闭尚未设置的面板)创建))。

Answer 1

我会这样做:

Page.menu = Widget.sidePanel({
  onOpenHandlers: [],
  onOpen: function(){
    console.log('menu is going to be open');
    for(var i = 0; i < this.onOpenHandlers.length; i++) {
      this.onOpenHandlers[i]();
    }
  }
});

然后您需要填充该处理程序列表:

Page.menu.onOpenHandlers.push(Page.otherPanel.close);
Page.menu.onOpenHandlers.push(function() {
  console.log('yetAnother is being closed due to menu open');
  Page.yetAnother.close();
});

<小时/>

如果您需要删除处理程序，您可以为处理程序列表构建更复杂的结构:

[
  {
    id: 'some_unique_handler_id',
    run: function() { /* some handler logic */ }
  },
  //...
]

这需要额外的调用:

for(var i = 0; i < this.onOpenHandlers.length; i++) {
  this.onOpenHandlers[i].run();
}

然后应该实现两个方法(在某个地方，在 Page.utils 上甚至全局):

function addHandler(list, id, run) {
  var found = list.find(function(item) { return item.id === id });
  if(found) { // just replace the callback
    found.run = run;
  }
  else {
    list.push({ id: id, run: run});
  }
}

function removeHandler(list, id) {
  var foundIndex = list.findIndex(function(item) { return item.id === id });
  if(foundIndex >= 0) {
    list.splice(foundIndex, 1);
  }
}

用法很明显:

addHandler(Page.menu.onOpenHandlers, "otherPanelId", Page.otherPanel.close);
addHandler(Page.menu.onOpenHandlers, "yetAnotherId", function() {
  console.log('yetAnother is being closed due to menu open');
  Page.yetAnother.close();
});

removeHandler(Page.menu.onOpenHandlers, "otherPanelId");

对 find 和 findIndex 感到抱歉!只是为了让这个移植变得更简单。