假设我想创建在某些实体(如姓名、电话号码、地址等)发生更改时触发的自定义事件...处理此问题的正确方法是什么?
第一种方法: 创建单个自定义事件并在 1 个回调中处理所有实体更改
// custom event
document.dispatchEvent(
new window.CustomEvent(`ENTITY_UPDATE`, {
detail: { type: `name || phone || address` }
})
)
//listener for the custom events
document.addEventListner(`ENTITY_UPDATE`, ({detail:{type}}) => {
switch(type) {
case `name`: //handle name change
case `phone`: //handle phone change
case `address`: //handle address change
}
})
第二种方法: 为每个实体创建单独的自定义事件,并为它们提供单独的回调。
// custom event for Team
document.dispatchEvent(
new window.CustomEvent(`NAME_UPDATE`, {
detail: {data }
})
)
// event handler
document.addEventListner(`NAME_UPDATE`, ({detail:data}) => {//handle team data})
// similarly we create separate custom events for phone and address
我想独立处理所有实体更改。处理这个问题的正确方法是什么?
我只是想就这里遵循的最佳方法获得意见。
“更好”是一个很难回答的问题(StackOverflow 并不是讨论意见问题的最佳场所),但可以相对客观地看待它。关于速度之类的问题存在争议,但在大多数情况下,特别是如果您独立开发一个项目,可维护性是最重要的。
如果您独立处理所有情况,则单独处理所有事件可能更有意义。它使代码更加一目了然,并且可能更容易进一步修改。
如果您问哪个更快,那么差异几乎可以肯定可以忽略不计。您可以对其进行基准测试,但对于大多数用例来说,它实际上并不重要。