黄江镇做网站,吉林电商网站建设,wordpress编辑器没有16px,广州网站建设50强名单前言
开发过程中无法避免遇到需要进行多标签通讯的情况#xff0c;例如#xff1a;
管理员登陆后#xff0c;其他打开标签的页面登陆状态要变更课堂页面只能打开一个#xff0c;另一个则通知失效等等。。。场景
然而实现该功能#xff0c;我们需要使用页面能共同持有的…前言
开发过程中无法避免遇到需要进行多标签通讯的情况例如
管理员登陆后其他打开标签的页面登陆状态要变更课堂页面只能打开一个另一个则通知失效等等。。。场景
然而实现该功能我们需要使用页面能共同持有的渠道 localStorage 或者 Cookie 进行判断不可避免的要实现一堆代码但是现在都过去了我们有了更好的封装组件 bridge-page 只需要简单的引入即可。
快速开始
为了解决这复杂的问题我开发了 bridge-page 来帮助大家优雅的解决这类问题。
npm install bridge-page
# pnpm
pnpm install bridge-page
# yarn
yarn add bridge-page桥接页面
页面A a.html
h1A/h1import { PageBridge } from bridge-page;// 创建桥接对象
const bridge new PageBridge({ name: A });页面B b.html
h1B/h1import { PageBridge } from bridge-page;// 创建桥接对象
const bridge new PageBridge({ name: B });页面信息
// 获取当前页面信息
bridge.getId(); // 当前页面ID
bridge.getName(); // 当前页面名称
bridge.getData(); // 当前页面数据
bridge.getPage(); // 当前页面对象
// 获取指定页面信息
bridge.getPage(); // 当前页面
bridge.getPage(LVXJ7I56-CAV9930MH3A); // 指定ID页面
bridge.getPage(Name); // 指定名称页面
bridge.getPage((vo) vo.data.label Good vo.name A); // 指定条件页面
// 获取指定页面列表
bridge.getPages(); // 所有页面列表
bridge.getPages(LVXJ7I56-CAV9930MH3A); // 指定ID页面列表
bridge.getPages(Name); // 指定名称页面列表
bridge.getPages((vo) vo.data.label Good vo.name A); // 指定条件页面列表
// 设置当前页面信息
bridge.setName(A); // 设置当前页面名称
bridge.setData({ label: Good }); // 设置当前页面数据订阅/发布
窗口初始化
// 当前窗口初始化
bridge.ready(async () {console.log(Ready);
});订阅消息
// 订阅事件广播
bridge.on(visit, async (vo: PageMessage) {// vo.getData(); # 获取请求数据
});// 订阅事件请求
bridge.on(say, async (vo: PageMessage) {// vo.getData(); # 获取请求数据return 我是 Main;
});// 取消订阅事件
bridge.off(say);发布广播
bridge.send({method: visit, // 方法名称data: { from: Main }, // 请求数据page?: LVXJ7I56-CAV9930MH3A, // 指定窗口IDpage?: null, // 所有窗口page?: Name, // 指定窗口名称page?: (vo) vo.data.label Good vo.name A, // 指定条件窗口
});请求响应
// 请求指定窗口
bridge.request({method: say, // 方法名称data: { from: Main }, // 请求数据target?: LVXJ7I56-CAV9930MH3A, // 指定窗口IDtarget?: undefined, // 当前窗口
}).then((vo: any) {console.log(say.then, vo);
}).catch((error: Error) {console.log(say.catch, vo);
});
