通用的postMessage实现, 用于父子页面通信

| 标题 | 内容 | | --- | --- | |系统名称 | common-postmessage | |项目负责人 | 阿吉 | | 作者 | 阿吉 | | 文档提交日期 | 2022.4.4 |

修订历史

|版本号 | 作者 | 修订章节 | 修订原因 | 修订日期 | |---|---|---|---|---| | 1.0 | 阿吉 | 父子页面单例通信 | 初次发包 | 2022.4.4 |

1. 背景

通用的postMessage实现, 用于父子页面通信, 落地于低代码平台等项目

如果通信代码位于业务仓中, 如果是两个仓库, 则维护更加不方便。

所以, 将其进行收拢到此npm包中, 方便后续业务延伸和扩展, 使用规范化且逻辑层聚拢于业务项目中, 提升开发效率和调试效率。

2. 对外API说明

2-1. 父页面API

/** 父页面 接口定义 */
export interface ParentWindowInterface<ParentPostAction extends ActionValType> {
  /** 发送数据给子页面 */
  postChildMesage(iframeName: string, data: PostMessageData<ParentPostAction>): void;
  /** 获取当前页面下所有 Iframe 的初始化情况 */
  getIframeInitMap(): any;
  /** 记录当前页面下所有 Iframe 的初始化完成情况 */
  updateIframeInitMap(iframeName: string): void;
  /** 获取自定义集合 */
  getCustomizedMap(): any;
  /** 增量更新自定义集合 */
  updateCustomizedMap(data: any): void;
}

/** 父页面 Props定义 */
export interface ParentWindowProps<ChildPostAction extends ActionValType> {
  /** 父页面要监听message的策略模式对象 */
  pageActionMap: PageActionMap<ChildPostAction>;
  /** 父页面自定义配置, 如父页面postmessage事件等 */
  customizedMap: any
}

2-1. 子页面API

/** 子页面 接口定义 */
export interface ChildWindowInterface<ChildPostAction extends ActionValType> {
  /** 发送数据给父页面 */
  postFatherMesage(data: PostMessageData<ChildPostAction>): void;
  /** 获取自定义集合 */
  getCustomizedMap(): any;
  /** 增量更新自定义集合 */
  updateCustomizedMap(data: any): void;
}

/** 子页面 Props定义 */
export interface ChildWindowProps<ParentPostAction extends ActionValType> {
  /** 子页面要监听message的策略模式对象 */
  pageActionMap: PageActionMap<ParentPostAction>;
  /** 子页面自定义配置, 如子页面postmessage事件等 */
  customizedMap: any
}

3. 使用范例

父子页面使用的通用配置, 如下:

建议 ：枚举均采用独一无二的字符串 区分 。

// common.ts
import { BaseActionCmd } from '@/common-postmessage';
// BaseActionCmd 中定义了十数个字段, 可用于业务侧的父子页通用行为标识, 当此字段数量不够用时, 该包支持自定义枚举


// 建议：优先使用 BaseActionCmd, 根据业务需求赋予其命令不同含义 。业务侧自定义枚举采用独一无二的字符串区分。

// 业务侧自定义枚举: 子页面传递给父页面的事件命令
enum ChildPostAction {
  /** 更新父页面的top值 */
  UPDATE_PARENT_TOP = 'UPDATE_PARENT_TOP',
}

// 业务侧自定义枚举: 父页面传递给子页面的事件命令
enum ParentPostAction {
  /** 更新子页面的bottom值 */
  UPDATE_CHILD_BOTTOM = 'UPDATE_CHILD_BOTTOM',
}

在父页面中, 如下使用:

import { getParentWindowCtrl, ParentWindowProps } from '@/common-postmessage';
import { ChildPostAction, ParentPostAction } from './common';

// 业务侧自定义: 父页面通信事件集合 (父页面根据收到的子页面的数据, 触发对应的父页面事件)
const PARENT_ACTION_MAP = {
  [ChildPostAction.UPDATE_PARENT_TOP]: () => {},
};

// 业务侧自定义: 父页面通信事件集合 (父页面根据收到的子页面的数据, 触发对应的父页面事件)
const PARENT_ACTION_MAP = {
  [ChildPostAction.UPDATE_PARENT_TOP]: () => {},
};

/** 
 * 页面通信自定义业务配置
 * @desc 可选填
 * @desc 可以放一些父页面专用的配置项
 */
const INIT_CUSTOMIZED_MAP = {
  /** 初始化数据 */
  awaitInitData: '',
  /** 发送数据 */
  awaitPostData: '',
};

const configProps: ParentWindowProps<ChildPostAction> = {
  pageActionMap: PARENT_ACTION_MAP,
  customizedMap: INIT_CUSTOMIZED_MAP,
}

// App 页面初始化时: vue-mounted, react-didmount
getParentWindowCtrl<ChildPostAction, ParentPostAction>(configProps);

// 在别的页面调用时, 可无需挂在到 store 中, 直接调用即可获得单例
// 使用时一定要在 初始化 调用结束之后!!!
const parentWindow = getParentWindowCtrl();

在子页面中, 如下使用:

import { getChildWindowCtrl, ChildWindowProps } from '@/common-postmessage';
import { ChildPostAction, ParentPostAction } from './common';

// 业务侧自定义: 子页面通信事件集合 (子页面根据收到的父页面的数据, 触发对应的子页面事件)
const CHILD_ACTION_MAP = {
  [ParentPostAction.UPDATE_CHILD_BOTTOM]: () => {},
};

/** 
 * 页面通信自定义业务配置
 * @desc 可选填
 * @desc 可以放一些子页面专用的配置项
 */
const INIT_CUSTOMIZED_MAP = {
  /** 通知父页面, 当前scrolltop变化 */
  postScrollTopCmd: () => {},
};

const configProps: ChildWindowProps<ParentPostAction> = {
  pageActionMap: CHILD_ACTION_MAP,
  customizedMap: INIT_CUSTOMIZED_MAP,
}

// App 页面初始化时: vue-mounted, react-didmount
getChildWindowCtrl<ChildPostAction, ParentPostAction>(configProps);

// 在别的页面调用时, 可无需挂在到 store 中, 直接调用即可获得单例
// 使用时一定要在 初始化 调用结束之后!!!
const childWindow = getChildWindowCtrl();