【技术实现步骤摘要】
本专利技术涉及网路，尤其涉及一种多窗口单页面的同步响应方法、装置及设备。
技术介绍
1、在传统的单页面应用中，多窗口导航是一种常见的实现方式。单页面应用一般分为公共功能区域和多个独立区域，多个独立区域通过不同的窗口进行展示和切换。
2、但是，当窗口需要切换时，为了不中断当前任务，实现后台常驻，才保留当前窗口，因此当前窗口会隐藏而不把它销毁，但这就会产生以下问题：窗口数量越来越多，出现页面卡顿；有一个窗口含有高性能的cpu计算任务，会导致其他窗口的响应速度下降；当有一个窗口出错时，整个页面都会受到影响。
技术实现思路
1、本申请实施例提供了一种多窗口单页面的同步响应方法、装置及设备，用于提升单页面应用的性能。
2、第一方面，本申请实施例提供了一种多窗口单页面的同步响应方法，应用于模型-视图-视图模型mvvm的架构模式，所述多窗口单页面中包括至少一个窗口对应的主页面组件和嵌套于所述主页面组件内的窗口组件；所述方法包括：
3、第一组件中在监听到所述第一组件中的数据发生变化后，将变化数据发送至第二组件；所述第一组件为主页面组件且所述第二组件为窗口组件，或所述第一组件为窗口组件且所述第二组件为主页面组件；
4、所述第二组件通过注册的消息监听器，获取所述变化数据从而与所述第一组件同步响应所述变化数据；所述第一组件和所述第二组件分别对应相互隔离的独立进程。
5、本申请实施例中，借助了mvvm的架构模式，通过在mvvm模式的前端应用中设置
6、可选地，所述与所述第一组件同步响应所述变化数据，包括：
7、在所述第一组件为主页面组件且所述第二组件为窗口组件时，所述第二组件对所述变化数据进行渲染并显示在所述窗口中；
8、在所述第一组件为窗口组件且所述第二组件为主页面组件时，所述第二组件对所述变化数据进行处理并通过所述第一组件将处理结果同步显示在所述窗口中。
9、本申请实施例中，当第一组件为主页面组件且第二组件为窗口组件时，通过第二组件可以将变化数据进行渲染并同步显示在窗口中；当第一组件为窗口组件且所述第二组件为主页面组件时，第二组件对变化数据进行处理并通过所述第一组件将处理结果同步显示在所述窗口中，实现了第一组件和第二组件可以同步响应。
10、可选地，所述将变化数据发送至第二组件之前，还包括：
11、所述主页面组件生成待显示组件的虚拟dom；
12、所述主页面组件将所述虚拟dom转换为第一字符串并发送至所述窗口组件；
13、所述窗口组件解析所述第一字符串并生成与所述虚拟dom具有相同结构的组件实例；
14、所述主页面组件获取所述待显示组件的应用信息及所述待显示组件的组件标识符；
15、所述主页面组件将所述应用信息和所述组件标识符转换为第二字符串并发送至所述窗口组件；
16、所述窗口组件解析所述第二字符串，并基于解析结果初始化所述组件实例；所述组件实例用于处理所述变化数据。
17、本申请实施例中，通过生成虚拟dom，为vue描绘整个页面的效果做铺垫；将虚拟dom转换成字符串，可以实现在第一组件和第二组件之间的传递；将待显示组件的应用信息添加标识符，可以通过标识符找到组件应用信息的组件代码，通过组件标识符可以查找到需要初始化的组件代码。
18、可选地，所述多窗口单页面的页面代码中设置有组件标识符与组件路径的对应关系；所述基于解析结果初始化所述组件实例，包括：
19、基于所述对应关系，确定所述组件标识符对应的组件路径；
20、依据所述组件路径，动态导入组件代码及所述应用信息，从而初始化所述组件实例。
21、本申请实施例中，通过将组件标识符对应为组件路径，方便根据组件路径查找组件代码，提升动态导入组件代码的效率。
22、可选地，所述主页面组件生成待显示组件的虚拟dom之前，还包括：
23、确定所述多窗口单页面中需设置独立进程的第一窗口；所述第一窗口在服务器端具有对应的站点；
24、为所述第一窗口创建主页面组件并创建所述主页面组件内的窗口组件；
25、将所述主页面组件对应的依赖信息同步至所述窗口组件。
26、本申请实施例中，通过为第一窗口设置对应的站点，可以实现第一窗口之间的隔离效果，且在主页面请求访问时，通过跨资源共享机制可以在iframe内部执行一些数据请求的逻辑。
27、可选地，所述主页面组件为isolatedframe组件，所述窗口组件为iframe组件；所述主页面组件和所述窗口组件相互隔离且设置有通讯通道。
28、本申请实施例中，通过设置主页面组件和窗口组件相互隔离，使得窗口可以实现独立渲染的任务，并且设置通讯通道，可以实现主页面组件和窗口组件之间信息的传递。
29、可选地，还包括：
30、确定所述多窗口单页面中无需设置独立进程的第二窗口；
31、设置至少一个第二窗口共享线程。
32、本申请实施例中，在对无需进行独立进程的第二窗口中设置共享线程，当无需使用独立进程时使用共享线程，避免了第二窗口使用独立进程而造成资源的浪费。
33、可选地，所述至少一个窗口设置有组件树，所述组件树是通过所述至少一个窗口内各子组件对应的组件对象构成；
34、所述变化数据为表征至少一个组件对象发生变化的组件树数据。
35、本申请实施例中，通过将窗口设置组件树，使得在组件对象较多的情况下，也不影响窗口的响应速度。
36、第二方面，本申请实施例提供了一种多窗口单页面的同步响应装置，该装置包括：
37、发送模块，第一组件中在监听到所述第一组件中的数据发生变化后，将变化数据发送至第二组件；所述第一组件为主页面组件且所述第二组件为窗口组件，或所述第一组件为窗口组件且所述第二组件为主页面组件；
38、获取模块，所述第二组件通过注册的消息监听器，获取所述变化数据从而与所述第一组件同步响应所述变化数据；所述第一组件和所述第二组件分别对应相互隔离的独立进程。
39、可选地，所述获取模块具体用于：
40、在所述第一组件为主页面组件且所述第二组件为窗口组件时，所述第二组件对所述变化数据进行渲染并显示在所述窗口中；
41、在所述第一组件为窗口组件且所述第二组件为主页面组件时，所述第二组件对所述变化数据进行处理并通过所述第一组件将处理结果同步显示在所述窗口中。
42、可选地，所述发送模块还用于：<本文档来自技高网...
【技术保护点】
1.一种多窗口单页面的同步响应方法，其特征在于，应用于模型-视图-视图模型MVVM的架构模式，所述多窗口单页面中包括至少一个窗口对应的主页面组件和嵌套于所述主页面组件内的窗口组件；所述方法包括：
2.如权利要求1所述的方法，其特征在于，所述与所述第一组件同步响应所述变化数据，包括：
3.如权利要求1所述的方法，其特征在于，所述将变化数据发送至第二组件之前，还包括：
4.如权利要求3所述的方法，其特征在于，所述多窗口单页面的页面代码中设置有组件标识符与组件路径的对应关系；所述基于解析结果初始化所述组件实例，包括：
5.如权利要求3所述的方法，其特征在于，所述主页面组件生成待显示组件的虚拟DOM之前，还包括：
6.如权利要求5所述的方法，其特征在于，所述主页面组件为IsolatedFrame组件，所述窗口组件为iframe组件；所述主页面组件和所述窗口组件相互隔离且设置有通讯通道。
7.如权利要求3所述的方法，其特征在于，还包括：
8.如权利要求1～7任一所述的方法，其特征在于，所述至少一个窗口设置有
9.一种多窗口单页面的同步响应装置，其特征在于，包括：
10.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1～8任一所述方法的步骤。
11.一种计算机可读存储介质，其特征在于，其存储有可由计算机设备执行的计算机程序，当所述程序在计算机设备上运行时，使得所述计算机设备执行权利要求1～8任一所述方法的步骤。
...【技术特征摘要】
1.一种多窗口单页面的同步响应方法，其特征在于，应用于模型-视图-视图模型mvvm的架构模式，所述多窗口单页面中包括至少一个窗口对应的主页面组件和嵌套于所述主页面组件内的窗口组件；所述方法包括：
2.如权利要求1所述的方法，其特征在于，所述与所述第一组件同步响应所述变化数据，包括：
3.如权利要求1所述的方法，其特征在于，所述将变化数据发送至第二组件之前，还包括：
4.如权利要求3所述的方法，其特征在于，所述多窗口单页面的页面代码中设置有组件标识符与组件路径的对应关系；所述基于解析结果初始化所述组件实例，包括：
5.如权利要求3所述的方法，其特征在于，所述主页面组件生成待显示组件的虚拟dom之前，还包括：
6.如权利要求5所述的方法，其特征在于，所述主页面组件为isolated...
【专利技术属性】
技术研发人员：王福，
申请(专利权)人：深圳前海微众银行股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。