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抱歉！只是为了让这种移植更简单。

在Javascript

1 个答案: