组件间数据的同步方法及装置与流程

1.本技术涉及计算机技术领域，特别是涉及一种组件间数据的同步方法及装置、电子设备、机器可读介质。


背景技术：

2.微前端项目为了实现丰富的功能，往往会在项目中集成多个提供各种服务的组件。
3.在目前，微前端项目的组件之间可以相互嵌套，形成树形结构，在微前端项目运行的过程中，各个组件之间需要进行数据交互，具体可以通过项目的外部框架实现，外部框架可以作为各个组件的父类组件，实现数据回调和传递的作用，例如，在组件a中嵌套了组件b，在组件c中嵌套了组件d的情况下，若组件b需要发送数据至组件d，则组件b可以将数据通过组件a，以数据回调的方式传递至外部框架，外部框架再通过数据传递的方式，将该数据通过组件c，传递至组件d。
4.但是，目前的方案中，对于组件嵌套结构的微前端项目，在数据交互时需要依据嵌套路径由统一的外部框架传递数据，外部框架需要对传递路径上的每个组件实现数据的写入和读取方法，导致数据交互方式繁琐复杂且效率低下。


技术实现要素：

5.本技术实施例提供了一种组件间数据的同步方法，以解决相关技术中数据交互方式繁琐复杂且效率低下的问题。
6.相应的，本技术实施例还提供了一种组件间数据的同步装置、电子设备以及存储介质，用以保证上述方法的实现及应用。
7.为了解决上述问题，本技术实施例公开了一种组件间数据的同步方法，所述方法包括：
8.响应于组件的注册请求，从多个同步方式中获取与所述组件对应的同步方式；
9.获取所述组件中的第一组件在逻辑触发后发送的变更信息；
10.根据所述变更信息，对组件参数信息进行变更；
11.按照与第二组件对应的同步方式，将变更后的所述组件参数信息发送给所述第二组件进行渲染展示。
12.本技术实施例公开了一种组件间数据的同步装置，所述装置包括：
13.响应模块，用于响应于组件的注册请求，从多个同步方式中获取与所述组件对应的同步方式；
14.获取模块，用于获取所述组件中的第一组件在逻辑触发后发送的变更信息；
15.变更模块，用于根据所述变更信息，对组件参数信息进行变更；
16.发送模块，用于按照与第二组件对应的同步方式，将变更后的所述组件参数信息发送给所述第二组件进行渲染展示。
17.本技术实施例还公开了一种电子设备，包括：处理器；和存储器，其上存储有可执行代码，当所述可执行代码被执行时，使得所述处理器执行如本技术实施例中一个或多个所述的方法。
18.本技术实施例还公开了一个或多个机器可读介质，其上存储有可执行代码，当所述可执行代码被执行时，使得处理器执行如本技术实施例中一个或多个所述的方法。
19.与相关技术相比，本技术实施例包括以下优点：
20.本技术实施例中，可以在组件参数信息同步的场景下，直接将各个组件解耦，并建立组件与数据控制器的直接交互，使得组件可以通过在数据控制器中注册的同步方式，以和数据控制器单向交互的形式来实现组件之间组件参数信息的同步，解决了相关技术中通过树形结构的传输路径和外部框架同步信息而产生的数同步方式繁琐复杂的问题，本技术实施例在降低了传递路径的长度和复杂度的基础上，提高了同步效率。另外，本技术实施例通过在数据控制器中实现多个同步方式供组件进行选用，增加了组件获取组件参数信息的方式灵活性，且在数据控制器中实现的通用的同步方式可以使得各种类型的组件都可以调用使用，提高了同步方案的适应性。
附图说明
21.图1是本技术实施例的一种组件的结构框图；
22.图2是本技术实施例的一种数据控制器的结构框图；
23.图3是本技术实施例的一种组件间数据的同步方法的架构图；
24.图4是本技术实施例的另一种组件间数据的同步方法的架构图；
25.图5是本技术实施例的另一种组件间数据的同步方法的架构图；
26.图6是本技术实施例的一种视频剪辑场景的界面图；
27.图7是本技术实施例的一种搜索引擎场景的界面图；
28.图8是本技术实施例的一种物流信息排序的界面图；
29.图9是本技术实施例的一种组件间数据的同步方法的步骤流程图；
30.图10是本技术实施例的另一种组件间数据的同步方法实施例的步骤流程图；
31.图11是本技术实施例的另一种组件间数据的同步方法实施例的步骤流程图；
32.图12是本技术实施例的一种组件间数据的同步装置的结构框图；
33.图13是本技术一实施例提供的装置的结构示意图。
具体实施方式
34.为使本技术的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本技术作进一步详细的说明。
35.为使本领域技术人员更好地理解本技术，以下对本技术涉及的概念进行说明：
36.组件(component)：是对数据和方法的简单封装，组件可以有自己的属性和方法，属性是组件数据的简单访问者，方法则是组件的一些简单而可见的功能，组件可以作为界面元素，通过组件的组合构成能够实现复杂功能的界面。
37.组件参数信息：指代组件中的状态和数据，组件基于状态、数据以及逻辑层定义的逻辑，实现对组件的渲染展示，其中，数据可以影响状态、逻辑可以影响数据和状态。
38.微前端项目：一种将单体应用转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合的技术，微前端项目相当于多个组件的集合，多个组件相互嵌套构成树形结构。
39.react：用于构建用户界面的javascript(一种具有函数优先的轻量级，解释型或即时编译型的编程语言)库，以通过组件的选取组合构建界面。
40.本技术实施例可以应用在微前端等将多个组件聚合使用的场景，这种场景下，多个组件通过相互协作来实现复杂的功能，这就使得存在需求：1、组件之间需要进行组件参数信息的交互，如一个组件1在逻辑触发时得到新的组件参数信息，而另一个组件2的运作需要获取到该新的组件参数信息，即组件1和组件2需要实现组件参数信息的同步。2、前端开发时，为了提升项目的稳定性和可复用性，往往会提取部分公共组件以便于其他项目直接使用，从而达到减少重复开发量提升开发效率，这就使得组件之间需要解耦实现松耦合，从而满足更好的可扩展性和可维护性。
41.本技术实施例提供的组件间数据的同步方法可以应用于数据控制器，提供提供一个数据控制器来与各个组件直接连接，组件在数据控制器中注册后，即可基于数据控制器来变更组件参数信息，以及将组件参数信息同步给其他组件。
42.具体的，参照图1，其示出了本技术实施例提供的一种组件的结构框图，图1示出的组件中，存在数据(data)、状态(state)、逻辑(runtime)层、渲染(render)层、服务接口和入参(props)，其中，数据是用于组件内部逻辑运算的信息，状态是用于改变组件自身的渲染的信息，逻辑层定义了数据和状态的处理规则，逻辑层可以去影响状态和数据，渲染层用于根据状态进行组件样式渲染和组件功能渲染，服务接口提供外部服务的访问功能，入参则用于实现外部数据和状态的导入。
43.进一步的，参照图2，其示出了本技术实施例提供的一种数据控制器的结构框图，针对图2示出的数据控制器，具有用于数据存储的组件参数存储片区，并且在数据控制器中实现了修改状态接口(setstate)、使用状态接口(usestate)、数据获取接口(getdata)、修改数据接口(setdata)以及事件派发器(event emitter)。其中，修改状态接口(setstate)可以与组件和使用状态接口(usestate)交互，使用状态接口(usestate)可以与组件参数存储片区和变量形式的状态(state)交互；修改数据接口(setdata)可以与组件和组件参数存储片区交互，数据获取接口(getdata)可以与组件和组件参数存储片区交互；及事件派发器(event emitter)可以与组件和组件参数存储片区交互，事件派发器(event emitter)具有启用(on)和关闭(off)两种模式。
44.参照图3，其示出了本技术实施例提供的一种组件间数据的同步的架构图，基于图3示出的架构，本技术实施例的数据控制器提供了三种数据或状态的同步方式，方式一基于修改状态接口(setstate)、使用状态接口(usestate)和变量形式的状态(state)实现，以提供组件间状态的同步；方式二基于数据获取接口(getdata)、修改数据接口(setdata)，以提供组件间数据的同步；方式三基于修改数据接口(setdata)以及事件派发器(event emitter)，以提供组件间数据的同步。组件若需要通过数据控制器实现组件参数信息的同步，首先需要针对要获取的目标组件参数信息，在数据控制器中注册目标组件参数信息对应的同步方式，具体选取哪些目标组件参数信息以及注册哪种同步方式，可以依据组件的逻辑层中对组件参数信息定义的规则确定。
45.针对方式一，参照图3，针对s1，组件1在逻辑触发后产生状态变更信息，数据控制器通过修改状态接口(setstate)获取到该状态变更信息，之后执行s2、通过使用状态接口(usestate)获取状态变更信息，以及执行s3、利用该状态变更信息设置变量形式的状态(state)在变更后的值，之后再执行s4和s5、将赋值后的变量形式的状态(state)主动发送至组件1和组件2，以供组件1和组件2被动收到赋值后状态(state)，最后可以执行s6、使用状态接口(usestate)将赋值后的变量形式的状态(state)存储到组件参数存储片区，以确保下次读取状态值的准确性。
46.方式一使得组件1可以接收到利用修改状态接口(setstate)设置变更后的状态值并进行后续渲染，组件2则可以接收到根据组件1的逻辑触发操作变更的状态值，达到了组件1在变更状态的同时，组件2能同步获取到变更状态的目的。需要说明的是，组件1若不需要获取变更后的状态，组件1也可以不注册该状态基于方式一的同步方式，使得数据控制器不执行s4。组件1或组件2若需要通过其他同步方式获取状态，则可以注册状态的其他同步方式，以通过其他方式同步状态。
47.针对方式二，参照图4，其示出了本技术实施例提供的另一种组件间数据的同步的架构图，针对m1，组件1在逻辑触发后产生数据变更信息，数据控制器可以通过修改数据接口(setdata)获取到该数据变更信息，利用该数据变更信息变更组件参数存储片区中对应数据的值，之后可以响应于组件2和组件1对数据获取接口(getdata)的调用操作，执行m2，由数据获取接口(getdata)从组件参数存储片区中提取变更的数据，执行m3和m4，将变更后的数据发送至组件1和组件2，以供组件1和组件2主动收到变更后的数据，方式二使得组件1和组件2可以主动获取到变更后的数据并进行后续渲染，达到了组件1在变更数据的同时，组件2能同步获取到变更数据的目的。需要说明的是，组件1若不需要获取变更后的数据，组件1也可以不注册该数据基于方式二的同步方式，使得数据控制器不执行m4。组件1或组件2若需要通过其他同步方式获取数据，则可以注册数据的其他同步方式，以通过其他方式同步数据。
48.需要说明的是，组件1还可以根据方式一，按照m5、m6、m7的次序，通过使用状态接口(usestate)设置变量形式的状态(state)的值，之后执行m8，通过使用状态接口(usestate)将赋值后的变量形式的状态(state)存储到组件参数存储片区，此时状态(state)的值在组件参数存储片区中成为数据格式，若组件2需要获取该状态(state)的值，则可以通过调用数据获取接口(getdata)从组件参数存储片区中提取该数据格式的状态值。
49.针对方式三，参照图5，其示出了本技术实施例提供的另一种组件间数据的同步的架构图，针对n1，组件1在逻辑触发后产生数据变更信息，数据控制器可以通过修改数据接口(setdata)获取到该数据变更信息，利用该数据变更信息变更组件参数存储片区中对应数据的值，之后可以执行n2，由事件派发器从组件参数存储片区中提取变更的数据，并在确定组件1和组件2针对改数据选择了启用(on)的情况下，执行n3和n4，将变更后的数据通过广播的方式发送至组件1和组件2，以供组件1和组件2被动收到变更后的数据，方式二使得组件1和组件2可以被动获取到变更后的数据并进行后续渲染，达到了组件1在变更数据的同时，组件2能同步获取到变更数据的目的。需要说明的是，组件1若不需要获取变更后的数据，组件1也可以不注册该数据基于方式三的同步方式，或将该数据在事件派发器中切换为
关闭(off)，使得数据控制器不执行n4。组件1或组件2若需要通过其他同步方式获取数据，则可以注册数据的其他同步方式，以通过其他方式同步数据。
50.需要说明的是，组件1还可以根据方式一，按照n5、n6、n7的次序，通过使用状态接口(usestate)设置变量形式的状态(state)的值，之后执行n8，通过使用状态接口(usestate)将赋值后的变量形式的状态(state)存储到组件参数存储片区，此时状态(state)的值在组件参数存储片区中成为数据格式，若组件2需要获取该状态(state)的值，则可以针对该值在事件派发器中设置启用(on)，组件参数存储片区中存入数据格式的状态值会通知事件派发器，事件派发器在确定组件2针对改状态值选择了启用(on)的情况下，将数据格式的状态值通过广播的方式发送至组件2。
51.在本技术实施例针对上述三种方式，实现了组件间组件参数信息的同步，实现了上述提出的需求1，在本技术实施例提出的利用外部框架来同步数据的方案中，在数据交互时需要依据嵌套路径由统一的外部框架传递数据，如，在组件a中嵌套了组件b，在组件c中嵌套了组件d的情况下，若组件b需要发送数据至组件d，则组件b可以将数据通过组件a，以数据回调的方式传递至外部框架，外部框架再通过数据传递的方式，将该数据通过组件c，传递至组件d，这种情况下，组件之间强耦合难以分离，待同步的数据传播的路径较长且复杂，且传递的数据仅对于组件b和组件d有用，对于组件a和组件c来说仅起到了数据的转发，这些数据对于组件a和组件c来说是无用数据，这种情况下加大了组件a和组件c的压力，造成不良影响。
52.而在本技术实施例中，可以在组件参数信息同步的场景下，直接将各个组件解耦，并建立组件与数据控制器的关联，使得组件可以通过与数据控制器单向交互来实现组件之间组件参数信息的同步，使得每个组件获取的数据都是有用数据，也就解决了组件传递无用数据的问题，从而降低了传递路径的长度和复杂度。本技术实施例还提供了多种数据的同步方式，供组件根据自身实际需求进行选取，提高了同步方案的鲁棒性。另外，在本技术实施例对组件解耦后，为组件的维护和复用提供了便利，从而满足了上述需求2。
53.针对微前端项目可以实现的几种具体场景如下：
54.在一种视频剪辑场景中，参照图6，其示出了本技术实施例提供的一种视频剪辑场景的界面图，实现视频剪辑的界面可以包含属性编辑组件、预览组件和进度组件，这三个组件需要同步使用的数据包括码率、帧率和播放时刻，其中播放时刻既可以作为组件的数据，也可以作为组件的状态。属性编辑组件可以接收用户的输入，从而变更视频的码率、帧率；进度组件可以接收用户的触控输入，变更视频的播放时刻，预览组件则用于对视频的画面按照码率、帧率、音量、播放时刻进行播放，其中，预览组件的逻辑层具有一个渲染规则，即仅在1分钟到2分钟的时间范围内显示艺术字，基于该规则，预览组件需要同步使用进度组件的播放时刻，另外，预览组件也需要同步使用属性编辑组件的码率、帧率，已完成对播放的画面的调整。
55.假设预览组件在数据控制器中注册了以上述方式一获取进度组件的播放时刻，以及以上述方式二获取属性编辑组件的码率、帧率，则在具体运行中，当用户在进度组件通过将进度条拖到1分30秒实现逻辑触发时，则可以将“进度条变更至1分30秒”这一状态变更信息传递至数据控制器，数据控制器根据状态变更信息将变量状态的值设置为1分30秒后，将变量状态发送至预览组件，预览组件根据变量状态为1分30秒的值，基于渲染规则判断处于
播放艺术字的时间范围，则预览组件可以在播放1分30秒的画面的同时播放艺术字。
56.另外，在具体运行中，当用户在属性编辑组件输入码率和帧率的值实现逻辑触发时，则可以将对应的数据变更信息传递至数据控制器，数据控制器根据数据变更信息将可以在组件参数存储片区存储对应数值，预览组件在每播放一个画面前，可以向数据控制器发送码率和帧率的获取请求，使得数据控制器响应于获取请求，将组件参数存储片区中的码率和帧率发送给预览组件，预览组件则可以根据获取到的码率和帧率，对应播放画面。需要说明的是，组件也可以根据实际需求，注册不同的同步方式进行组件参数信息的获取，本技术实施例对注册的同步方式不做限定。
57.在另一种搜索引擎场景中，参照图7，其示出了本技术实施例提供的一种搜索引擎场景的界面图，实现搜索引擎的界面可以包含输入框组件和搜索结果组件，其中输入框组件内置由搜索引擎接口，可以接收用户输入的搜索内容，搜索结果组件需要同步获取搜索结果并进行展示。
58.假设输入框组件在数据控制器中注册了以上述方式一获取搜索内容，搜索结果组件在数据控制器中注册了以上述方式三获取搜索结果，则在具体运行中，当用户在输入框组件输入搜索内容点击搜索按钮实现逻辑触发时，则可以将对应的状态变更信息传递至数据控制器，数据控制器根据状态变更信息将变量状态的值设置为搜索内容后，将变量状态发送至输入框组件，预览组件根据变量状态展示搜索内容，同时将搜索按钮的文本由“搜索”切换为“搜索中”，以及调用搜索引擎接口，利用搜索内容进行搜索，得到搜索结果，并将搜索结果对应的数据变更信息传递至数据控制器，数据控制器根据数据变更信息将搜索结果写入组件参数信息存储片区，事件派发器从组件参数存储片区中提取搜索结果，并在确定搜索结果组件针对该数据选择了启用(on)的情况下，将搜索结果通过广播的方式发送至搜索结果组件进行展示。需要说明的是，组件也可以根据实际需求，注册不同的同步方式进行组件参数信息的获取，本技术实施例对注册的同步方式不做限定。
59.在另一种物流信息排序场景中，参照图8，其示出了本技术实施例提供的一种物流信息排序的界面图，实现物流信息排序的界面可以包含物流查询组件和查询结果排序展示组件，其中，物流查询组件内置有访问物流信息服务器的接口，且可以接收用户输入的待批量查询物流信息并排序的包裹的标识，查询结果排序展示组件需要同步获取包裹的物流信息并按照排序规则进行排序展示。
60.假设搜索结果组件在数据控制器中注册了以上述方式三获取包裹的物流信息，则在具体运行中，当用户在物流查询组件输入多个包裹的标识实现逻辑触发时，则调用访问物流信息服务器的接口，从物流信息服务器获取这些包裹的物流信息，并将搜索结果对应的数据变更信息传递至数据控制器，数据控制器根据数据变更信息将搜索结果写入组件参数信息存储片区，事件派发器从组件参数存储片区中提取搜索结果，并在确定查询结果排序展示组件针对该数据选择了启用(on)的情况下，将包裹的物流信息通过广播的方式发送至查询结果排序展示组件，查询结果排序展示组件可以基于逻辑层中按照物流信息中发货日期由早到晚的排序规则，对各个包裹的物流信息按照发货日期由早到晚进行排序展示。需要说明的是，组件也可以根据实际需求，注册不同的同步方式进行组件参数信息的获取，本技术实施例对注册的同步方式不做限定。
61.本技术实施例中，可以在组件参数信息同步的场景下，直接将各个组件解耦，并建
立组件与数据控制器的直接交互，使得组件可以通过在数据控制器中注册的同步方式，以和数据控制器单向交互的形式来实现组件之间组件参数信息的同步，解决了相关技术中通过树形结构的传输路径和外部框架同步信息而产生的数同步方式繁琐复杂的问题，本技术实施例在降低了传递路径的长度和复杂度的基础上，提高了同步效率。另外，本技术实施例通过在数据控制器中实现多个同步方式供组件进行选用，增加了组件获取组件参数信息的方式灵活性，且在数据控制器中实现的通用的同步方式可以使得各种类型的组件都可以调用使用，提高了同步方案的适应性。
62.参照图9，其示出了本技术实施例提供的一种组件间数据的同步方法的步骤流程图，包括：
63.步骤101，响应于组件的注册请求，从多个同步方式中获取与所述组件对应的同步方式。
64.在本技术实施例中，组件间数据的同步方法应用于图1中的数据控制器，组件在上线时，可以在数据控制器中注册同步方式，本技术实施例的数据控制器提供了三种数据或状态的同步方式，方式一基于修改状态接口(setstate)、使用状态接口(usestate)和变量形式的状态(state)实现，以提供组件间状态的同步；方式二基于数据获取接口(getdata)、修改数据接口(setdata)，以提供组件间数据的同步；方式三基于修改数据接口(setdata)以及事件派发器(event emitter)，以提供组件间数据的同步。组件可以根据实际需求注册对应的同步方式。
65.需要说明的是，本技术实施例通过将各个耦合的组件进行解耦，并成组合微前端项目，再将解耦后的组件与数据控制器连接，形成新的同步方式，数据控制器可以抽离成独立的插件，只需要在组件中引入使用就能达到组件参数信息同步的功能，而数据控制器只对组件参数信息做收集和变更通知。
66.步骤102，获取所述组件中的第一组件在逻辑触发后发送的变更信息。
67.在本技术实施例中，组件的逻辑层中写有很多逻辑规则，其中包含逻辑触发后发送变更信息的规则，如用户在图4中对进度组件的进度条进行拖动时，即触发了逻辑规则，按照逻辑规则可以将“拖动进度条至xx时刻”的变更信息发送至数据控制器，以供数据控制器基于变更信息对组件参数信息变更，使得后续其他组件可以同步获取该变更后的组件参数信息。
68.步骤103，根据所述变更信息，对组件参数信息进行变更。
69.在本技术实施例中，变更信息是第一组件逻辑触发后提供的用于指示组件参数信息变更情况的信息，数据控制器可以基于变更信息，对组件参数信息进行变更，如，数据控制器中存在一个变量形式的状态，若数据控制器获取的变更信息为“进度条变更至1分30秒”，则可以将该变量形式的状态的值设置为1分30秒。
70.步骤104，按照与第二组件对应的同步方式，将变更后的所述组件参数信息发送给所述第二组件进行渲染展示。
71.可选的，所述第一组件和第二组件为同一组件，或所述第一组件和第二组件为不同组件。
72.本技术实施例中，在第一组件和第二组件为不同组件的情况下，另一不同于第一组件的第二组件基于获取组件参数信息的需求，在数据控制器中注册了对应的同步方式，
则在数据控制器依据变更信息对组件参数信息进行变更后，可以按照与第二组件对应的同步方式，将变更后的组件参数信息发送给第二组件，第二组件可以根据逻辑层中的渲染规则，使用组件参数信息进行渲染展示。
73.需要说明的是，在第一组件和第二组件为同一组件的情况下，第一组件可以在利用数据控制器设置了组件参数信息的基础上，同时以注册的同步方式获取该组件参数信息，满足了第一组件获取组件参数信息的需求。例如，参照图5，进度组件通过用户对进度条的拖动在数据控制器中设置了播放时刻这一状态的同时，也可以以方式一获取拖动后的播放时刻这一状态，并在进度组件的对应位置展示拖动后的播放时刻。
74.可选的，步骤101具体可以通过响应于组件的注册请求，从多个同步方式中获取与所述组件的目标组件参数信息对应的同步方式的方式进行实现。
75.可选的，步骤104具体可以通过按照与所述第二组件的组件参数信息对应的同步方式，将变更后的所述组件参数信息发送给所述第二组件进行渲染展示的方式进行实现。
76.在本技术实施例中，一个组件需求的组件参数信息可能有多种，组件可以针对不同的组件参数信息，在数据控制器中注册不同的同步方式，如，一个组件需求a，b，c三种组件参数信息，该组件可以根据实际需求，在数据控制器中为组件参数信息a注册上述方式一的同步方式；为组件参数信息b注册上述方式二的同步方式；为组件参数信息c注册上述方式三的同步方式，使得在该组件获取这些组件参数信息时，按照注册的方式进行获取，本技术实施例对注册的同步方式的选取规则不做限定。
77.综上所述，本技术实施例中，可以在组件参数信息同步的场景下，直接将各个组件解耦，并建立组件与数据控制器的直接交互，使得组件可以通过在数据控制器中注册的同步方式，以和数据控制器单向交互的形式来实现组件之间组件参数信息的同步，解决了相关技术中通过树形结构的传输路径和外部框架同步信息而产生的数同步方式繁琐复杂的问题，本技术实施例在降低了传递路径的长度和复杂度的基础上，提高了同步效率。另外，本技术实施例通过在数据控制器中实现多个同步方式供组件进行选用，增加了组件获取组件参数信息的方式灵活性，且在数据控制器中实现的通用的同步方式可以使得各种类型的组件都可以调用使用，提高了同步方案的适应性。
78.参照图10，示出了本技术的另一种组件间数据的同步方法实施例的步骤流程图。包括：
79.步骤201，响应于组件的注册请求，从多个同步方式中获取与所述组件对应的同步方式。
80.该步骤具体可以参照上述步骤101，此处不再赘述。
81.步骤202，根据修改状态接口，获取所述第一组件在逻辑触发后发送的状态变更信息。
82.所述变更信息包括：状态变更信息；所述组件参数信息包括：状态信息；
83.步骤203，根据使用状态接口和所述状态变更信息，对所述状态信息进行变更，所述状态信息为变量形式。
84.步骤204，在所述第二组件对应第一同步方式的情况下，根据所述使用状态接口，将包括所述变更后的状态信息的渲染指令发送至所述第二组件，以供所述第二组件根据所述渲染指令进行渲染展示。
85.针对步骤201-204实现的方案，即为上述实施例图1提出的方式一的方案，该方案在组件1在逻辑触发后产生状态变更信息，数据控制器通过修改状态接口(setstate)获取到该状态变更信息，之后执行s2、通过使用状态接口(usestate)获取状态变更信息，以及执行s3、利用该状态变更信息设置变量形式的状态(state)在变更后的值，之后再执行s4和s5、将赋值后的变量形式的状态(state)主动发送至组件1和组件2，以供组件1和组件2被动收到赋值后状态(state)，方式一使得组件1可以接收到利用修改状态接口(setstate)设置变更后的状态值并进行后续渲染，组件2则可以接收到根据组件1的逻辑触发操作变更的状态值，达到了组件1在变更状态的同时，组件2能同步获取到变更状态的目的。其中，使用状态接口(usestate)可以是react 16.8版本后提供的钩子方法，数据控制器可以通过该方法修改组件的状态信息。
86.在这种方式下，组件间可以实现状态信息的相互同步，且组件2是被动获取数据控制器发送的状态信息的，满足了组件2被动获取状态信息的实际需求。
87.可选的，在步骤204之后，还包括：
88.步骤205、根据所述使用状态接口，将所述变更后的状态信息存储在组件参数存储片区。
89.参照图1，在将包括所述变更后的状态信息的渲染指令发送至组件2之后，最后可以执行s6、使用状态接口(usestate)将赋值后的变量形式的状态(state)存储到组件参数存储片区，以确保下次读取状态值的准确性。
90.综上所述，本技术实施例中，可以在组件参数信息同步的场景下，直接将各个组件解耦，并建立组件与数据控制器的直接交互，使得组件可以通过在数据控制器中注册的同步方式，以和数据控制器单向交互的形式来实现组件之间组件参数信息的同步，解决了相关技术中通过树形结构的传输路径和外部框架同步信息而产生的数同步方式繁琐复杂的问题，本技术实施例在降低了传递路径的长度和复杂度的基础上，提高了同步效率。另外，本技术实施例通过在数据控制器中实现多个同步方式供组件进行选用，增加了组件获取组件参数信息的方式灵活性，且在数据控制器中实现的通用的同步方式可以使得各种类型的组件都可以调用使用，提高了同步方案的适应性。
91.参照图11，示出了本技术的另一种组件间数据的同步方法实施例的步骤流程图。包括：
92.步骤301，响应于组件的注册请求，从多个同步方式中获取与所述组件对应的同步方式。
93.该步骤具体可以参照上述步骤101，此处不再赘述。
94.步骤302，根据修改数据接口，获取所述第一组件在逻辑触发后发送的数据变更信息。
95.所述变更信息包括：数据变更信息；所述组件参数信息包括：数据信息；
96.步骤303，根据所述修改数据接口和所述数据变更信息，对组件参数存储片区中的数据信息进行变更。
97.步骤304，在所述第二组件对应第二同步方式的情况下，响应于所述第二组件对数据获取接口的调用操作，通过所述数据获取接口，从所述组件参数存储片区中将所述变更后的数据信息发送至所述第二组件，以供所述第二组件根据所述变更后的数据信息进行渲
染展示。
98.针对步骤301-304实现的方案，即为上述实施例图2提出的方式二的方案，该方案在组件1在逻辑触发后产生数据变更信息，数据控制器可以通过修改数据接口(setdata)获取到该数据变更信息，利用该数据变更信息变更组件参数存储片区中对应数据的值，之后可以响应于组件2和组件1对数据获取接口(getdata)的调用操作，执行m2，由数据获取接口(getdata)从组件参数存储片区中提取变更的数据，执行m3和m4，将变更后的数据发送至组件1和组件2，以供组件1和组件2主动收到变更后的数据，方式二使得组件1和组件2可以主动获取到变更后的数据并进行后续渲染，达到了组件1在变更数据的同时，组件2能同步获取到变更数据的目的。
99.在这种方式下，组件间可以实现数据信息的相互同步，且组件2是主动获取数据控制器发送的状态信息的，满足了组件2主动获取状态信息的实际需求。
100.可选的，在步骤303之后，还可以包括：
101.步骤305、在所述第二组件对应第三同步方式的情况下，确定事件派发器的状态。
102.步骤306、在所述事件派发器为启用状态的情况下，从所述组件参数存储片区中将所述变更后的数据信息发送至所述第二组件，以供所述第二组件根据所述变更后的数据信息进行渲染展示。
103.步骤307、在所述事件派发器为关闭状态的情况下，停止向所述第二组件发送数据。
104.针对步骤301、302、303、305、306、307实现的方案，即为上述实施例图3提出的方式三的方案，该方案在组件1在逻辑触发后产生数据变更信息，数据控制器可以通过修改数据接口(setdata)获取到该数据变更信息，利用该数据变更信息变更组件参数存储片区中对应数据的值，之后可以执行n2，由事件派发器从组件参数存储片区中提取变更的数据，并在确定组件1和组件2针对改数据选择了启用(on)的情况下，执行n3和n4，将变更后的数据通过广播的方式发送至组件1和组件2，以供组件1和组件2被动收到变更后的数据，方式二使得组件1和组件2可以被动获取到变更后的数据并进行后续渲染，达到了组件1在变更数据的同时，组件2能同步获取到变更数据的目的。其中，事件派发器可以基于eventtemitter3框架作为基础实现。事件派发器是一种模式，它观察一个已命名的事件，触发回调，然后发出该事件并附带一个值。
105.在这种方式下，组件间可以实现数据信息的相互同步，且组件2是被动获取数据控制器发送的状态信息的，满足了组件2被动获取状态信息的实际需求。
106.可选的，所述方法还包括：
107.步骤308、获取所述第二组件响应于逻辑规则后发送的状态切换指令。
108.步骤309、根据所述状态切换指令，将所述事件派发器由启用状态切换为关闭状态，或将所述事件派发器由关闭状态切换为启用状态。
109.另外，第二组件也可以根据逻辑规则的判断，向数据控制器发送状态切换指令，以将事件派发器由启用状态切换为关闭状态，或将事件派发器由关闭状态切换为启用状态，使得第二组件可以自行选择接收或不接收数据信息。如在事件派发器为启用状态的情况下，第二组件根据逻辑层中定义的禁止接收数据规则对已接收的数据信息进行判断，在已接收的数据信息满足禁止接收数据规则的情况下，向数据控制器发送状态切换指令，将所
述事件派发器由启用状态切换为关闭状态。
110.综上所述，本技术实施例中，可以在组件参数信息同步的场景下，直接将各个组件解耦，并建立组件与数据控制器的直接交互，使得组件可以通过在数据控制器中注册的同步方式，以和数据控制器单向交互的形式来实现组件之间组件参数信息的同步，解决了相关技术中通过树形结构的传输路径和外部框架同步信息而产生的数同步方式繁琐复杂的问题，本技术实施例在降低了传递路径的长度和复杂度的基础上，提高了同步效率。另外，本技术实施例通过在数据控制器中实现多个同步方式供组件进行选用，增加了组件获取组件参数信息的方式灵活性，且在数据控制器中实现的通用的同步方式可以使得各种类型的组件都可以调用使用，提高了同步方案的适应性。
111.参照图12，其示出了本技术实施例提供的一种组件间数据的同步装置的框图，包括：
112.响应模块401，用于响应于组件的注册请求，从多个同步方式中获取与所述组件对应的同步方式；
113.获取模块402，用于获取所述组件中的第一组件在逻辑触发后发送的变更信息；
114.变更模块403，用于根据所述变更信息，对组件参数信息进行变更；
115.发送模块404，用于按照与第二组件对应的同步方式，将变更后的所述组件参数信息发送给所述第二组件进行渲染展示。
116.可选的，所述变更信息包括：状态变更信息；所述组件参数信息包括：状态信息；
117.所述获取模块402，包括：
118.第一获取子模块，用于根据修改状态接口，获取所述第一组件在逻辑触发后发送的状态变更信息；
119.所述变更模块403，包括：
120.第一变更子模块，用于根据使用状态接口和所述状态变更信息，对所述状态信息进行变更，所述状态信息为变量形式。
121.可选的，所述发送模块404，包括：
122.第一发送子模块，用于在所述第二组件对应第一同步方式的情况下，根据所述使用状态接口，将包括所述变更后的状态信息的渲染指令发送至所述第二组件，以供所述第二组件根据所述渲染指令进行渲染展示。
123.可选的，还包括：
124.存储模块，用于根据所述使用状态接口，将所述变更后的状态信息存储在组件参数存储片区。
125.可选的，所述变更信息包括：数据变更信息；所述组件参数信息包括：数据信息；
126.所述获取模块402，包括：
127.第二获取子模块，用于根据修改数据接口，获取所述第一组件在逻辑触发后发送的数据变更信息；
128.所述变更模块403，包括：
129.第二变更子模块，用于根据所述修改数据接口和所述数据变更信息，对组件参数存储片区中的数据信息进行变更。
130.可选的，所述发送模块404，包括：
131.第二发送子模块，用于在所述第二组件对应第二同步方式的情况下，响应于所述第二组件对数据获取接口的调用操作，通过所述数据获取接口，从所述组件参数存储片区中将所述变更后的数据信息发送至所述第二组件，以供所述第二组件根据所述变更后的数据信息进行渲染展示。
132.可选的，所述发送模块404，包括：
133.确定子模块，用于在所述第二组件对应第三同步方式的情况下，确定事件派发器的状态；
134.第一处理子模块，用于在所述事件派发器为启用状态的情况下，从所述组件参数存储片区中将所述变更后的数据信息发送至所述第二组件，以供所述第二组件根据所述变更后的数据信息进行渲染展示；
135.第二处理子模块，用于在所述事件派发器为关闭状态的情况下，停止向所述第二组件发送数据。
136.可选的，还包括：
137.切换指令模块，用于获取所述第二组件响应于逻辑规则后发送的状态切换指令；
138.切换模块，用于根据所述状态切换指令，将所述事件派发器由启用状态切换为关闭状态，或将所述事件派发器由关闭状态切换为启用状态。
139.可选的，所述获取模块402，包括：
140.选取子模块，用于响应于组件的注册请求，从多个同步方式中获取与所述组件的目标组件参数信息对应的同步方式；
141.所述发送模块404，包括：
142.同步子模块，用于按照与所述第二组件的组件参数信息对应的同步方式，将变更后的所述组件参数信息发送给所述第二组件进行渲染展示。
143.可选的，所述第一组件和第二组件为同一组件，或所述第一组件和第二组件为不同组件。
144.综上，本技术实施例中，可以在组件参数信息同步的场景下，直接将各个组件解耦，并建立组件与数据控制器的直接交互，使得组件可以通过在数据控制器中注册的同步方式，以和数据控制器单向交互的形式来实现组件之间组件参数信息的同步，解决了相关技术中通过树形结构的传输路径和外部框架同步信息而产生的数同步方式繁琐复杂的问题，本技术实施例在降低了传递路径的长度和复杂度的基础上，提高了同步效率。另外，本技术实施例通过在数据控制器中实现多个同步方式供组件进行选用，增加了组件获取组件参数信息的方式灵活性，且在数据控制器中实现的通用的同步方式可以使得各种类型的组件都可以调用使用，提高了同步方案的适应性。
145.本技术实施例还提供了一种非易失性可读存储介质，该存储介质中存储有一个或多个模块(programs)，该一个或多个模块被应用在设备时，可以使得该设备执行本技术实施例中各方法步骤的指令(instructions)。
146.本技术实施例提供了一个或多个机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得电子设备执行如上述实施例中一个或多个所述的方法。本技术实施例中，所述电子设备包括终端设备、服务端(集群)等各类型的设备。
147.本公开的实施例可被实现为使用任意适当的硬件，固件，软件，或及其任意组合进
行想要的配置的装置，该装置可包括终端设备、服务端(集群)等电子设备。图13示意性地示出了可被用于实现本技术实施例中所述的各个实施例的示例性装置1000。
148.对于一个实施例，图13示出了示例性装置1000，该装置具有一个或多个处理器1002、被耦合到(一个或多个)处理器1002中的至少一个的控制模块(芯片组)1004、被耦合到控制模块1004的存储器1006、被耦合到控制模块1004的非易失性存储器(nvm)/存储设备1008、被耦合到控制模块1004的一个或多个输入/输出设备1010，以及被耦合到控制模块1004的网络接口1012。
149.处理器1002可包括一个或多个单核或多核处理器，处理器1002可包括通用处理器或专用处理器(例如图形处理器、应用处理器、基频处理器等)的任意组合。在一些实施例中，装置1000能够作为本技术实施例中所述终端设备、服务端(集群)等设备。
150.在一些实施例中，装置1000可包括具有指令1014的一个或多个计算机可读介质(例如，存储器1006或nvm/存储设备1008)以及与该一个或多个计算机可读介质相合并被配置为执行指令1014以实现模块从而执行本公开中所述的动作的一个或多个处理器1002。
151.对于一个实施例，控制模块1004可包括任意适当的接口控制器，以向(一个或多个)处理器1002中的至少一个和/或与控制模块1004通信的任意适当的设备或组件提供任意适当的接口。
152.控制模块1004可包括存储器控制器模块，以向存储器1006提供接口。存储器控制器模块可以是硬件模块、软件模块和/或固件模块。
153.存储器1006可被用于例如为装置1000加载和存储数据和/或指令1014。对于一个实施例，存储器1006可包括任意适当的易失性存储器，例如，适当的dram。在一些实施例中，存储器1006可包括双倍数据速率类型四同步动态随机存取存储器(ddr4sdram)。
154.对于一个实施例，控制模块1004可包括一个或多个输入/输出控制器，以向nvm/存储设备1008及(一个或多个)输入/输出设备1010提供接口。
155.例如，nvm/存储设备1008可被用于存储数据和/或指令1014。nvm/存储设备1008可包括任意适当的非易失性存储器(例如，闪存)和/或可包括任意适当的(一个或多个)非易失性存储设备(例如，一个或多个硬盘驱动器(hdd)、一个或多个光盘(cd)驱动器和/或一个或多个数字通用光盘(dvd)驱动器)。
156.nvm/存储设备1008可包括在物理上作为装置1000被安装在其上的设备的一部分的存储资源，或者其可被该设备访问可不必作为该设备的一部分。例如，nvm/存储设备1008可通过网络经由(一个或多个)输入/输出设备1010进行访问。
157.(一个或多个)输入/输出设备1010可为装置1000提供接口以与任意其他适当的设备通信，输入/输出设备1010可以包括通信组件、音频组件、传感器组件等。网络接口1012可为装置1000提供接口以通过一个或多个网络通信，装置1000可根据一个或多个无线网络标准和/或协议中的任意标准和/或协议来与无线网络的一个或多个组件进行无线通信，例如接入基于通信标准的无线网络，如wifi、2g、3g、4g、5g等，或它们的组合进行无线通信。
158.对于一个实施例，(一个或多个)处理器1002中的至少一个可与控制模块1004的一个或多个控制器(例如，存储器控制器模块)的逻辑封装在一起。对于一个实施例，(一个或多个)处理器1002中的至少一个可与控制模块1004的一个或多个控制器的逻辑封装在一起以形成系统级封装(sip)。对于一个实施例，(一个或多个)处理器1002中的至少一个可与控
制模块1004的一个或多个控制器的逻辑集成在同一模具上。对于一个实施例，(一个或多个)处理器1002中的至少一个可与控制模块1004的一个或多个控制器的逻辑集成在同一模具上以形成片上系统(soc)。
159.在各个实施例中，装置1000可以但不限于是：服务端、台式计算设备或移动计算设备(例如，膝上型计算设备、手持计算设备、平板电脑、上网本等)等终端设备。在各个实施例中，装置1000可具有更多或更少的组件和/或不同的架构。例如，在一些实施例中，装置1000包括一个或多个摄像机、键盘、液晶显示器(lcd)屏幕(包括触屏显示器)、非易失性存储器端口、多个天线、图形芯片、专用集成电路(asic)和扬声器。
160.其中，检测装置中可采用主控芯片作为处理器或控制模块，传感器数据、位置信息等存储到存储器或nvm/存储设备中，传感器组可作为输入/输出设备，通信接口可包括网络接口。
161.对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
162.本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。
163.本技术实施例是参照根据本技术实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
164.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
165.这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
166.尽管已描述了本技术实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本技术实施例范围的变更和修改。
167.最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要
素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。
168.以上对本技术所提供的一种组件间数据的同步方法、装置、电子设备和存储介质，进行了详细介绍，本文中应用了具体个例对本技术的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本技术的方法及其核心思想；同时，对于本领域的一般技术人员，依据本技术的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本技术的限制。