JavaScript如何实现生成通用message事件处理函数的高阶函数？

核心代码 #

function generateHandler(targetListener, dataCallback) {
  // 返回符合message事件规范的处理函数
  return function messageHandler ({ data, origin }) {
    // 同源校验，避免跨域消息安全风险
    if (origin !== window.location.origin) return;
    // 匹配listener标识和事件类型
    if (data?.listener === targetListener && data?.event === 'rowclick') {
      // 执行自定义回调，传入datarow数据
      dataCallback(data.datarow);
    }
  }
}

调用方式 #

和你预期的用法完全一致：

window.addEventListener('message', generateHandler(this.listener, (datarow) => {
  this.recordId = datarow;
}));

兼容&扩展说明 #

• 如果运行环境不支持ES2020的可选链语法，把data?.listener替换为data && data.listener、data?.event替换为data && data.event即可
• 如果后续需要适配其他事件类型，可以新增第三个可选参数eventName = 'rowclick'，把判断逻辑里的固定'rowclick'替换为这个参数即可，不需要修改现有调用逻辑
• 传入回调使用箭头函数即可自动绑定当前实例的this，不需要额外做bind处理

内容的提问来源于stack exchange，提问作者Chuck