广播通道与页面可见性协同的多标签页同步方法及系统与流程

本发明涉及web应用的数据通信及状态管理，具体涉及一种广播通道与页面可见性协同的多标签页同步方法及系统。本发明适用于浏览器多标签页环境下状态管理库实例及事件总线实例之间的状态变更或事件消息同步。

背景技术：

1、随着单页应用及前端状态管理技术的发展，同一浏览器中同时打开同一web应用的多个标签页已成为常见使用方式。不同标签页分别维护各自的运行上下文和内存状态，当一个标签页中的状态数据、配置数据或事件响应发生变化时，其他标签页通常不能直接感知该变化，需要借助浏览器提供的跨上下文通信能力传递相应信息。

2、现有跨标签页同步方案通常通过广播通道、存储事件或共享工作线程等方式发送状态变更消息。其中，采用广播通道的方案能够在同源标签页之间建立消息传输链路，但一般需要开发人员针对具体状态管理库或事件总线分别编写消息封装、发送和接收逻辑，并在各业务调用位置额外设置同步条件。不同实例所提供的原子操作方法及参数形式存在差异，使同步配置容易分散在业务代码中，增加了适配和维护的复杂度。

3、此外，现有方案通常在状态发生变化后立即广播，并由接收标签页即时应用接收到的状态变更。对于连续输入、拖动或其他高频调用场景，该方式可能在较短时间内产生大量同步消息；对于当前处于不可见状态的标签页，即时执行全部状态变更还会占用计算资源。若仅通过延迟发送降低消息频率，又难以同时满足关键状态即时同步和非关键状态延后处理的不同需求。

4、因此，现有技术至少存在以下局限：一方面，不同状态管理库及事件总线的原子操作接口存在差异，跨标签页同步逻辑难以通过统一的配置入口实施，容易造成适配逻辑与业务逻辑耦合；另一方面，消息发送频率及接收处理时机缺少与调用类型、同步需求和页面可见性相匹配的控制机制，难以兼顾多标签页状态一致性与通信处理性能。

技术实现思路

1、本发明所要解决的技术问题是：提供一种广播通道与页面可见性协同的多标签页同步方法及系统，以解决不同状态管理库及事件总线缺少统一适配和配置入口的问题，并解决跨标签页同步消息的发送频率及接收处理时机难以按同步需求进行控制的问题。

2、为解决上述技术问题，本发明提供一种广播通道与页面可见性协同的多标签页同步方法，包括：检测目标实例的特征方法与属性以识别实例类型，并按所述实例类型以保持原有调用形式及原有操作方式的方式重写所述目标实例的原子操作方法，所述原子操作方法为所述目标实例中用于完成状态变更或事件发送的方法；创建具有预设名称的广播通道实例作为跨标签页的同步通道；在所述原子操作方法被调用时，解析本次调用的最后一个参数中的配置对象，得到用于指示是否启用跨标签页同步的同步启用项、以及用于指示防抖、节流、立即或可见性处理策略的同步模式项；在所述同步启用项启用时，将本次调用的方法名称与参数封装为同步消息，并按所述同步模式项对应的防抖、节流、立即或可见性策略经所述同步通道发送；在接收标签页，对采用可见性策略的所述同步消息，在页面可见时应用所述同步消息承载的状态变更，在页面不可见时存入待处理队列，并对所述待处理队列中的同类非累积型状态变更进行覆盖合并以保留最新的最终状态；在检测到页面可见性由不可见转为可见时，依次处理所述待处理队列中合并后的所述同步消息；在应用所述状态变更时显式配置所调用的对应原子操作方法的同步启用项为禁用状态，以阻止二次广播。

3、进一步地，所述检测目标实例的特征方法与属性以识别实例类型，并按所述实例类型以保持原有调用形式及原有操作方式的方式重写所述目标实例的原子操作方法，所述原子操作方法为所述目标实例中用于完成状态变更或事件发送的方法，包括：接收所述目标实例与随所述目标实例传入的初始配置参数，在所述初始配置参数为对象类型时将所述初始配置参数合并至预置默认配置；检测所述目标实例是否具有$onaction方法、$patch方法及$id属性，在均具有时判定所述实例类型为pinia状态管理库；检测所述目标实例是否具有commit方法、_mutations属性及_actions属性，在均具有时判定所述实例类型为vuex状态管理库；检测所述目标实例是否具有$emit方法及$on方法，在均具有时判定所述实例类型为vue事件总线；检测所述目标实例是否具有emit方法、on方法以及用于记录事件名称与监听函数集合之间对应关系的all属性，在均具有时判定所述实例类型为mitt事件发射器；按判定得到的所述实例类型调用与所述实例类型对应的适配逻辑，重写所述目标实例的原子操作方法，对未判定出所述实例类型的目标实例输出警告信息，并返回所述目标实例。

4、进一步地，所述按判定得到的所述实例类型调用与所述实例类型对应的适配逻辑，重写所述目标实例的原子操作方法，包括：在所述实例类型为pinia状态管理库时，通过所述目标实例的$onaction方法监听动作执行，并以crossaction方法作为跨标签页操作的唯一入口；在所述实例类型为vuex状态管理库时，重写所述目标实例的commit方法；在所述实例类型为vue事件总线时，重写所述目标实例的$emit方法；在所述实例类型为mitt事件发射器时，重写所述目标实例的emit方法；在重写所述原子操作方法后保持所述原子操作方法的原有调用形式，并在所述原子操作方法执行完成后触发跨标签页同步。

5、进一步地，所述在所述原子操作方法被调用时，解析本次调用的最后一个参数中的配置对象，得到用于指示是否启用跨标签页同步的同步启用项、以及用于指示防抖、节流、立即或可见性处理策略的同步模式项，包括：判断本次调用的最后一个参数是否为对象类型，在所述最后一个参数为对象类型时将所述最后一个参数作为所述配置对象；从所述配置对象中读取布尔类型的所述同步启用项，所述同步启用项用于指示是否启用跨标签页同步；从所述配置对象中读取枚举类型的所述同步模式项，所述同步模式项的取值为防抖策略、节流策略、立即策略及可见性策略之一；从所述配置对象中读取数值类型的时间间隔项，所述时间间隔项用于指示防抖策略与节流策略的时间间隔；对所述配置对象中未给出的配置项，以所述预置默认配置中对应的配置项补齐，得到本次调用生效的所述同步启用项与所述同步模式项。

6、进一步地，所述在所述同步启用项启用时，将本次调用的方法名称与参数封装为同步消息，并按所述同步模式项对应的防抖、节流、立即或可见性策略经所述同步通道发送，包括：将所述方法名称、所述参数、用于指示所述目标实例所属类别的类型标识及所述同步模式项封装为所述同步消息，并对所述参数取可序列化的元数据；在所述同步模式项为立即策略时，将所述同步消息置入发送队列并即时经所述同步通道发送；在所述同步模式项为可见性策略时，将所述同步消息即时经所述同步通道发送，并由接收标签页按页面可见性确定处理时机；在所述同步模式项为防抖策略时，以防抖函数包裹发送动作，在所述配置对象中的时间间隔项所指的延迟时间届满后发送最后一次所述同步消息；在所述同步模式项为节流策略时，以节流函数包裹发送动作，在所述时间间隔项所指的间隔内仅发送一次所述同步消息。

7、进一步地，所述在所述同步模式项为防抖策略时，以防抖函数包裹发送动作，在所述配置对象中的时间间隔项所指的延迟时间届满后发送最后一次所述同步消息，包括：在所述原子操作方法被调用时启动防抖定时器，所述防抖定时器的定时时长取自所述时间间隔项；在所述防抖定时器计时期间再次调用所述原子操作方法时，重置所述防抖定时器并以本次调用的所述同步消息替换已缓存的同步消息；在所述防抖定时器计时届满时，经所述同步通道发送所缓存的最后一次所述同步消息并清除所缓存的同步消息。

8、进一步地，所述在接收标签页，对采用可见性策略的所述同步消息，在页面可见时应用所述同步消息承载的状态变更，在页面不可见时存入待处理队列，并对所述待处理队列中的同类非累积型状态变更进行覆盖合并以保留最新的最终状态；在检测到页面可见性由不可见转为可见时，依次处理所述待处理队列中合并后的所述同步消息；在应用所述状态变更时显式配置所调用的对应原子操作方法的同步启用项为禁用状态，以阻止二次广播，包括：在接收标签页经所述同步通道的消息接收监听器获取所述同步消息，并读取所述同步消息中的同步模式项；在读取到的所述同步模式项为可见性策略时，查询接收标签页当前的页面可见性状态；在所述页面可见性状态为可见时，调用与所述同步消息的类型标识对应的消息处理器，应用所述同步消息承载的状态变更；在所述页面可见性状态为不可见时，将所述同步消息按接收顺序存入所述待处理队列，并对所述待处理队列中相同实例及相同方法名称的同类非累积型状态变更消息进行覆盖合并以保留最新的同步消息，所述非累积型状态变更是指后一次调用的状态结果能够直接覆盖前一次调用结果的状态变更；监听页面可见性变化事件，在所述页面可见性变化事件指示接收标签页由不可见转为可见时，按所述接收顺序依次处理所述待处理队列中合并后的全部同步消息并清空所述待处理队列，且在应用所述状态变更时显式配置所调用的对应原子操作方法的同步启用项为禁用状态，以阻止二次广播。

9、进一步地，所述在所述页面可见性状态为可见时，调用与所述同步消息的类型标识对应的消息处理器，应用所述同步消息承载的状态变更，包括：校验所述同步消息的消息格式与完整性，并丢弃校验未通过的同步消息；在消息处理器注册表中查询与所述同步消息的类型标识对应的所述消息处理器，所述消息处理器注册表为以类型标识为键、消息处理器为值的映射数据结构，支持消息处理器的动态添加与移除；在所述类型标识指示状态管理库变更时，从所述同步消息中取出所述方法名称与所述参数，将所述参数传入所述目标实例中与所述方法名称对应的原子操作方法并调用；在所述类型标识指示事件总线消息时，从所述同步消息中取出事件名称与所述参数，将所述参数传入与所述事件名称对应的监听函数数组并依次执行；在调用所述原子操作方法或执行所述监听函数数组后，得到与发送标签页一致的接收标签页状态。

10、进一步地，所述方法还包括：在创建所述广播通道实例之前，检测当前浏览器环境是否支持广播通道接口，并在支持所述广播通道接口时执行所述创建；在由所述同步消息触发的状态变更调用时，在参数的配置对象中显式将所述同步启用项设置为禁用状态，以使所述状态变更调用不再经所述同步通道发送同步消息；由所述广播通道实例不向发送标签页自身投递所述同步消息，免除所述同步消息中的来源标识；对要求多标签页状态一致的对称数据同步场景，将所述目标实例取为状态管理库实例；对各标签页按自身状态作出不同响应的非对称状态响应场景，将所述目标实例取为事件总线实例。

11、本发明还提供一种广播通道与页面可见性协同的多标签页同步系统，包括：适配识别模块，用于检测目标实例的特征方法与属性以识别实例类型，并按所述实例类型以保持原有调用形式及原有操作方式的方式重写所述目标实例的原子操作方法，所述原子操作方法为所述目标实例中用于完成状态变更或事件发送的方法；通道建立模块，用于创建具有预设名称的广播通道实例作为跨标签页的同步通道；配置解析模块，用于在所述原子操作方法被调用时，解析本次调用的最后一个参数中的配置对象，得到用于指示是否启用跨标签页同步的同步启用项、以及用于指示防抖、节流、立即或可见性处理策略的同步模式项；发送策略模块，用于在所述同步启用项启用时，将本次调用的方法名称与参数封装为同步消息，并按所述同步模式项对应的防抖、节流、立即或可见性策略经所述同步通道发送；接收处理模块，用于在接收标签页，对采用可见性策略的所述同步消息，在页面可见时应用所述同步消息承载的状态变更，在页面不可见时存入待处理队列，并对所述待处理队列中的同类非累积型状态变更进行覆盖合并以保留最新的最终状态；在检测到页面可见性由不可见转为可见时，依次处理所述待处理队列中合并后的所述同步消息；在应用所述状态变更时显式配置所调用的对应原子操作方法的同步启用项为禁用状态，以阻止二次广播。

12、本发明的有益效果在于：

13、本发明由于采用了根据目标实例的特征方法与属性识别实例类型，并按实例类型重写原子操作方法的机制，使不同状态管理库及事件总线能够共用配置解析、消息封装和广播发送链路，从而降低了跨标签页同步逻辑与具体业务调用之间的耦合程度，减少了针对不同实例分别设置适配代码和同步代码的工作量；由于采用了从原子操作方法最后一个参数中解析同步启用项、同步模式项及时间间隔项，并按照防抖、节流、立即或可见性策略控制消息发送及接收处理时机的机制，使高频调用能够通过防抖或节流策略减少冗余消息，使需要及时同步的消息能够即时发送，并使不可见标签页能够暂存采用可见性策略的同步消息，从而在维持多标签页状态同步能力的同时减少通信通道占用和不可见页面的无效处理。