Nasty Pinguin Manure

    @alicloud/post-message
    TypeScript icon, indicating that this package has built-in type declarations

    1.6.6 • Public • Published

    @alicloud/post-message

    封装 postMessage 相关,有可以将 postMessage 转化成 Promise 的方法。

    注意:需要使用者自己保证 Promise。

    INSTALL

    tnpm i @alicloud/post-message -S

    Usage

    import {
      broadcast,
      broadcastInParent,
      broadcastPromise,
      subscribe,
      subscribeOnce,
      subscribePromise,
      unsubscribe,
      unsubscribeOnce
    } from '@alicloud/post-message';
    
    // 广播事件
    broadcast<T>(message, payload); // 这里 T 是 __payload__ 的类型定义
    
    // 接收事件
    function receiver(payload: T) {
      // do sth.
    }
    
    const unsubscribe = subscribe<T>(message, receiver); // 适时地使用 unsubscribe 注销

    APIs

    /**
     * 广播消息
     */
    function broadcast<P = void>(type: string, payload?: P, targetOrigin?: string): void;
    
    /**
     * 去父窗口进行广播
     */
    function broadcastInParent<P = void>(type: string, payload?: P, targetOrigin?: string): void;
    
    /**
     * 广播事件,返回 Promise,必须要有 subscribePromise 来承接该事件,否则此 Promise 将永远无法结束
     */
    function broadcastPromise<T = void, P = void>(type: string, payload: P): Promise<T>;
    
    /**
     * 注册回调,返回可用于反注册的方法
     */
    function subscribe<P = void>(type: string, fn: (payload?: P) => void): () => void;
    
    /**
     * 注册单次回调,运行一次后将自动移除
     */
    function subscribeOnce<P = void>(type: string, fn: (payload?: P) => void): () => void;
    
    /**
     * 对 broadcastPromise 对应的 type 进行响应,这里关心的 payload 还是 broadcastPromise 所传入的 payload
     */
    function subscribePromise<T = void, P = void>(type: string, fn: (payload: P) => Promise<T>): () => void;
    
    /**
     * 反注册对 type 的某一回调,一般推荐用 subscribe 的返回
     */
    function unsubscribe(type: string, fn: Function): void;
    
    /**
     * 反注册对 type 的某一单次回调(有必要的场景)
     */
    function unsubscribeOnce(type: string, fn: Function): void;

    关于 unsubscribe,一般情况下,你不需要手动调用,可以直接使用 subscribe 返回的无参方法即可。

    使用 hook 的例子

    import {
      useEffect
    } from 'react';
    
    import {
      broadcast,
      subscribe
    } from '@alicloud/post-message';
    
    function SomeComponent(): JSX.Element {
      useEffect(() => {
         // 返回的 unsubscribe 方法会在适当的实际进行反注销
        return subscribe(_SOME_MESSAGE_TYPE_ENUM_, () => {
          // ... do sth
        });
      }, []);
      
      return <></>;
    }

    使用 class 的例子

    import {
      Component
    } from 'react';
    
    import {
      broadcast,
      subscribe
    } from '@alicloud/post-message';
    
    class SomeComponent extends Component {
      _unsubscribe?(): void;
      
      componentDidMount(): void {
        this._unsubscribe = subscribe(_SOME_MESSAGE_TYPE_ENUM_, () => {
          // ... do sth
        });
      }
      
      componentWillUnmount(): void {
        if (this._unsubscribe) {
          this._unsubscribe();
          
          delete this._unsubscribe;
        }
      }
      
      render(): JSX.Element {
        return <></>;
      }
    }

    Install

    npm i @alicloud/post-message

    DownloadsWeekly Downloads

    185

    Version

    1.6.6

    License

    MIT

    Unpacked Size

    33.4 kB

    Total Files

    55

    Last publish

    Collaborators

    • jacksontian
    • fengmk2
    • pagecao
    • aliyunsdkteam
    • console-fe