post-bridge

Version: 2

重新封装 postMessage，使其更易用。 A simple package to make post-message easily to use.

how to install ?

yarn add post-bridge
# or
npm i post-bridge

how to use ?

import postBridge from 'post-bridge';

/**
 * @param { json } configure - 对 `Bridge` 进行设置
 *  @prop { string } namespace - 必填, 表示当前 `Bridge` 实例的名称
 *  @prop { object } target - 默认: window, 表示发送 `postMessage` 的目标（对象）
 *  @prop { object } origin - 默认: window, 表示发送 `postMessage` 的来源（对象）
 * @param { json } handlers - `Bridge` 生命周期函数
 *  @method onConnect - 成功建立连接时触发
 *  @method onAnswer - 发送消息时，响应成功或失败时触发
 *  @method onSend - 发送消息前触发，可对发送数据进行加工处理
 * ======== ======== ========
 */
const Bridge = new postBridge(
  // Configure
  { namespace: `sample`, target: window.parent },

  // Handlers
  {
    // 成功建立连接时触发
    onConnect(scope) {
      console.log(scope);
    },

    // 发送消息时，响应成功或失败时触发
    onAnswer({ origin, space, timeout }) {
      if (timeout) {
        return console.error(`Response Timeout !!`);
      }
      console.log(`Send Message from ${origin} to ${space}`);
    },

    // 发送消息前触发，可对发送数据进行加工处理
    onSend(data) {
      return data;
    }
  }
);

/**
 * @name 监听消息
 * @param { string } space - 监听来自 `命名空间` 的消息
 * @param { function } action - 所监听消息的回调函数
 * ======== ======== ========
 */
Bridge.on('test', (data) => {
  console.log(data.say); // hello world !!
});

/**
 * @name 发送消息
 * @param { string } space - 向 `命名空间` 发送消息
 * @param { json } data - 所发送消息的数据实体
 * ======== ======== ========
 */
Bridge.send('test', { say: `hello world !!` });