CN114579322A

CN114579322A - Method and device for synchronizing data between components

Info

Publication number: CN114579322A
Application number: CN202210139165.1A
Authority: CN
Inventors: 邓宇东
Original assignee: Alibaba China Co Ltd
Current assignee: Alibaba China Co Ltd
Priority date: 2022-02-15
Filing date: 2022-02-15
Publication date: 2022-06-03

Abstract

The embodiment of the application provides a method and a device for synchronizing data between components, wherein the method comprises the following steps: responding to a registration request of the component, and acquiring a synchronization mode corresponding to the component from a plurality of synchronization modes; acquiring change information sent by a first assembly in the assemblies after logic triggering; changing the component parameter information according to the change information; and sending the changed component parameter information to the second component for rendering display according to a synchronous mode corresponding to the second component. The method and the device have the advantages that each component is directly decoupled, direct interaction between the components and the data controller is established, the components can realize synchronization of parameter information of the components through a synchronization mode registered in the data controller, the problem that in the related technology, the number synchronization mode generated through a transmission path of a tree structure and external framework synchronization information is complex is solved, and the synchronization efficiency is improved on the basis of reducing the length and the complexity of the transmission path.

Description

Method and device for synchronizing data between components

Technical Field

The present application relates to the field of computer technologies, and in particular, to a method and an apparatus for synchronizing data between components, an electronic device, and a machine-readable medium.

Background

Micro front-end projects often integrate multiple components that provide various services into a project in order to achieve rich functionality.

At present, components of a micro front-end project can be nested with each other to form a tree structure, data interaction is required to be performed between the components in the running process of the micro front-end project, and particularly, the data interaction can be realized through an external framework of the project, the external framework can be used as a parent component of each component to realize the functions of data callback and transmission, for example, a component b is nested in a component a, and under the condition that a component d is nested in a component c, if the component b needs to send data to the component d, the component b can transmit the data to the external framework through the component a in a data callback mode, and the external framework transmits the data to the component d through the component c in a data transmission mode.

However, in the current scheme, for the micro front-end item of the component nesting structure, data needs to be transmitted by a uniform external framework according to a nesting path during data interaction, and the external framework needs to implement a data writing and reading method for each component on the transmission path, so that the data interaction mode is complicated and inefficient.

Disclosure of Invention

The embodiment of the application provides a method for synchronizing data among components, and aims to solve the problems that a data interaction mode in the related technology is complicated and complex and the efficiency is low.

Correspondingly, the embodiment of the application also provides a device for synchronizing data between the components, electronic equipment and a storage medium, which are used for ensuring the implementation and application of the method.

In order to solve the above problem, an embodiment of the present application discloses a method for synchronizing data between components, where the method includes:

responding to a registration request of a component, and acquiring a synchronization mode corresponding to the component from a plurality of synchronization modes;

acquiring change information sent by a first assembly in the assemblies after logic triggering;

changing the component parameter information according to the change information;

and sending the changed component parameter information to a second component for rendering display according to a synchronous mode corresponding to the second component.

The embodiment of the application discloses a synchronization device of data between assemblies, the device includes:

the response module is used for responding to the registration request of the component and acquiring the synchronization mode corresponding to the component from a plurality of synchronization modes;

the acquisition module is used for acquiring change information sent by a first assembly in the assemblies after logic triggering;

the change module is used for changing the component parameter information according to the change information;

and the sending module is used for sending the changed component parameter information to the second component for rendering and displaying according to a synchronous mode corresponding to the second component.

The embodiment of the application also discloses an electronic device, which comprises: a processor; and a memory having executable code stored thereon that, when executed, causes the processor to perform a method as described in one or more of the embodiments of the application.

Embodiments of the present application also disclose one or more machine-readable media having executable code stored thereon that, when executed, cause a processor to perform a method as described in one or more of the embodiments of the present application.

Compared with the related art, the embodiment of the application has the following advantages:

in the embodiment of the application, each component can be directly decoupled in the scene of component parameter information synchronization, and direct interaction between the components and the data controller is established, so that the components can realize synchronization of the component parameter information between the components in a form of unidirectional interaction with the data controller through a synchronization mode registered in the data controller, and the problem that a number synchronization mode generated by a transmission path of a tree structure and external frame synchronization information in the related art is complex is solved. In addition, according to the embodiment of the application, a plurality of synchronization modes are realized in the data controller for the components to select, so that the flexibility of the mode for the components to acquire the parameter information of the components is improved, and various types of components can be called and used by the universal synchronization mode realized in the data controller, so that the adaptability of the synchronization scheme is improved.

Drawings

FIG. 1 is a block diagram of the structure of one component of an embodiment of the present application;

FIG. 2 is a block diagram of a data controller according to an embodiment of the present application;

FIG. 3 is an architecture diagram of a method for synchronizing data between components according to an embodiment of the present application;

FIG. 4 is an architecture diagram of another method for synchronizing data between components according to an embodiment of the present application;

FIG. 5 is an architecture diagram of another method for synchronizing data between components according to an embodiment of the present application;

FIG. 6 is an interface diagram of a video clip scene according to an embodiment of the present application;

FIG. 7 is an interface diagram of a search engine scenario according to an embodiment of the present application;

FIG. 8 is an interface diagram of a logistics information sequencing of an embodiment of the subject application;

FIG. 9 is a flowchart illustrating steps of a method for synchronizing data between components according to an embodiment of the present application;

FIG. 10 is a flow chart of steps in an embodiment of a method for synchronizing data between components in an embodiment of the present application;

FIG. 11 is a flowchart illustrating steps of an embodiment of a method for synchronizing data between components according to an embodiment of the present application;

FIG. 12 is a block diagram of an apparatus for synchronizing data between components according to an embodiment of the present application;

fig. 13 is a schematic structural diagram of an apparatus according to an embodiment of the present application.

Detailed Description

In order to make the aforementioned objects, features and advantages of the present application more comprehensible, the present application is described in further detail with reference to the accompanying drawings and the detailed description.

To enable those skilled in the art to better understand the present application, the following description is made of the concepts related to the present application:

component (Component): the method is characterized in that the method is a simple encapsulation for data and methods, the components can have own attributes and methods, the attributes are simple visitors of component data, the methods are some simple and visible functions of the components, the components can be used as interface elements, and an interface capable of realizing complex functions is formed by combining the components.

Component parameter information: the state and the data in the component are referred, and the component realizes the rendering display of the component based on the state, the data and the logic defined by the logic layer, wherein the data can influence the state, and the logic can influence the data and the state.

Micro front end item: a technology for converting a single application into a plurality of services or applications which can be independently operated, independently developed, independently deployed and independently maintained is provided, a micro front-end project is equivalent to a set of a plurality of components, and the plurality of components are mutually nested to form a tree structure.

And (5) React: a JavaScript (a lightweight, interpreted or just-in-time programming language with function precedence) library for building user interfaces to build interfaces through selected combinations of components.

The embodiment of the application can be applied to a scene that a plurality of components are used in a gathering way at a micro front end and the like, and under the scene, the plurality of components realize complex functions through mutual cooperation, so that the requirements exist: 1. component parameter information interaction is required between components, for example, one component 1 obtains new component parameter information when logic is triggered, and the operation of the other component 2 needs to obtain the new component parameter information, that is, the component 1 and the component 2 need to realize synchronization of the component parameter information. 2. During front-end development, in order to improve the stability and reusability of projects, part of public components are often extracted to facilitate direct use of other projects, so that the aims of reducing repeated development quantity and improving development efficiency are achieved, decoupling is needed between the components to achieve loose coupling, and better expandability and maintainability are met.

The method for synchronizing data between the components provided by the embodiment of the application can be applied to a data controller, the data controller is provided to be directly connected with each component, and after the components are registered in the data controller, the parameter information of the components can be changed based on the data controller, and the parameter information of the components can be synchronized to other components.

Specifically, referring to fig. 1, which shows a structural block diagram of a component provided in an embodiment of the present application, in the component shown in fig. 1, there are Data (Data), a State (State), a logic (runtime) layer, a rendering (render) layer, a service interface, and a parameter (tips), where the Data is information used for internal logic operation of the component, the State is information used for changing rendering of the component itself, the logic layer defines processing rules of the Data and the State, the logic layer can affect the State and the Data, the rendering layer is used for performing component style rendering and component function rendering according to the State, the service interface provides an access function of an external service, and the parameter is used for implementing import of the external Data and the State.

Further, referring to fig. 2, which shows a block diagram of a data controller provided in an embodiment of the present application, for the data controller shown in fig. 2, there is a component parameter storage slice area for data storage, and a modified state interface (Setstate), a use state interface (usester), a data acquisition interface (Getdata), a modified data interface (Setdata), and an event dispatcher (event dispatcher) are implemented in the data controller. Wherein the modified state interface (Setstate) can interact with the component and the use state interface (usester) which can interact with the component parameter memory area and the state (state) of the variable form; the modification data interface (Setdata) can interact with the component and component parameter memory chip area, and the data acquisition interface (Getdata) can interact with the component and component parameter memory chip area; and the event dispatcher (event Emitter) can interact with the component and the component parameter storage area, and the event dispatcher (event Emitter) has two modes of starting (On) and closing (Off).

Referring to fig. 3, which shows an architecture diagram of synchronization of data between components according to an embodiment of the present application, based on the architecture shown in fig. 3, a data controller according to an embodiment of the present application provides three ways of synchronizing data or states, namely, based on a modified state interface (Setstate), a state interface (Usestate), and a state (state) in a variable form, so as to provide synchronization of states between components; the second mode is based on a data acquisition interface (Getdata) and a modified data interface (Setdata) to provide synchronization of data among the components; the third approach is based on a modified data interface (Setdata) and an event dispatcher (event issuer) to provide synchronization of data between components. If the component needs to realize synchronization of component parameter information through the data controller, firstly, aiming at target component parameter information to be acquired, a synchronization mode corresponding to the target component parameter information needs to be registered in the data controller, and specifically, which target component parameter information and which synchronization mode to register are selected can be determined according to rules defined for the component parameter information in a logic layer of the component.

With reference to fig. 3, for S1, the component 1 generates state change information after logic triggering, the data controller acquires the state change information through a modified state interface (Setstate), then executes S2, acquires the state change information through a state interface (usetate), executes S3, sets a value of a state (state) of a variable form after change by using the state change information, then executes S4 and S5, actively sends the state (state) of the variable form after value assignment to the component 1 and the component 2, so that the component 1 and the component 2 passively receive the state (state) after value assignment, and finally may execute S6, store the state (state) of the variable form after value assignment to a component parameter storage area through the state interface (usetate) to ensure accuracy of reading the state value next time.

In the first mode, the component 1 can receive the state value which is set and changed by using a modified state interface (Setstate) and perform subsequent rendering, and the component 2 can receive the state value which is changed according to logic trigger operation of the component 1, so that the purpose that the component 2 can synchronously acquire the changed state while the component 1 changes the state is achieved. If the component 1 does not need to acquire the changed state, the component 1 may not register the synchronization method in which the state is based on the first method, and the data controller does not execute S4. If the component 1 or the component 2 needs to acquire the state through other synchronization methods, other synchronization methods of the state may be registered, so as to synchronize the state through other methods.

With respect to the second mode, referring to fig. 4, which shows another architecture diagram of synchronization of data between components provided in this embodiment of the present application, for M1, component 1 generates data change information after logic triggering, a data controller may acquire the data change information through a modified data interface (Setdata), change a value of corresponding data in a component parameter storage slice region using the data change information, and then may execute M2 in response to a call operation of component 2 and component 1 to a data acquisition interface (Getdata), extract changed data from a component parameter storage slice region by the data acquisition interface (Getdata), execute M3 and M4, send the changed data to component 1 and component 2, so that component 1 and component 2 actively receive the changed data, and in the second mode, component 1 and component 2 may actively acquire the changed data and perform subsequent rendering, the purpose that the component 2 can synchronously acquire the changed data while the component 1 changes the data is achieved. If the component 1 does not need to acquire the changed data, the component 1 may not register the synchronization method based on the second method for the data, and the data controller does not execute M4. If the component 1 or the component 2 needs to acquire data through other synchronization modes, other synchronization modes of the data can be registered, and the data can be synchronized through other modes.

It should be noted that, according to the first mode, the component 1 may further set a value of a state (state) in a variable form by using a state interface (usester) in an order of M5, M6, and M7, then execute M8, store the state (state) in the variable form after being assigned to the component parameter memory slice area by using the state interface (usester), where the value of the state (state) becomes a data format in the component parameter memory slice area, and if the component 2 needs to acquire the value of the state (state), extract the state value of the data format from the component parameter memory slice area by calling a data acquisition interface (Getdata).

With respect to the third mode, referring to fig. 5, which shows another architecture diagram of synchronization of data between components provided in this embodiment of the present application, for N1, component 1 generates data change information after logic triggering, a data controller may acquire the data change information through a modified data interface (Setdata), change a value of corresponding data in a component parameter storage slice region using the data change information, then N2 may be executed, an event dispatcher extracts the changed data from the component parameter storage slice region, and in a case that it is determined that component 1 and component 2 select enable (On) for the changed data, N3 and N4 are executed, the changed data is sent to component 1 and component 2 in a broadcast manner, so that component 1 and component 2 passively receive the changed data, and in a second mode, component 1 and component 2 may passively acquire the changed data and perform subsequent rendering, the purpose that the component 2 can synchronously acquire the changed data while the component 1 changes the data is achieved. If the component 1 does not need to acquire the changed data, the component 1 may not register the synchronization method based on the third method for the data, or may switch the data to Off (Off) in the event dispatcher so that the data controller does not execute N4. If the component 1 or the component 2 needs to acquire data through other synchronization modes, other synchronization modes of the data can be registered, and the data can be synchronized through other modes.

It should be noted that, according to the first mode, in the order of N5, N6, and N7, component 1 may further set a value of a state (state) in a variable form by using a state interface (Usestate), then execute N8, store the assigned state (state) in the variable form to a component parameter memory slice area by using the state interface (Usestate), where the value of the state (state) becomes a data format in the component parameter memory slice area, and if component 2 needs to obtain the value of the state (state), set an enable (On) in an event dispatcher for the value, the event dispatcher is notified of the state value in the component parameter memory slice area that stores the data format, and the event dispatcher sends the state value in the data format to component 2 in a broadcast manner when determining that component 2 selects the enable (On) for the changed state value.

In the embodiment of the present application, aiming at the three ways, synchronization of component parameter information between components is achieved, and requirement 1 as mentioned above is achieved, in the scheme for synchronizing data by using an external framework as mentioned in the embodiment of the present application, data needs to be transferred by a unified external framework according to a nested path during data interaction, for example, in the case that a component b is nested in a component a, and a component d is nested in a component c, if the component b needs to send data to the component d, the component b can transfer the data to the external framework in a data callback manner through the component a, and the external framework transfers the data to the component d through the component c in a data transfer manner, in this case, strong coupling between components is difficult to separate, the path for data to be synchronized is long and complex, and the transferred data is only useful for the component b and the component d, the component a and the component c only serve for forwarding data, and the data is useless data for the component a and the component c, so that the stress of the component a and the component c is increased, and adverse effects are caused.

In the embodiment of the application, under the scene of synchronization of component parameter information, each component can be directly decoupled, and the association between the components and the data controller is established, so that the components can realize the synchronization of the component parameter information between the components through unidirectional interaction with the data controller, the data acquired by each component is useful data, the problem that the components transmit useless data is solved, and the length and the complexity of a transmission path are reduced. The embodiment of the application also provides a synchronization mode of various data for the components to select according to the actual requirements of the components, so that the robustness of the synchronization scheme is improved. In addition, after the components are decoupled in the embodiment of the application, convenience is provided for maintenance and reuse of the components, so that the requirement 2 is met.

Several specific scenarios that can be implemented for micro front-end projects are as follows:

in a video clip scene, referring to fig. 6, which shows an interface diagram of a video clip scene provided in an embodiment of the present application, an interface for implementing a video clip may include an attribute editing component, a preview component, and a progress component, where data that needs to be used by the three components synchronously includes a bitrate, a frame rate, and a play time, where the play time may be used as data of the component or a state of the component. The attribute editing component can receive the input of a user, so that the code rate and the frame rate of the video are changed; the progress component can receive touch input of a user and change the playing time of the video, the preview component is used for playing the picture of the video according to the code rate, the frame rate, the volume and the playing time, wherein the logic layer of the preview component is provided with a rendering rule, namely artistic words are displayed only within the time range of 1 minute to 2 minutes, based on the rule, the preview component needs to synchronously use the playing time of the progress component, in addition, the preview component also needs to synchronously use the code rate and the frame rate of the attribute editing component, and the adjustment of the played picture is finished.

Assuming that the preview component registers the playing time of the progress component obtained in the first mode and the code rate and the frame rate of the attribute editing component obtained in the second mode in the data controller, in specific operation, when a user drags the progress bar to 1 minute and 30 seconds to realize logic triggering in the progress component, state change information of changing the progress bar to 1 minute and 30 seconds can be transmitted to the data controller, the data controller sets the value of the variable state to 1 minute and 30 seconds according to the state change information, then sends the variable state to the preview component, the preview component judges that the state is in the time range of playing the artistic word based on the rendering rule according to the variable state being the value of 1 minute and 30 seconds, and the preview component can play the artistic word while playing a picture of 1 minute and 30 seconds.

In addition, in specific operation, when a user inputs values of the code rate and the frame rate to realize logic triggering in the attribute editing component, corresponding data change information can be transmitted to the data controller, the data controller can store corresponding values in the component parameter storage area according to the data change information, the preview component can send a code rate and frame rate acquisition request to the data controller before playing one picture, so that the data controller responds to the acquisition request and sends the code rate and the frame rate in the component parameter storage area to the preview component, and the preview component can correspondingly play the picture according to the acquired code rate and frame rate. It should be noted that the component may also register different synchronization modes to acquire component parameter information according to actual requirements, and the embodiment of the present application does not limit the registered synchronization modes.

In another search engine scenario, referring to fig. 7, which shows an interface diagram of a search engine scenario provided in an embodiment of the present application, an interface for implementing a search engine may include an input box component and a search result component, where the input box component is internally provided with a search engine interface and can receive search content input by a user, and the search result component needs to synchronously acquire and display a search result.

Assuming that the input frame component registers the search content in the data controller in the first mode and the search result component registers the search result in the data controller in the third mode, in specific operation, when a user clicks a search button to realize logic trigger when inputting the search content in the input frame component, the corresponding state change information can be transmitted to the data controller, the data controller sets the value of the variable state as the search content according to the state change information and then transmits the variable state to the input frame component, the preview component displays the search content according to the variable state and simultaneously switches the text of the search button from 'search' to 'search', and calls a search engine interface to search by using the search content to obtain the search result and transmits the data change information corresponding to the search result to the data controller, and the data controller writes the search result into a component parameter information storage area according to the data change information, and the event dispatcher extracts the search result from the component parameter storage area, and sends the search result to the search result component for displaying in a broadcasting mode under the condition that the search result component selects On for the data. It should be noted that, the component may also register different synchronization modes according to actual requirements to acquire component parameter information, and the embodiment of the present application does not limit the registered synchronization mode.

In another logistics information sorting scenario, referring to fig. 8, an interface diagram for sorting logistics information provided in the embodiment of the present application is shown, where the interface for realizing the logistics information sorting may include a logistics query component and a query result sorting display component, where the logistics query component is provided with an interface for accessing a logistics information server, and can receive an identifier of a package to be queried in batches and sorted, which is input by a user, and the query result sorting display component needs to synchronously acquire logistics information of the package and perform sorting display according to a sorting rule.

Assuming that the search result component registers logistics information of packages obtained in the third way in the data controller, in specific operation, when a user inputs identifiers of a plurality of packages in the logistics query component to realize logic triggering, an interface for accessing the logistics information server is called, the logistics information of the packages is obtained from the logistics information server, and data change information corresponding to the search result is transmitted to the data controller, the data controller writes the search result into a component parameter information storage area according to the data change information, the event dispatcher extracts the search result from the component parameter storage area, and sends the logistics information of the packages to the query result ordering and displaying component in a broadcasting way under the condition that the query result ordering and displaying component selects enabling (On) for the data, and the query result ordering and displaying component can send an ordering rule from early to late according to delivery date in the logistics information in a logic layer, and sequencing and displaying the logistics information of each package from early to late according to the delivery date. It should be noted that the component may also register different synchronization modes to acquire component parameter information according to actual requirements, and the embodiment of the present application does not limit the registered synchronization modes.

Referring to fig. 9, which is a flowchart illustrating steps of a method for synchronizing data between components according to an embodiment of the present application, including:

step 101, in response to a registration request of a component, acquiring a synchronization mode corresponding to the component from a plurality of synchronization modes.

In the embodiment of the present application, the method for synchronizing data between components is applied to the data controller in fig. 1, and when a component is online, a synchronization manner may be registered in the data controller, and the data controller in the embodiment of the present application provides a synchronization manner of three data or states, where the synchronization manner is implemented based on a modified state interface (Setstate), a used state interface (usetate), and a state (state) in a variable form, so as to provide synchronization of states between components; the second mode is based on a data acquisition interface (Getdata) and a modified data interface (Setdata) to provide synchronization of data among the components; the third approach is based on a modified data interface (Setdata) and an event dispatcher (event issuer) to provide synchronization of data between components. The component may register a corresponding synchronization mode according to actual requirements.

It should be noted that, in the embodiment of the present application, each coupled component is decoupled, and is combined into a micro front-end item, and then the decoupled component is connected with the data controller, so as to form a new synchronization mode, the data controller can be separated into independent plug-ins, and the function of synchronizing component parameter information can be achieved only by introducing and using the plug-ins into the component, and the data controller only collects and changes the component parameter information.

And 102, acquiring change information sent by a first assembly in the assemblies after logic triggering.

In the embodiment of the present application, a plurality of logic rules are written in the logic layer of the component, where the logic rules include a rule for sending the change information after logic triggering, for example, when a user drags the progress bar of the progress component in fig. 4, the logic rule is triggered, and the change information of "dragging the progress bar to the XX moment" can be sent to the data controller according to the logic rule, so that the data controller changes the component parameter information based on the change information, and other subsequent components can synchronously acquire the changed component parameter information.

And 103, changing the component parameter information according to the change information.

In this embodiment of the application, the change information is information provided after the first component logic is triggered and used for indicating a change situation of the component parameter information, and the data controller may change the component parameter information based on the change information, for example, if a state in a variable form exists in the data controller, and if the change information acquired by the data controller is "the progress bar is changed to 1 minute 30 seconds", a value of the state in the variable form may be set to 1 minute 30 seconds.

And 104, sending the changed component parameter information to a second component for rendering display according to a synchronous mode corresponding to the second component.

Optionally, the first component and the second component are the same component, or the first component and the second component are different components.

In the embodiment of the application, when the first component and the second component are different components, another second component different from the first component registers a corresponding synchronization mode in the data controller based on a requirement for obtaining component parameter information, after the data controller changes the component parameter information according to the change information, the changed component parameter information can be sent to the second component according to the synchronization mode corresponding to the second component, and the second component can use the component parameter information to perform rendering display according to a rendering rule in the logic layer.

It should be noted that, in the case that the first component and the second component are the same component, the first component may acquire the component parameter information in a registered synchronization manner on the basis that the component parameter information is set by the data controller, thereby satisfying the requirement of the first component for acquiring the component parameter information. For example, referring to fig. 5, while the progress component sets the play time in the data controller by dragging the progress bar by the user, the progress component may also obtain the dragged play time in a first mode, and display the dragged play time at a corresponding position of the progress component.

Optionally, step 101 may be specifically implemented by responding to a registration request of a component, and acquiring a synchronization mode corresponding to target component parameter information of the component from a plurality of synchronization modes.

Optionally, step 104 may be specifically implemented by sending the changed component parameter information to the second component for rendering and displaying according to a synchronization manner corresponding to the component parameter information of the second component.

In the embodiment of the present application, component parameter information of one component requirement may be multiple, and a component may register different synchronization modes in a data controller for different component parameter information, for example, three component parameter information of one component requirement a, b, and c, and the component may register a synchronization mode of the first mode for the component parameter information a in the data controller according to an actual requirement; registering a synchronization mode of the second mode for the component parameter information b; and registering the synchronization mode of the third mode for the component parameter information c, so that when the component acquires the component parameter information, the component acquires the component parameter information according to the registration mode.

To sum up, in the embodiment of the present application, each component can be directly decoupled in a scenario of component parameter information synchronization, and direct interaction between the component and the data controller is established, so that the component can realize synchronization of the component parameter information between the components in a form of unidirectional interaction with the data controller through a synchronization mode registered in the data controller, and the problem of complex number synchronization mode generated by a transmission path of a tree structure and external frame synchronization information in the related art is solved. In addition, according to the embodiment of the application, a plurality of synchronization modes are realized in the data controller for the components to select, so that the flexibility of the mode for the components to acquire the parameter information of the components is improved, and various types of components can be called and used by the universal synchronization mode realized in the data controller, so that the adaptability of the synchronization scheme is improved.

Referring to FIG. 10, a flow chart of steps of another embodiment of a method for synchronizing data between components of the present application is shown. The method comprises the following steps:

step 201, in response to a registration request of a component, acquiring a synchronization mode corresponding to the component from a plurality of synchronization modes.

This step may specifically refer to step 101, which is not described herein again.

Step 202, obtaining the state change information sent by the first component after logic triggering according to the modified state interface.

The change information includes: state change information; the component parameter information includes: status information;

step 203, changing the state information according to the using state interface and the state changing information, wherein the state information is in a variable form.

And 204, under the condition that the second component corresponds to the first synchronization mode, sending a rendering instruction comprising the changed state information to the second component according to the use state interface so that the second component can perform rendering display according to the rendering instruction.

For the solution implemented in step 201-204, that is, the solution of the first mode proposed in fig. 1, the solution generates state change information after the component 1 is logically triggered, the data controller acquires the state change information through the modified state interface (Setstate), then executes S2, acquires the state change information through the state interface (usetate), and executes S3, sets the value of the state (state) of the variable form after being changed by using the state change information, then executes S4 and S5, actively sends the state (state) of the variable form after being assigned to the component 1 and the component 2, so that the component 1 and the component 2 passively receive the state (state) after being assigned, in a manner that the component 1 can receive the state value after being modified through the modified state interface (Setstate) and perform subsequent rendering, the component 2 can receive the state value changed according to the logical trigger operation of the component 1, the purpose that the component 2 can synchronously acquire the changed state while the component 1 changes the state is achieved. Wherein the use state interface (usester) may be a hook method provided after the react 16.8 version, by which the data controller may modify the state information of the component.

In this way, mutual synchronization of the state information can be realized among the components, and the component 2 passively acquires the state information sent by the data controller, so that the actual requirement of the component 2 for passively acquiring the state information is met.

Optionally, after step 204, the method further includes:

and step 205, storing the changed state information in a component parameter storage area according to the use state interface.

Referring to fig. 1, after the rendering instruction including the changed state information is sent to the component 2, S6 may be finally executed to store the state (state) of the assigned variable form to the component parameter memory tile using a state interface (usester) to ensure the accuracy of reading the state value next time.

Referring to FIG. 11, a flow chart of steps of another embodiment of a method for synchronizing data between components of the present application is shown. The method comprises the following steps:

step 301, in response to a registration request of a component, acquiring a synchronization mode corresponding to the component from a plurality of synchronization modes.

Step 302, acquiring data change information sent by the first component after logic triggering according to the modified data interface.

The change information includes: data change information; the component parameter information includes: data information;

step 303, changing the data information in the component parameter storage area according to the modified data interface and the data change information.

And 304, under the condition that the second component corresponds to a second synchronization mode, responding to the calling operation of the second component to a data acquisition interface, and sending the changed data information from the component parameter storage area to the second component through the data acquisition interface so that the second component can render and display according to the changed data information.

For the scheme implemented in step 301-304, that is, the scheme of the second mode proposed in the above embodiment fig. 2, the scheme generates data change information after the component 1 is logically triggered, the data controller may acquire the data change information through the modified data interface (Setdata), change the value of corresponding data in the component parameter storage area by using the data change information, then may respond to the calling operation of the component 2 and the component 1 to the data acquisition interface (Getdata), execute M2, extract the changed data from the component parameter storage area by the data acquisition interface (Getdata), execute M3 and M4, send the changed data to the component 1 and the component 2, so that the component 1 and the component 2 actively receive the changed data, the second mode enables the component 1 and the component 2 to actively acquire the changed data and perform subsequent rendering, and when the component 1 changes data, the component 2 can synchronously acquire the purpose of the changed data.

In this way, mutual synchronization of data information can be realized among the components, and the component 2 actively acquires the status information sent by the data controller, so that the actual requirement that the component 2 actively acquires the status information is met.

Optionally, after step 303, the method may further include:

and 305, determining the state of the event dispatcher when the second component corresponds to the third synchronization mode.

Step 306, sending the changed data information from the component parameter storage area to the second component when the event dispatcher is in the enabled state, so that the second component can render and display according to the changed data information.

And 307, stopping sending data to the second component when the event dispatcher is in the closed state.

The solution implemented in

steps

301, 302, 303, 305, 306, and 307 is the solution of the third mode proposed in fig. 3 in the above embodiment, where the solution generates data change information after the component 1 is logically triggered, the data controller may obtain the data change information through a modified data interface (Setdata), change the value of corresponding data in the component parameter storage slice region by using the data change information, then N2 may be executed, the event dispatcher extracts the changed data from the component parameter storage slice region, and in a case that it is determined that the component 1 and the component 2 select enable (On) for the changed data, execute N3 and N4, send the changed data to the component 1 and the component 2 in a broadcast manner, so that the component 1 and the component 2 passively receive the changed data, and in a second mode, the component 1 and the component 2 may passively acquire the changed data and perform subsequent rendering, the purpose that the component 2 can synchronously acquire the changed data while the component 1 changes the data is achieved. Wherein the event dispatcher can be implemented based on the eventEmitter 3 framework. An event dispatcher is a model that observes a named event, triggers a callback, and then issues the event with a value attached.

In this way, mutual synchronization of data information can be realized among the components, and the component 2 passively acquires the state information sent by the data controller, so that the actual requirement of the component 2 for passively acquiring the state information is met.

Optionally, the method further includes:

and 308, acquiring a state switching instruction sent by the second component after responding to the logic rule.

Step 309, according to the state switching instruction, switching the event dispatcher from an enabled state to a closed state, or switching the event dispatcher from the closed state to the enabled state.

In addition, the second component can also send a state switching instruction to the data controller according to the judgment of the logic rule, so as to switch the event dispatcher from the enabled state to the disabled state, or switch the event dispatcher from the disabled state to the enabled state, so that the second component can select to receive or not receive the data information by itself. If the event dispatcher is in the enabled state, the second component judges the received data information according to the data reception prohibition rule defined in the logic layer, and sends a state switching instruction to the data controller to switch the event dispatcher from the enabled state to the closed state when the received data information meets the data reception prohibition rule.

Referring to fig. 12, a block diagram of an apparatus for synchronizing data between components according to an embodiment of the present application is shown, including:

a response module 401, configured to, in response to a registration request of a component, obtain a synchronization mode corresponding to the component from a plurality of synchronization modes;

an obtaining module 402, configured to obtain change information sent by a first component in the components after logic triggering;

a changing module 403, configured to change the component parameter information according to the change information;

a sending module 404, configured to send the changed component parameter information to a second component for rendering and displaying in a synchronization manner corresponding to the second component.

Optionally, the change information includes: state change information; the component parameter information includes: status information;

the obtaining module 402 includes:

the first obtaining submodule is used for obtaining state change information sent by the first component after logic triggering according to the modified state interface;

the change module 403 includes:

and the first change submodule is used for changing the state information according to the using state interface and the state change information, and the state information is in a variable form.

Optionally, the sending module 404 includes:

and the first sending submodule is used for sending the rendering instruction comprising the changed state information to the second assembly according to the use state interface under the condition that the second assembly corresponds to a first synchronization mode so as to enable the second assembly to render and display according to the rendering instruction.

Optionally, the method further includes:

and the storage module is used for storing the changed state information in a component parameter storage area according to the use state interface.

Optionally, the change information includes: data change information; the component parameter information includes: data information;

the obtaining module 402 includes:

the second obtaining submodule is used for obtaining data change information sent by the first component after logic triggering according to the modified data interface;

the change module 403 includes:

and the second change submodule is used for changing the data information in the component parameter memory area according to the modified data interface and the data change information.

Optionally, the sending module 404 includes:

and the second sending submodule is used for responding to the calling operation of the second component to a data acquisition interface under the condition that the second component corresponds to a second synchronous mode, and sending the changed data information to the second component from the component parameter storage area through the data acquisition interface so as to render and display the second component according to the changed data information.

Optionally, the sending module 404 includes:

the determining submodule is used for determining the state of the event dispatcher under the condition that the second component corresponds to the third synchronization mode;

the first processing submodule is used for sending the changed data information to the second component from the component parameter storage area under the condition that the event dispatcher is in an enabled state so as to render and display the second component according to the changed data information;

and the second processing submodule is used for stopping sending data to the second module under the condition that the event dispatcher is in a closed state.

Optionally, the method further includes:

the switching instruction module is used for acquiring a state switching instruction sent by the second component after responding to the logic rule;

and the switching module is used for switching the event dispatcher from an enabled state to a closed state or switching the event dispatcher from the closed state to the enabled state according to the state switching instruction.

Optionally, the obtaining module 402 includes:

the selection submodule is used for responding to a registration request of the component and acquiring a synchronization mode corresponding to the target component parameter information of the component from a plurality of synchronization modes;

the sending module 404 includes:

and the synchronization submodule is used for sending the changed component parameter information to the second component for rendering and displaying according to a synchronization mode corresponding to the component parameter information of the second component.

In summary, in the embodiment of the present application, in a scenario of synchronization of component parameter information, each component may be directly decoupled, and direct interaction between the component and the data controller is established, so that the component may implement synchronization of the component parameter information between the components in a form of unidirectional interaction with the data controller through a synchronization manner registered in the data controller, and a problem that a number synchronization manner generated by a transmission path of a tree structure and external frame synchronization information in a related art is complicated is solved. In addition, according to the embodiment of the application, a plurality of synchronization modes are realized in the data controller for the components to select, so that the flexibility of the mode for the components to acquire the parameter information of the components is improved, and various types of components can be called and used by the universal synchronization mode realized in the data controller, so that the adaptability of the synchronization scheme is improved.

The present application further provides a non-transitory, readable storage medium, where one or more modules (programs) are stored, and when the one or more modules are applied to a device, the device may execute instructions (instructions) of method steps in this application.

Embodiments of the present application provide one or more machine-readable media having instructions stored thereon, which when executed by one or more processors, cause an electronic device to perform the methods as described in one or more of the above embodiments. In the embodiment of the present application, the electronic device includes various types of devices such as a terminal device and a server (cluster).

Embodiments of the present disclosure may be implemented as an apparatus, which may include electronic devices such as a terminal device, a server (cluster), etc., using any suitable hardware, firmware, software, or any combination thereof, to perform a desired configuration. Fig. 13 schematically illustrates an example apparatus 1000 that may be used to implement various embodiments described in embodiments of the present application.

For one embodiment, fig. 13 illustrates an example apparatus 1000 having one or more processors 1002, a control module (chipset) 1004 coupled to at least one of the processor(s) 1002, a memory 1006 coupled to the control module 1004, a non-volatile memory (NVM)/storage 1008 coupled to the control module 1004, one or more input/output devices 1010 coupled to the control module 1004, and a network interface 1012 coupled to the control module 1004.

The processor 1002 may include one or more single-core or multi-core processors, and the processor 1002 may include any combination of general-purpose or special-purpose processors (e.g., graphics processors, application processors, baseband processors, etc.). In some embodiments, the apparatus 1000 can be used as a terminal device, a server (cluster), and other devices described in this embodiment.

In some embodiments, the apparatus 1000 may include one or more computer-readable media (e.g., the memory 1006 or the NVM/storage 1008) having instructions 1014 and one or more processors 1002 that, in conjunction with the one or more computer-readable media, are configured to execute the instructions 1014 to implement modules to perform the actions described in this disclosure.

For one embodiment, control module 1004 may include any suitable interface controllers to provide any suitable interface to at least one of the processor(s) 1002 and/or any suitable device or component in communication with control module 1004.

The control module 1004 may include a memory controller module to provide an interface to the memory 1006. The memory controller module may be a hardware module, a software module, and/or a firmware module.

Memory 1006 may be used, for example, to load and store data and/or instructions 1014 for device 1000. For one embodiment, memory 1006 may comprise any suitable volatile memory, such as suitable DRAM. In some embodiments, the memory 1006 may comprise a double data rate type four synchronous dynamic random access memory (DDR4 SDRAM).

For one embodiment, the control module 1004 may include one or more input/output controllers to provide an interface to the NVM/storage 1008 and input/output device(s) 1010.

For example, NVM/storage 1008 may be used to store data and/or instructions 1014. NVM/storage 1008 may include any suitable non-volatile memory (e.g., flash memory) and/or may include any suitable non-volatile storage device(s) (e.g., one or more hard disk drive(s) (HDD (s)), one or more Compact Disc (CD) drive(s), and/or one or more Digital Versatile Disc (DVD) drive (s)).

The NVM/storage 1008 may include storage resources that are physically part of the device on which the apparatus 1000 is installed, or it may be accessible by the device and need not be part of the device. For example, NVM/storage 1008 may be accessed over a network via input/output device(s) 1010.

Input/output device(s) 1010 may provide an interface for apparatus 1000 to communicate with any other suitable device, input/output devices 1010 may include communication components, audio components, sensor components, and so forth. Network interface 1012 may provide an interface for device 1000 to communicate over one or more networks, and device 1000 may communicate wirelessly with one or more components of a wireless network according to any of one or more wireless network standards and/or protocols, such as to access a communication standard-based wireless network, such as WiFi, 2G, 3G, 4G, 5G, etc., or a combination thereof.

For one embodiment, at least one of the processor(s) 1002 may be packaged together with logic for one or more controller(s) (e.g., memory controller module) of control module 1004. For one embodiment, at least one of the processor(s) 1002 may be packaged together with logic for one or more controller(s) of control module 1004 to form a System In Package (SiP). For one embodiment, at least one of the processor(s) 1002 may be integrated on the same die with the logic of one or more controllers of the control module 1004. For one embodiment, at least one of the processor(s) 1002 may be integrated on the same die with logic for one or more controller(s) of control module 1004 to form a system on chip (SoC).

In various embodiments, the apparatus 1000 may be, but is not limited to: a server, a desktop computing device, or a mobile computing device (e.g., a laptop computing device, a handheld computing device, a tablet, a netbook, etc.), among other terminal devices. In various embodiments, the apparatus 1000 may have more or fewer components and/or different architectures. For example, in some embodiments, device 1000 includes one or more cameras, a keyboard, a Liquid Crystal Display (LCD) screen (including a touch screen display), a non-volatile memory port, multiple antennas, a graphics chip, an Application Specific Integrated Circuit (ASIC), and speakers.

The detection device can adopt a main control chip as a processor or a control module, sensor data, position information and the like are stored in a memory or an NVM/storage device, a sensor group can be used as an input/output device, and a communication interface can comprise a network interface.

For the device embodiment, since it is basically similar to the method embodiment, the description is simple, and for the relevant points, refer to the partial description of the method embodiment.

The embodiments in the present specification are all described in a progressive manner, and each embodiment focuses on differences from other embodiments, and portions that are the same and similar between the embodiments may be referred to each other.

Embodiments of the present application are described with reference to flowchart illustrations and/or block diagrams of methods, terminal devices (systems), and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing terminal to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing terminal, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing terminal to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable data processing terminal to cause a series of operational steps to be performed on the computer or other programmable terminal to produce a computer implemented process such that the instructions which execute on the computer or other programmable terminal provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

While preferred embodiments of the present application have been described, additional variations and modifications of these embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. Therefore, it is intended that the appended claims be interpreted as including preferred embodiments and alterations and modifications as fall within the scope of the embodiments of the application.

Finally, it should also be noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or terminal that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or terminal. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or terminal that comprises the element.

The method, the apparatus, the electronic device, and the storage medium for synchronizing data between components provided by the present application are introduced in detail above, and a specific example is applied in the present application to explain the principle and the implementation of the present application, and the description of the above embodiment is only used to help understand the method and the core idea of the present application; meanwhile, for a person skilled in the art, according to the idea of the present application, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present application.

Claims

1. A method for synchronizing data between components, comprising:

2. The method of claim 1, wherein the change information comprises: state change information; the component parameter information includes: status information;

the obtaining of the change information sent by the first component in the components after the logic triggering includes:

acquiring state change information sent by the first component after logic triggering according to a state modification interface;

the changing the component parameter information according to the change information comprises:

and changing the state information according to the using state interface and the state change information, wherein the state information is in a variable form.

3. The method according to claim 2, wherein the sending the changed component parameter information to the second component for rendering display in a synchronous manner corresponding to the second component comprises:

and under the condition that the second component corresponds to the first synchronization mode, sending a rendering instruction comprising the changed state information to the second component according to the use state interface so that the second component can perform rendering display according to the rendering instruction.

4. The method of claim 3, wherein after sending rendering instructions including the changed state information to the second component according to the usage state interface, further comprising:

and storing the changed state information in a component parameter memory area according to the use state interface.

5. The method of claim 1, wherein the change information comprises: data change information; the component parameter information includes: data information;

acquiring data change information sent by the first component after logic triggering according to a modified data interface;

and changing the data information in the component parameter memory area according to the modified data interface and the data change information.

6. The method according to claim 5, wherein the sending the changed component parameter information to the second component for rendering display in a synchronous manner corresponding to the second component comprises:

and under the condition that the second component corresponds to a second synchronization mode, responding to the calling operation of the second component to a data acquisition interface, and sending the changed data information to the second component from the component parameter storage area through the data acquisition interface so as to render and display the second component according to the changed data information.

7. The method according to claim 5, wherein the sending the changed component parameter information to the second component for rendering display in a synchronous manner corresponding to the second component comprises:

determining the state of an event dispatcher under the condition that the second component corresponds to a third synchronization mode;

under the condition that the event dispatcher is in an enabled state, sending the changed data information from the component parameter storage area to the second component for the second component to render and display according to the changed data information;

and stopping sending data to the second component when the event dispatcher is in the closed state.

8. The method of claim 7, further comprising:

acquiring a state switching instruction sent by the second component after responding to a logic rule;

and switching the event dispatcher from an enabled state to a closed state or switching the event dispatcher from the closed state to the enabled state according to the state switching instruction.

9. The method according to claim 1, wherein the obtaining a synchronization pattern corresponding to the component from a plurality of synchronization patterns in response to the registration request of the component comprises:

responding to a registration request of a component, and acquiring a synchronization mode corresponding to target component parameter information of the component from a plurality of synchronization modes;

sending the changed component parameter information to a second component for rendering display according to a synchronous mode corresponding to the second component, comprising:

and sending the changed component parameter information to the second component for rendering display according to a synchronization mode corresponding to the component parameter information of the second component.

10. The method of any one of claims 1-9, wherein the first component and the second component are the same component, or the first component and the second component are different components.

11. An electronic device, comprising:

a processor; and

memory having stored thereon executable code which, when executed, causes the processor to perform the method of any of claims 1 to 10.

12. One or more machine-readable media having executable code stored thereon that, when executed, causes a processor to perform the method of any of claims 1 to 10.