JavaScript Postmessage 类实现页面间通信

这段代码定义了一个名为 Postmessage 的类，用于处理页面间的消息传递。

import store from '../store'

class Postmessage {
  constructor() {
    this.targetOrigin = process.env.NODE_ENV === 'production' ? window.location.origin : 'http://127.0.0.1:3011'
    this.postMessageType = {
      pageHeightChange: 'pageHeightChange',
      pageChange: 'pageChange',
      setActive: 'setActive'
    }
  }
  postMessage(type, json) {
    let message = {
        type: this.postMessageType[type],
        value: json
    }
    window.parent.postMessage(message, this.targetOrigin)
  }
  listenMessage() {
    window.addEventListener('message', (event) => {
      if (event.origin === this.targetOrigin) {
        switch (event.data.type) {
          case 'pageChange':
            store.commit('changeComponent', event.data.value)
            break
          case 'setPreview':
            store.commit('setPreview', event.data.value)
            break
          case 'deletePreview':
            store.commit('deletePreview', event.data.value)
            break
          case 'setActive':
            store.commit('setActiveId', event.data.value)
            break
          default:
        }
      }
    }, false)
  }
}

export default new Postmessage()

代码功能解析

1. 构造函数：

targetOrigin：定义了消息传递的目标域，在生产环境下为当前页面的 origin，开发环境下则为 http://127.0.0.1:3011。
postMessageType：定义了不同类型的消息，例如 pageHeightChange、pageChange、setActive 等。

2. postMessage 方法：

用于向父页面发送消息。
接收两个参数：type 表示消息类型，json 表示消息内容。
将消息类型和内容封装成一个 message 对象，并使用 window.parent.postMessage 方法发送到父页面。

3. listenMessage 方法：

用于监听来自父页面的消息。
通过 window.addEventListener 监听 message 事件。
判断消息来源是否为 targetOrigin，如果是则根据消息类型执行相应的操作。
例如，pageChange 消息会触发 store.commit('changeComponent', event.data.value)，更新组件状态；setActive 消息会触发 store.commit('setActiveId', event.data.value)，设置当前激活的 ID。

4. 模块导出：

通过 export default 将 Postmessage 类作为一个模块导出，供其他模块使用。

总结

Postmessage 类通过 postMessage 和 listenMessage 方法实现了页面间消息传递，方便不同页面之间共享数据和进行交互。

应用场景：

多个页面之间共享数据，例如购物车、登录状态等。
不同页面之间进行交互，例如在子页面修改数据后更新父页面内容。
实现页面间通信，例如 iframe 内嵌页面与父页面通信。