Service architecture method and device for multi-scene application

Abstract

The embodiment of the invention relates to a service architecture method and device for a multi-scene application. The method comprises the following steps: setting a project directory for the multi-scene application; setting a plurality of shared module directories and a plurality of application customization directories under the directory; each shared module directory stores a module service program of a class of basic services; each application customization directory stores a container program, a context program and an application program customized by a class of scenes; based on an InversifyJS container, performing dependency injection management on all the module service programs of the shared module directory; based on the container program, the context program and the application program, customizing an independent dependency injection container, a scene context and a scene front-end application for each scene; and decoupling the front-end UI and the back-end business logic based on the Zustand state management library. Through the method, the code reuse rate can be improved, the development cost is saved, and the flexibility of application expansion is improved.

Description

Technical Field

[0001] The present invention relates to the field of data processing technology, and in particular to a service architecture method and device for multi-scenario applications. Background Art

[0002] In web application development, traditional layered service architectures deeply couple business logic, state management, and interface rendering. The problems with this traditional architecture are: 1) excessive code customization and low reuse rates. Development needs to be reorganized after switching scenarios, which hinders the development cycle of each application, increases the amount of redundant code, and makes it difficult to effectively reduce development and maintenance costs. 2) application functionality expansion is inflexible, and adding or removing features can result in significant code maintenance and upgrade workloads. Summary of the Invention

[0003] The present application aims at the defects of the prior art, and provides a service architecture method and device for multi-scene application, electronic equipment and computer readable storage medium. The present application proposes a service architecture technical system for multi-scene application: 1) a physical isolation of a shared service layer (N shared module directories) and a scene customization layer (M application customization directories) is established, service classes and application components are developed based on TypeScript, services are combined as needed for different scenes, and a corresponding Dependency Injection (DI) container is encapsulated; 2) the Dependency Injection and management of service instances are realized in combination with the InversifyJS library, a service state mirror is constructed through Zustand, and each service class is associated with an independent state storage (store) instance; 3) a one-way subscription of service-state is established by using the observer mode, and state changes trigger UI re-rendering through the React update mechanism; 4) a scene-level Dependency Injection container scope is created based on React Context, the container instance is obtained as needed through a custom Hook, the scene root component accesses the Hook to inject the service instance through the container, and the UI component establishes data subscription through the state storage Hook, forming a responsive link of "service-state-view"; 5) the front-end UI response event is transmitted to the service layer through the state storage instance, and the service layer state change reversely pushes the changed data to the subscribed component through the state storage instance. Therefore, the service architecture of the present application decouples all basic services by using the Dependency Injection management mechanism of the InversifyJS library, decouples the application components and basic service instances through the state storage instance, realizes cross-component state sharing based on the Zustand state management library, and processes all state / property processing procedures in the basic services. The code reuse rate is improved, the programming workload and complexity of the front-end application program are reduced. Through the present application, the code reuse rate can be improved, the redundant code can be reduced, the development difficulty can be reduced, the development cycle can be shortened, the development cost can be saved, and the expansion flexibility of application functions can be increased.

[0004] To achieve the above object, a first aspect of an embodiment of the present application provides a service architecture method for multi-scene application, comprising:

[0005] A project directory is set for multi-scene applications, denoted as a first directory; the first directory includes a global identification program, N shared module directories, and M application customization directories, the total number of modules N and the total number of scenes M are two preset positive integers; each shared module directory corresponds to a type of basic service; each application customization directory corresponds to a type of scene; each shared module directory is used to store a corresponding module service program; each application customization directory is used to store a corresponding container program, context program, and application program; the file type of the global identification program and the container program is ts file type, and the file type of the module service program, the context program, and the application program is tsx file type;

[0006] A service class code segment of a current basic service is implanted in each module service program, and the current service class is marked as an injectable service class using the @injectable() decorator; and in each module service program that depends on other basic services, the @inject decorator is used to perform dependency injection in a constructor injection manner; and in each module service program, a corresponding state storage instance of the current service class is created on the Zustand state management library, and the current service class is state-subscribed in the initialization method of the state storage instance, and the internal operation method of the current service class is exposed by constructing a method with the same name for the state storage instance, and a custom hook for calling the state storage instance method is defined as a corresponding state storage access hook;

[0007] In the global identification program, a global unique identification is assigned to each basic service as a corresponding basic service identification by using the Symbol function;

[0008] In each container program, an InversifyJS library dependency injection container instance is created for the corresponding scene container instance; and one or more basic service identifications are selected based on the basic service requirements of the current scene to perform singleton service instance binding in the scene container instance; the scene container instance binds one or more basic service instances and provides dependency injection management for all the bound basic service instances;

[0009] In each context program, a context object is created for the corresponding scene container instance as a corresponding scene context according to the createContext function of the React library; and a React function component is constructed as a corresponding scene context provider; and a custom hook is defined based on the useContext function to obtain the scene container instance from the scene context as a corresponding container access hook;

[0010] In each of the applications, a React function component is constructed as the root component of the current scene; and in the root component, the scene container instance of the current scene is obtained through the container access hook, and the get method of the scene container instance is used to obtain the various basic service instances bound in the container, and the state storage instance is initialized through the initialization method of the state storage access hook of each of the basic service instances in the useEffect function, and a subscription relationship is established between each of the state storage instances and its corresponding basic service instance during the initialization process, and multiple React function components are constructed as UI element components of the current scene based on the application UI requirements of the current scene; and in each of the UI element components, a data-level subscription relationship is established with the current UI element component by calling the state storage access hook to obtain one or more specified data items from the corresponding state storage instance, and various UI response events of the current UI element component are bound to a class of operation methods of a state storage instance; and the root component is wrapped based on the scene context provider of the current scene.

[0011] Preferably, the program code of the module service program includes an import code segment, a data type definition code segment, the service class code segment and a state storage instance code segment;

[0012] The import code segment includes import codes for the inversify package and the zustand package; the inversify package is a toolkit of the InversifyJS library for dependency injection management; the zustand package is a toolkit of the Zustand state management library;

[0013] The data type definition code segment is used to define one or more custom data types of the current basic service;

[0014] The service class code segment is used to define the service class of the current basic service, including a state definition code segment and a method definition code segment;

[0015] At the code header of the service class code segment, the @injectable() decorator is used to mark the current service class as an injectable service class; if the current basic service also depends on other basic services, the @inject decorator is used in the constructor of the current service class to inject the service classes of other dependent basic services;

[0016] The state definition code segment is used to define a plurality of private or public states or attribute data;

[0017] The method definition code segment includes a constructor code, a status subscription method code, a subscription notification method code and a plurality of operation method codes;

[0018] The constructor code corresponds to the constructor of the current service class;

[0019] The state subscription method code corresponds to the state subscription method subscribe of the current service class, and is used to perform listener registration and deregistration operations on the subscriber of the current service class;

[0020] The subscription notification method code corresponds to the subscription notification method notify of the current service class, and is used to send subscription update notifications to all registered listeners when the current method is called;

[0021] Each operation method code corresponds to an operation method of the current service class and is used to perform a read / write operation on one or more state or attribute data according to the input parameters of the current method in a preset processing flow; the last line of each operation method code containing a write operation on any specified state attribute data is a method call code of the subscription notification method notify; each specified state attribute data is a type of pre-specified state data or attribute data, and each specified state attribute data is synchronized to the corresponding state storage instance;

[0022] The state storage instance code segment is used to create the corresponding state storage instance for the current service class in the Zustand state management library according to the create method of the Zustand state management library; and construct a corresponding initialization method and one or more operation methods for the state storage instance; and define a custom hook for the state storage instance as the corresponding state storage access hook;

[0023] The initialization method of the state storage instance is used to obtain one or more specified state attribute data corresponding to one or more operation methods of the current service class for reading the specified state attribute data when the current method is called, and write each specified state attribute data into the state tree built-in in the state storage instance through the set method of the Zustand state management library; and register the state storage instance as a listener object of the current service class through the state subscription method subscribe of the current service class; the registered state storage instance will receive the subscription update notification sent by the subscription notification method notify when any of the specified state attribute data of the current service class changes, and will update the built-in state tree based on the set method of the Zustand state management library according to all the specified state attribute data obtained this time after obtaining all the specified state attribute data by calling the operation method of the current service class each time a subscription update notification is received;

[0024] Each operation method of the state storage instance matches an operation method of the current service class, and the method name, method input / output parameter and method output type of each operation method of the state storage instance are consistent with the matching operation method of the current service class; each operation method of the state storage instance is used to pass the input of the current method to the method with the same name of the current service class and return the output of the method with the same name as its own output when the current method is called.

[0025] The state storage access hook is used to expose the initialization method and operation method of the state storage instance to the external React component, and indirectly expose the internal operation method of the current service class to the external React component by exposing the operation method of the state storage instance.

[0026] Preferably, the global identification procedure is a full-service identification declaration file of the first directory, which is used to assign a corresponding global unique identifier as the first service identification to each basic service of the first directory respectively by using the Symbol function.

[0027] Preferably, in the application program, the root component and all the UI element components can access the corresponding scene container instance; each UI element component corresponds to one or more state storage instances.

[0028] Preferably, under the current service architecture, the interaction process of the basic service instance, the state storage instance and the UI element component is as follows:

[0029] When a type of UI response event of its own occurs, the UI element component uses the state storage instance, the state storage access hook, and the operation method of the state storage instance corresponding to the current UI response event as the corresponding current instance, current hook, and current operation method, and uses the output parameters of the current event as the corresponding current method input parameters, and passes the current method input parameters to the current operation method of the current instance through the current hook for processing; when the operation method of the state storage instance receives the method input parameters sent by the UI element component, it passes the current method input parameters to the operation method of the same name of the corresponding basic service instance for processing; when the operation method of the basic service instance receives the method input parameters sent by the state storage instance, it performs one processing according to the current method input parameters based on the processing flow of the current method;

[0030] When any of the specified state attribute data of the basic service instance is updated, the currently updated specified state attribute data is used as the corresponding updated data item, and the corresponding state storage instance is notified through the subscription notification method to update its own state tree based on the updated data item; when any data item on the state tree of the state storage instance is updated, the Zustand state management library uses the UI element component that has subscribed to the currently updated data item as the current element component, and sends the currently updated data item to the current element component through the React library; when the UI element component receives the updated data item sent by the Zustand state management library, it first updates the local associated state and / or attributes of the component based on the currently updated data item, and then performs a UI rendering operation based on the latest local state attribute set of the component.

[0031] A second aspect of an embodiment of the present invention provides an apparatus for implementing the service architecture method for multi-scenario applications described in the first aspect above, the apparatus comprising: a multi-scenario application directory setting module, a basic service processing module, a global identification declaration module, a scenario container customization module, a scenario context customization module, and a scenario application customization module;

[0032] The multi-scenario application directory setting module is used to set a project directory for a multi-scenario application as the first directory; the first directory includes a global identification program, N shared module directories and M application customization directories, the total number of modules N and the total number of scenarios M are two preset positive integers; each shared module directory corresponds to a type of basic service; each application customization directory corresponds to a type of scenario; each shared module directory is used to store a corresponding module service program; each application customization directory is used to store a corresponding container program, context program and application program; the file type of the global identification program and the container program is the ts file type, and the file type of the module service program, the context program and the application program is the tsx file type;

[0033] The basic service processing module is used to implant the service class code segment of the current basic service in each of the module service programs, and use the @injectable() decorator to mark the current service class as an injectable service class; and use the @inject decorator in each of the module service programs that depends on other basic services to perform dependency injection in the form of constructor injection; and create a corresponding state storage instance on the Zustand state management library for the current service class in each of the module service programs, and subscribe to the state of the current service class in the initialization method of the state storage instance, and expose the internal operation method of the current service class by constructing a method of the same name for the state storage instance, and define a custom hook for calling the state storage instance method as the corresponding state storage access hook;

[0034] The global identification declaration module is used to assign a globally unique identifier as the corresponding basic service identifier to each basic service through the Symbol function in the global identification program;

[0035] The scene container customization module is used to create a dependency injection container instance of the InversifyJS library as the corresponding scene container instance for each of the container programs for the corresponding scene; and select one or more basic service identifiers based on the basic service requirements of the current scene to perform singleton service instance binding in the scene container instance; the scene container instance is bound to one or more basic service instances, and provides dependency injection management for all the bound basic service instances;

[0036] The scene context customization module is used to create a context object as the corresponding scene context for the corresponding scene container instance according to the createContext function of the React library in each context program; and to construct a React function component as the corresponding scene context provider; and to define a custom hook for obtaining the scene container instance from the scene context based on the useContext function as the corresponding container access hook;

[0037] The scene application customization module is used to build a React function component as the root component of the current scene in each of the applications; and in the root component, obtain the scene container instance of the current scene through the container access hook, and use the get method of the scene container instance to obtain the various basic service instances bound in the container, and initialize the state storage instance through the initialization method of the state storage access hook of each of the basic service instances in the useEffect function, and establish a subscription relationship between each of the state storage instances and its corresponding basic service instance during the initialization process, and build multiple React function components as the UI element components of the current scene based on the application UI requirements of the current scene; and in each of the UI element components, establish a data-level subscription relationship with the current UI element component by calling the state storage access hook to obtain one or more specified data items from the corresponding state storage instance, and bind various UI response events of the current UI element component to a class of operation methods of the state storage instance; and wrap the root component based on the scene context provider of the current scene.

[0038] A third aspect of an embodiment of the present invention provides an electronic device, including: a memory, a processor, and a transceiver;

[0039] The processor is configured to be coupled to the memory, read and execute instructions in the memory, so as to implement the method steps described in the first aspect above;

[0040] The transceiver is coupled to the processor, and the processor controls the transceiver to send and receive messages.

[0041] A fourth aspect of an embodiment of the present invention provides a computer-readable storage medium, which stores computer instructions. When the computer instructions are executed by a computer, the computer executes the instructions of the method described in the first aspect above.

[0042] Embodiments of the present invention provide a service architecture method, device, electronic device, and computer-readable storage medium for multi-scenario applications. As can be seen from the above content, the embodiments of the present invention propose a service architecture technology system for multi-scenario applications: 1) Establish physical isolation between the shared service layer (N shared module directories) and the scenario customization layer (M application customization directories), develop service classes and application components based on TypeScript, combine services on demand for different scenarios and encapsulate corresponding dependency injection containers; 2) Combine the InversifyJS library to implement dependency injection and management of service instances, build service state images through Zustand, and associate each service class with an independent state storage instance; 3) Use the observer pattern to establish a one-way service-state subscription, and trigger UI re-rendering through the React update mechanism when the state changes; 4) Create a scenario-level dependency injection container scope based on React Context, and implement on-demand acquisition of container instances through custom hooks. The scene root component injects the service instance through the container access hook, and the UI component establishes data subscription through the state storage hook, forming a responsive "service-state-view" link; 5) The front-end UI response event is transparently transmitted to the service layer through the state storage instance. The service layer state change pushes the change data back to the subscription component through the state storage instance as an intermediary. In general, the service architecture of the embodiment of the present invention utilizes the dependency injection management mechanism of the InversifyJS library to decouple all basic services, decouples application components from basic service instances using state storage instances as a transit, implements cross-component state sharing based on the Zustand state management library, and sinks the processing of all states / attributes into the basic services for processing. The embodiment of the present invention processes, improves the code reuse rate, and reduces the programming workload and programming complexity of the front-end application. The present invention not only improves the code reuse rate and reduces redundant code, but also reduces the development difficulty, shortens the development cycle, saves development costs, and increases the flexibility of expanding application functions. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] Figure 1 A schematic diagram of a service architecture method for multi-scenario applications provided in the first embodiment of the present invention;

[0044] Figure 2 A schematic diagram of a first directory provided in Example 1 of the present invention;

[0045] Figure 3 A schematic diagram of the asynchronous link between the basic service instance, state storage instance, and UI element component provided in the first embodiment of the present invention;

[0046] Figure 4 A module structure diagram of a service architecture device for multi-scenario applications provided in the second embodiment of the present invention;

[0047] Figure 5 This is a structural diagram of an electronic device provided in Example 3 of the present invention. DETAILED DESCRIPTION

[0048] To make the objectives, technical solutions, and advantages of the present invention more apparent, the present invention will be further described in detail below with reference to the accompanying drawings. It should be understood that the embodiments described herein are merely some, rather than all, of the present invention. All other embodiments derived by persons of ordinary skill in the art based on the embodiments of the present invention without inventive effort are intended to fall within the scope of protection of the present invention.

[0049] The first embodiment of the present invention provides a service architecture method for multi-scenario applications; Figure 1 As shown in the schematic diagram of a service architecture method for multi-scenario applications provided in the first embodiment of the present invention, the method mainly includes the following steps:

[0050] Step 1: Set the project directory for multi-scenario applications as the first directory.

[0051] Here, as Figure 2 As shown in the first directory diagram provided in the first embodiment of the present invention, the first directory in the embodiment of the present invention includes a global identification program, N shared module directories and M application customization directories.

[0052] The total number of modules N and the total number of scenes M are two preset positive integers.

[0053] Each shared module directory corresponds to a type of basic service; here, the basic services of the embodiments of the present invention include conventional environment variable services, file system services, storage management services, command line console services, shortcut key services, text editor services, 2D / 3D view editor services, directory tree services, drop-down menu services, layout container services, right-click menu services, top menu services, side status bar services, bottom status bar services, object drag services, etc.

[0054] Each application customization directory corresponds to a type of scenario; here, all scenarios in the embodiment of the present invention are WEB application scenarios by default, such as a web version work platform (Space), a web version e-commerce platform, and the like.

[0055] Each shared module directory is used to store the corresponding module service program; each application customization directory is used to store the corresponding container program, context program and application program; the file type of the global identification program and container program is the ts file type, and the file type of the module service program, context program and application program is the tsx file type. Figure 2For example, the global identifier program can be named identifiers.ts, the container program can be named container_k.ts, the context program can be named context_k.tsx, the application can be named app_k.tsx, 1≤index k≤M, and each module service program can be named xxx-service.tsx, where xxx is the corresponding basic service name or abbreviation.

[0056] Step 2: In each module service program, implant the service class code snippet of the current basic service, and use the @injectable() decorator to mark the current service class as an injectable service class; and use the @inject decorator in each module service program that depends on other basic services to perform dependency injection in the constructor injection mode; and in each module service program, create a corresponding state storage instance on the Zustand state management library for the current service class, and subscribe to the state of the current service class in the initialization method of the state storage instance, and expose the internal operation method of the current service class by building a method of the same name for the state storage instance, and define a custom hook for calling the state storage instance method as the corresponding state storage access hook.

[0057] Here, the program code of the module service program includes an import code segment, a data type definition code segment, a service class code segment, and a state storage instance code segment.

[0058] 1) The import code segment includes import codes for the inversify package and the zustand package; the inversify package is a tool package of the InversifyJS library for dependency injection management; the zustand package is a tool package of the Zustand state management library.

[0059] Here, the import code segment in the embodiment of the present invention is the "import..." code segment at the beginning of the TypeScript program. It should be noted that the import code segment of the module service program may also include one or more other toolkits in addition to the inversify package and the zustand package, for example:

[0060] import{injectable,inject}from'inversify';

[0061] import{FILE_SYSTEM_PROVIDER}from'.. / identifiers';

[0062] import type{FileSystemProvider}from'.. / filesystem / fs-service';

[0063] import create from'zustand'.

[0064] 2) The data type definition code segment is used to define one or more custom data types of the current basic service.

[0065] The custom data type here is a data type defined based on actual application requirements, such as a personalized data type defined based on an enumeration type;

[0066] export enum ResizeType{

[0067] None=0,

[0068] Horizontal=1,

[0069] Vertical=2

[0070] }.

[0071] 3) The service class code segment is used to define the service class of the current basic service, including the state definition code segment and the method definition code segment.

[0072] a. In the code header of the service class code segment, the @injectable() decorator marks the current service class as an injectable service class. If the current basic service also depends on other basic services, the @inject decorator is used in the constructor of the current service class to inject the service classes of other dependent basic services.

[0073] For example:

[0074]

[0075]

[0076] It should be noted that the default naming rule of the service class in the embodiment of the present invention is xxxService, where xxx corresponds to xxx in the file name of the current module service program.

[0077] b. The state definition code segment is used to define multiple private or public states or attribute data.

[0078] For example:

[0079] private editors:EditorItem[]=[];

[0080] private activeEditor:string|null=null;

[0081] private listeners:Array<()=>void>=[].

[0082] c. The method definition code segment includes constructor code, status subscription method code, subscription notification method code and multiple operation method codes.

[0083] The constructor code corresponds to the constructor of the current service class;

[0084] For example:

[0085]

[0086] The status subscription method code corresponds to the status subscription method subscribe of the current service class, and is used to register and unregister listeners for the subscribers of the current service class.

[0087] The writing format of the state subscription method subscribe is fixed, as shown below:

[0088]

[0089] The subscription notification method code corresponds to the subscription notification method notify of the current service class, and is used to send subscription update notifications to all registered listeners when the current method is called.

[0090] The writing format of the subscription notification method notify is fixed, as shown below:

[0091] private notify(){

[0092] this.listeners.forEach(listener=>listener());

[0093] }.

[0094] Each operation method corresponds to an operation method in the current service class and is used to read or write one or more state or attribute data according to a predefined processing flow and the input parameters of the current method. The last line of each operation method code that performs a write operation on any specified state attribute data is the method call code for the subscription notification method notify. Here, each specified state attribute data is a predefined category of state data or attribute data, and each specified state attribute data is synchronized to the corresponding state storage instance.

[0095] For example:

[0096]

[0097] In the above code, editors and activeEditor are two specified state attribute data.

[0098] 4) The state storage instance code segment is used to create a corresponding state storage instance for the current service class in the Zustand state management library according to the create method of the Zustand state management library; and construct a corresponding initialization method and one or more operation methods for the state storage instance; and define a custom hook as the corresponding state storage access hook for the state storage instance; here, the naming method of all custom HOOKs in the embodiment of the present invention defaults to: usexxxStore, where xxx corresponds to xxx in the file name of the current module service program.

[0099] The initialization method of the state storage instance is used to obtain the corresponding one or more specified state attribute data through one or more operation methods of the current service class for reading the specified state attribute data when the current method is called, and write each specified state attribute data into the state tree built into the state storage instance through the set method of the Zustand state management library; and register the state storage instance as the listening object of the current service class through the state subscription method subscribe of the current service class.

[0100] It should be noted that a registered state storage instance will receive subscription update notifications sent via the notify method of the subscription notification when any specified state attribute data of the current service class changes. Upon receiving each subscription update notification, the instance first retrieves all specified state attribute data by calling an operation method (e.g., get) of the current service class. Then, using the set method of the Zustand state management library, it updates the built-in state tree based on all the specified state attribute data obtained this time. If the state tree of the state storage instance is too large, alternative update mechanisms can be used. One is a time-sharing batch update mechanism, which retrieves and caches the specified state attribute data corresponding to each subscription update notification. At specified intervals, the state tree is batch updated based on all the specified state attribute data cached in the most recent period, and the cached data is cleared after each update. Another is a counted update mechanism, which retrieves and caches the specified state attribute data corresponding to each subscription update notification. When the total amount or size of cached data exceeds a set threshold, the state tree is batch updated based on all the currently cached specified state attribute data, and the cached data is cleared after each update.

[0101] Each operation method of the state storage instance matches an operation method of the current service class. The method name, method input / output parameters, and method output type of each operation method of the state storage instance are consistent with the matching operation method of the current service class. Each operation method of the state storage instance is used to pass the input of the current method to the method of the same name in the current service class when the current method is called and return the output of the method of the same name as its own output.

[0102] For example:

[0103]

[0104]

[0105]

[0106] In the above code, create((set)=>{}) is the create method of the Zustand state management library. useLayoutStore is the custom HOOK of the state storage instance, that is, the state storage access hook. init is the initialization method of the construct, set is the method of the Zustand state management library, and the object set by set is the state tree of the state storage instance. The current service class LayoutService has an operation method updateSize, and the corresponding state storage instance also has an operation method updateSize with the same name. The updateSize of the state storage instance actually passes the parameter delta to the operation method updateSize of LayoutService; when the external component calls the operation method updateSize of the state storage instance, it uses the useLayoutStore.updateSize method to call it;.

[0107] The state store access hook is used to expose the initialization and operation methods of the state store instance to external React components. It also indirectly exposes the internal operation methods of the current service class to external React components by exposing its own operation methods. React components are the basic building blocks of React applications. They can be functions or classes that represent part of the UI.

[0108] Step 3: In the global identification program, a globally unique identifier is assigned to each basic service through the Symbol function as the corresponding basic service identifier.

[0109] Here, the global identification program implemented in the present invention is actually the full service identification declaration file of the first directory, which is used to use the Symbol function to assign a corresponding globally unique identifier as the corresponding first service identifier to all basic services of the first directory.

[0110] For example,

[0111] export const EDITOR_SERVICE=Symbol.for('EditorService');

[0112] export const LAYOUT_SERVICE=Symbol.for('LayoutService');

[0113] export const FILE_TREE_SERVICE=Symbol.for('FileTreeService');

[0114] export const COMMAND_SERVICE=Symbol.for('CommandService').

[0115] Step 4: Create a dependency injection container instance of the InversifyJS library as the corresponding scene container instance in each container program for the corresponding scene; and select one or more basic service identifiers based on the basic service requirements of the current scene to bind the singleton service instance in the scene container instance.

[0116] Here, the scene container instance binds one or more basic service instances and provides dependency injection management for all bound basic service instances.

[0117] For example,

[0118] import{Container}from'.. / inversify';

[0119] import{FileSystemProvider}from'.. / file-system / fs_service';

[0120] import{EditorService}from'.. / editor / editor_service';

[0121] import{LayoutService}from'.. / layout / layout_service';

[0122] import{

[0123] FILE_SYSTEM_PROVIDER,

[0124] EDITOR_SERVICE,

[0125] LAYOUT_SERVICE,

[0126] }from'.. / identifiers';

[0127] const container=new Container();

[0128] container.bind <filesystemprovider>(FILE_SYSTEM_PROVIDER).to(FileSystemProvider).inSingletonScope();

[0129] container.bind <editorservice>(EDITOR_SERVICE).to(EditorService).inSingletonScope();

[0130] container.bind <layoutservice>(LAYOUT_SERVICE).to(LayoutService).inSingletonScope().

[0131] In the above code, container is the created scene container instance, and inSingletonScope represents the singleton mode (Singleton).

[0132] Step 5. In each context program, create a context object as the corresponding scene context for the corresponding scene container instance according to the createContext function of the React library; build a React function component as the corresponding scene context provider; and define a custom hook based on the useContext function to obtain the scene container instance from the scene context as the corresponding container access hook.

[0133] For example,

[0134]

[0135] export const useDiContainer=()=>useContext(DiContext).

[0136] In the above code, DiContext is the scene context, DiProvider is the scene context provider, and useDiContainer is the container access hook.

[0137] Step 6. Build a React function component in each application as the root component of the current scene; and in the root component, obtain the scene container instance of the current scene through the container access hook, and use the get method of the scene container instance to obtain the basic service instances bound in the container, and in the useEffect function, call the interface through the initialization method of the state storage access hook of each basic service instance to initialize the state storage instance, and establish a subscription relationship between each state storage instance and its corresponding basic service instance during the initialization process, and build multiple React function components as the UI element components of the current scene based on the application UI requirements of the current scene; and in each UI element component, establish a data-level subscription relationship with the current UI element component by calling the state storage access hook to obtain one or more specified data items from the corresponding state storage instance, and bind various UI response events of the current UI element component to a class of operation methods of a state storage instance; and wrap the root component based on the scene context provider of the current scene.

[0138] Here, in the application, the root component and all UI element components can access the corresponding scene container instance; each UI element component corresponds to one or more state storage instances.

[0139] For example:

[0140]

[0141]

[0142] In the above code, App_1 is the root component, and ActionBar is the only UI element component on the current scene; it can be known from useActionBarStore that the data subscription object of ActionBar and the corresponding state storage instance is items, that is, only when the items on the state storage instance change, ActionBar will receive the changed items. In the above code, the onClick event of ActionBar is bound to the console logging operation method. The scene context provider of the current scene is DiProvider, and the wrapping of the root component based on the scene context provider of the current scene in the above code is:

[0143] <diprovider>

[0144] App_1 /

[0145] < / diprovider> ,

[0146] This means that the dependency injection container corresponding to DiProvider is injected into App_1.

[0147] It should be noted that, under the service architecture of the embodiment of the application, the asynchronous interaction process of the basic service instance, the state storage instance and the UI element component is as follows Figure 3 The asynchronous link diagram of the basic service instance, the state storage instance and the UI element component provided by the first embodiment of the application is shown in the following figure:

[0148] When a type of UI response event of the UI element component occurs, the state storage instance corresponding to the current UI response event, the state storage access hook, and the operation method of the state storage instance are taken as the corresponding current instance, the current hook and the current operation method, and the output parameter of the current event is taken as the corresponding current method input parameter. The current method input parameter is transmitted to the current operation method of the current instance through the current hook for processing; when the operation method of the state storage instance receives the method input parameter sent by the UI element component, the current method input parameter is transmitted to the operation method with the same name of the corresponding basic service instance for processing; when the operation method of the basic service instance receives the method input parameter sent by the state storage instance, the current method input parameter is processed according to the processing flow of the current method once based on the current method input parameter.

[0149] When any specified state attribute data of the basic service instance is updated, the currently updated specified state attribute data is used as the corresponding updated data item, and the corresponding state storage instance is notified through the subscription notification method to update its own state tree based on the updated data item; when any data item on the state tree of the state storage instance is updated, the Zustand state management library will use the UI element component that has subscribed to the currently updated data item as the current element component, and send the currently updated data item to the current element component through the React library; when the UI element component receives the updated data item sent by the Zustand state management library, it first updates the local associated state and / or attributes of the component based on the currently updated data item, and then performs a UI rendering operation based on the latest local state attribute set of the component.

[0150] Figure 4 This is a module structure diagram of a service architecture device for multi-scenario applications provided in the second embodiment of the present invention. The device is a terminal device or server that implements the aforementioned method embodiment, or it can be a device that enables the aforementioned terminal device or server to implement the aforementioned method embodiment. For example, the device can be a device or chip system of the aforementioned terminal device or server. Figure 4 As shown, the device includes: a multi-scenario application directory setting module 201, a basic service processing module 202, a global identification declaration module 203, a scenario container customization module 204, a scenario context customization module 205, and a scenario application customization module 206.

[0151] The multi-scenario application directory setting module 201 is used to set the project directory for the multi-scenario application as the first directory; the first directory includes a global identification program, N shared module directories and M application customization directories, the total number of modules N and the total number of scenes M are two preset positive integers; each shared module directory corresponds to a type of basic service; each application customization directory corresponds to a type of scene; each shared module directory is used to store the corresponding module service program; each application customization directory is used to store the corresponding container program, context program and application program; the file type of the global identification program and the container program is the ts file type, and the file type of the module service program, the context program and the application program is the tsx file type.

[0152] The basic service processing module 202 is used to implant the service class code segment of the current basic service in each module service program, and use the @injectable() decorator to mark the current service class as an injectable service class; and use the @inject decorator in each module service program that depends on other basic services to perform dependency injection in the constructor injection mode; and create a corresponding state storage instance on the Zustand state management library for the current service class in each module service program, and subscribe to the state of the current service class in the initialization method of the state storage instance, and expose the internal operation method of the current service class by constructing a method of the same name for the state storage instance, and define a custom hook for calling the state storage instance method as the corresponding state storage access hook.

[0153] The global identification declaration module 203 is used to allocate a globally unique identification as the corresponding basic service identification to each basic service through the Symbol function in the global identification program.

[0154] The scene container customization module 204 is used to create a dependency injection container instance of the InversifyJS library as a corresponding scene container instance for the corresponding scene in each container program; and select one or more basic service identifiers based on the basic service requirements of the current scene to bind a singleton service instance in the scene container instance; the scene container instance binds one or more basic service instances and provides dependency injection management for all bound basic service instances.

[0155] The scene context customization module 205 is used to create a context object as the corresponding scene context for the corresponding scene container instance according to the createContext function of the React library in each context program; and to build a React function component as the corresponding scene context provider; and to define a custom hook based on the useContext function to obtain the scene container instance from the scene context as the corresponding container access hook.

[0156] The scene application customization module 206 is used to build a React function component as the root component of the current scene in each application; and in the root component, obtain the scene container instance of the current scene through the container access hook, and use the get method of the scene container instance to obtain the various basic service instances bound in the container, and initialize the state storage instance through the initialization method of the state storage access hook of each basic service instance in the useEffect function, and establish a subscription relationship between each state storage instance and its corresponding basic service instance during the initialization process, and build multiple React function components as the UI element components of the current scene based on the application UI requirements of the current scene; and in each UI element component, establish a data-level subscription relationship with the current UI element component by calling the state storage access hook to obtain one or more specified data items from the corresponding state storage instance, and bind various UI response events of the current UI element component to a class of operation methods of a state storage instance; and wrap the root component based on the scene context provider of the current scene.

[0157] An embodiment of the present invention provides a service architecture device for multi-scenario applications, which can execute the method steps in the above method embodiment. Its implementation principles and technical effects are similar and will not be repeated here.

[0158] It should be noted that it should be understood that the division of the various modules of the above device is only a division of logical functions. In actual implementation, they can be fully or partially integrated into one physical entity, or they can be physically separated. And these modules can all be implemented in the form of software called by processing elements; they can also all be implemented in the form of hardware; some modules can also be implemented in the form of software called by processing elements, and some modules can be implemented in the form of hardware. For example, the multi-scenario application directory setting module can be a separately established processing element, or it can be integrated into a chip of the above device. In addition, it can also be stored in the memory of the above device in the form of program code, and called by a processing element of the above device to execute the functions of the above-mentioned determined module. The implementation of other modules is similar. In addition, these modules can be fully or partially integrated together, or they can be implemented independently. The processing element described here can be an integrated circuit with signal processing capabilities. In the implementation process, each step of the above method or each module above can be completed by the hardware integrated logic circuit in the processor element or software instructions.

[0159] For example, the above modules may be one or more integrated circuits configured to implement the above methods, such as one or more application-specific integrated circuits (ASICs), one or more digital signal processors (DSPs), or one or more field programmable gate arrays (FPGAs). For another example, when a module is implemented by scheduling program code through a processing element, the processing element may be a general-purpose processor, such as a central processing unit (CPU) or other processor that can call program code. For another example, these modules may be integrated together and implemented in the form of a system-on-a-chip (SOC).

[0160] In the above embodiments, all or part of the embodiments may be implemented using software, hardware, firmware, or any combination thereof. When implemented using software, all or part of the embodiments may be implemented in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the processes or functions described in the above method embodiments are generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The above-mentioned computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the above-mentioned computer instructions can be transmitted from one website, computer, server or data center to another website, computer, server or data center via wired (such as coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (such as infrared, wireless, Bluetooth, microwave, etc.) means. The above-mentioned computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device such as a server or data center that includes one or more available media. The above-mentioned available medium can be a magnetic medium (such as a floppy disk, hard disk, tape), an optical medium (such as a DVD), or a semiconductor medium (such as a solid state disk (SSD)), etc.

[0161] Figure 5 This is a schematic diagram of the structure of an electronic device provided in the third embodiment of the present invention. The electronic device can be a terminal device or server that implements the method of the aforementioned embodiment, or it can be a terminal device or server that implements the method of the aforementioned embodiment connected to the aforementioned terminal device or server. Figure 5 As shown, the electronic device may include: a processor 301 (such as a CPU), a memory 302, and a transceiver 303; the transceiver 303 is coupled to the processor 301, and the processor 301 controls the transceiver 303's transceiver actions. Various instructions may be stored in the memory 302 for completing various processing functions and implementing the processing steps described in the aforementioned embodiment method. Preferably, the electronic device involved in the embodiment of the present invention further includes: a power supply 304, a system bus 305, and a communication port 306. The system bus 305 is used to realize communication connections between components. The above-mentioned communication port 306 is used for connecting and communicating between the electronic device and other peripherals.

[0162] exist Figure 5 The system bus 305 mentioned in the figure can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. The system bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, only one thick line is used in the figure, but it does not mean that there is only one bus or one type of bus. The communication interface is used to realize communication between the database access device and other devices (such as clients, read-write libraries, and read-only libraries). The memory may include random access memory (RAM) and may also include non-volatile memory (Non-Volatile Memory), such as at least one disk storage.

[0163] The above-mentioned processors can be general-purpose processors, including central processing units (CPUs), network processors (NPs), graphics processing units (GPUs), etc.; they can also be digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0164] It should be noted that an embodiment of the present invention further provides a computer-readable storage medium, which stores instructions. When the computer-readable storage medium is run on a computer, it enables the computer to execute the methods and processing procedures provided in the above embodiments.

[0165] Embodiments of the present invention provide a service architecture method, device, electronic device, and computer-readable storage medium for multi-scenario applications. As can be seen from the above content, the embodiments of the present invention propose a service architecture technology system for multi-scenario applications: 1) Establish physical isolation between the shared service layer (N shared module directories) and the scenario customization layer (M application customization directories), develop service classes and application components based on TypeScript, combine services on demand for different scenarios and encapsulate corresponding dependency injection containers; 2) Combine the InversifyJS library to implement dependency injection and management of service instances, build service state images through Zustand, and associate each service class with an independent state storage instance; 3) Use the observer pattern to establish a one-way service-state subscription, and trigger UI re-rendering through the React update mechanism when the state changes; 4) Create a scenario-level dependency injection container scope based on React Context, and implement on-demand acquisition of container instances through custom hooks. The scene root component injects the service instance through the container access hook, and the UI component establishes data subscription through the state storage hook, forming a responsive "service-state-view" link; 5) The front-end UI response event is transparently transmitted to the service layer through the state storage instance. The service layer state change pushes the change data back to the subscription component through the state storage instance as an intermediary. In general, the service architecture of the embodiment of the present invention utilizes the dependency injection management mechanism of the InversifyJS library to decouple all basic services, decouples application components from basic service instances using state storage instances as a transit, implements cross-component state sharing based on the Zustand state management library, and sinks the processing of all states / attributes into the basic services for processing. The embodiment of the present invention processes, improves the code reuse rate, and reduces the programming workload and programming complexity of the front-end application. The present invention not only improves the code reuse rate and reduces redundant code, but also reduces the development difficulty, shortens the development cycle, saves development costs, and increases the flexibility of expanding application functions.

[0166] The steps of the methods or algorithms described in conjunction with the embodiments disclosed herein may be implemented using hardware, a software module executed by a processor, or a combination of the two. The software module may be placed in a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

[0167] The specific implementation methods described above further illustrate the objectives, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above description is only a specific implementation method of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.< / layoutservice> < / editorservice> < / filesystemprovider>

Claims

1. A service architecture method for multi-scenario applications, characterized in that: The method comprises: The project directory set for multi-scenario applications is recorded as the first directory; the first directory includes a global identification program, N shared module directories and M application customization directories, where the total number of modules N and the total number of scenarios M are two preset positive integers; each shared module directory corresponds to a type of basic service; each application customization directory corresponds to a type of scenario; each shared module directory is used to store a corresponding module service program; each application customization directory is used to store a corresponding container program, context program and application program; the file type of the global identification program and the container program is the ts file type, and the file type of the module service program, the context program and the application program is the tsx file type; In each of the module service programs, the service class code segment of the current basic service is implanted, and the @injectable() decorator is used to mark the current service class as an injectable service class; and in each of the module service programs that depends on other basic services, the @inject decorator is used to perform dependency injection in the form of constructor injection; and in each of the module service programs, a corresponding state storage instance is created for the current service class on the Zustand state management library, and the state of the current service class is subscribed in the initialization method of the state storage instance, and the internal operation method of the current service class is exposed by constructing a method of the same name for the state storage instance, and a custom hook for calling the state storage instance method is defined as the corresponding state storage access hook; In the global identification program, a globally unique identifier is assigned to each basic service as the corresponding basic service identifier through the Symbol function; In each of the container programs, a dependency injection container instance of the InversifyJS library is created for the corresponding scene as the corresponding scene container instance; and based on the basic service requirements of the current scene, one or more basic service identifiers are selected to bind a singleton service instance in the scene container instance; the scene container instance is bound to one or more basic service instances, and dependency injection management is provided for all the bound basic service instances; In each of the context programs, a context object is created for the corresponding scene container instance according to the createContext function of the React library as the corresponding scene context; a React function component is constructed as the corresponding scene context provider; and a custom hook for obtaining the scene container instance from the scene context is defined based on the useContext function as the corresponding container access hook; In each of the applications, a React function component is constructed as the root component of the current scene; and in the root component, the scene container instance of the current scene is obtained through the container access hook, and the get method of the scene container instance is used to obtain the various basic service instances bound in the container, and the state storage instance is initialized through the initialization method of the state storage access hook of each of the basic service instances in the useEffect function, and a subscription relationship is established between each of the state storage instances and its corresponding basic service instance during the initialization process, and multiple React function components are constructed as UI element components of the current scene based on the application UI requirements of the current scene; and in each of the UI element components, a data-level subscription relationship is established with the current UI element component by calling the state storage access hook to obtain one or more specified data items from the corresponding state storage instance, and various UI response events of the current UI element component are bound to a class of operation methods of a state storage instance; and the root component is wrapped based on the scene context provider of the current scene.

2. The service architecture method for multi-scenario applications according to claim 1, characterized in that: The program code of the module service program includes an import code segment, a data type definition code segment, the service class code segment and a state storage instance code segment; The import code segment includes import codes for the inversi fy package and the zustand package; the inversify package is a toolkit of the Inversi fyJS library for dependency injection management; the zustand package is a toolkit of the Zustand state management library; The data type definition code segment is used to define one or more custom data types of the current basic service; The service class code segment is used to define the service class of the current basic service, including a state definition code segment and a method definition code segment; At the code header of the service class code segment, the @injectable() decorator is used to mark the current service class as an injectable service class; if the current basic service also depends on other basic services, the @inject decorator is used in the constructor of the current service class to inject the service classes of other dependent basic services; The state definition code segment is used to define a plurality of private or public states or attribute data; The method definition code segment includes a constructor code, a status subscription method code, a subscription notification method code and a plurality of operation method codes; The constructor code corresponds to the constructor of the current service class; The state subscription method code corresponds to the state subscription method subscribe of the current service class, and is used to perform listener registration and deregistration operations on the subscriber of the current service class; The subscription notification method code corresponds to the subscription notification method not if of the current service class, and is used to send subscription update notifications to all registered listeners when the current method is called; Each operation method code corresponds to an operation method of the current service class and is used to perform a read / write operation on one or more state or attribute data according to a preset processing flow and the input parameters of the current method; the last line of each operation method code containing a write operation on any specified state attribute data is a method call code of the subscription notification method notify; each specified state attribute data is a type of pre-specified state data or attribute data, and each specified state attribute data is synchronized to the corresponding state storage instance; The state storage instance code segment is used to create the corresponding state storage instance for the current service class in the Zustand state management library according to the create method of the Zustand state management library; and construct a corresponding initialization method and one or more operation methods for the state storage instance; And define a custom hook for the state storage instance as the corresponding state storage access hook; The initialization method of the state storage instance is used to obtain one or more corresponding specified state attribute data through one or more operation methods of the current service class for reading the specified state attribute data when the current method is called, and write each of the specified state attribute data into the state tree built into the state storage instance through the set method of the Zustand state management library; And through the state subscription method subscribe of the current service class, the state storage instance is registered as the monitoring object of the current service class; the registered state storage instance will receive the subscription update notification sent by the subscription notification method notify when any of the specified state attribute data of the current service class changes, and when each subscription update notification is received, it first obtains all the specified state attribute data by calling the operation method of the current service class, and then updates the built-in state tree according to all the specified state attribute data obtained this time based on the set method of the Zustand state management library; Each operation method of the state storage instance matches an operation method of the current service class. The method name, method input / output parameters, and method output type of each operation method of the state storage instance are consistent with the matching operation method of the current service class. Each operation method of the state storage instance is used to pass the input of the current method to the method of the same name in the current service class when the current method is called and return the output of the method of the same name as its own output. The state storage access hook is used to expose the initialization method and operation method of the state storage instance to the external React component, and indirectly expose the internal operation method of the current service class to the external React component by exposing its own operation method.

3. The service architecture method for multi-scenario applications according to claim 2, characterized in that: The global identification program is a full-service identification declaration file of the first directory, which is used to use the Symbol function to assign a corresponding globally unique identifier as the corresponding first service identifier to all basic services of the first directory.

4. The service architecture method for multi-scenario applications according to claim 2, characterized in that: In the application, the root component and all the UI element components can access the corresponding scene container instance; each UI element component corresponds to one or more state storage instances.

5. The service architecture method for multi-scenario applications according to claim 2, characterized in that: Under the current service architecture, the interaction process between the basic service instance, the state storage instance and the UI element component is as follows: When a type of UI response event of the UI element component occurs, the state storage instance, the state storage access hook, and the operation method of the state storage instance corresponding to the current UI response event are used as the corresponding current instance, current hook, and current operation method, and the output parameters of the current event are used as the corresponding current method input parameters, and the current method input parameters are passed to the current operation method of the current instance through the current hook for processing; When the operation method of the state storage instance receives the method input parameters sent by the UI element component, the operation method passes the current method input parameters to the corresponding operation method of the same name of the basic service instance for processing; When the operation method of the basic service instance receives the method input parameters sent by the state storage instance, the operation method of the basic service instance performs a process based on the current method input parameters according to the current method processing flow; When any of the specified state attribute data of the basic service instance is updated, the currently updated specified state attribute data is used as the corresponding updated data item, and the corresponding state storage instance is notified through the subscription notification method not if to update its own state tree based on the updated data item; when any data item on the state tree of the state storage instance is updated, the Zustand state management library uses the UI element component that subscribes to the currently updated data item as the current element component, and sends the currently updated data item to the current element component through the React library; When the UI element component receives the update data item sent by the Zustand state management library, it first updates the local associated state and / or attributes of the component based on the current update data item, and then performs a UI rendering operation based on the latest local state attribute set of the component.

6. A device for executing the service architecture method for multi-scenario applications according to any one of claims 1 to 5, characterized in that: The device includes: a multi-scenario application directory setting module, a basic service processing module, a global identification declaration module, a scenario container customization module, a scenario context customization module, and a scenario application customization module; The multi-scenario application directory setting module is used to set a project directory for a multi-scenario application as the first directory; the first directory includes a global identification program, N shared module directories and M application customization directories, the total number of modules N and the total number of scenarios M are two preset positive integers; each shared module directory corresponds to a type of basic service; each application customization directory corresponds to a type of scenario; each shared module directory is used to store a corresponding module service program; each application customization directory is used to store a corresponding container program, context program and application program; the file type of the global identification program and the container program is the ts file type, and the file type of the module service program, the context program and the application program is the tsx file type; The basic service processing module is used to implant the service class code segment of the current basic service in each of the module service programs, and use the @injectable() decorator to mark the current service class as an injectable service class; and use the @inject decorator in each of the module service programs that depends on other basic services to perform dependency injection in the form of constructor injection; and create a corresponding state storage instance on the Zustand state management library for the current service class in each of the module service programs, and subscribe to the state of the current service class in the initialization method of the state storage instance, and expose the internal operation method of the current service class by constructing a method of the same name for the state storage instance, and define a custom hook for calling the state storage instance method as the corresponding state storage access hook; The global identification declaration module is used to allocate a globally unique identifier as the corresponding basic service identifier to each basic service through the Symbol function in the global identification program; The scene container customization module is used to create a dependency injection container instance of the InversifyJS library as the corresponding scene container instance for each of the container programs for the corresponding scene; and select one or more basic service identifiers based on the basic service requirements of the current scene to perform singleton service instance binding in the scene container instance; the scene container instance is bound to one or more basic service instances, and provides dependency injection management for all the bound basic service instances; The scene context customization module is used to create a context object as the corresponding scene context for the corresponding scene container instance according to the createContext function of the React library in each context program; and to construct a React function component as the corresponding scene context provider; and to define a custom hook for obtaining the scene container instance from the scene context based on the useContext function as the corresponding container access hook; The scene application customization module is used to build a React function component as the root component of the current scene in each of the applications; and in the root component, obtain the scene container instance of the current scene through the container access hook, and use the get method of the scene container instance to obtain the various basic service instances bound in the container, and initialize the state storage instance through the initialization method of the state storage access hook of each of the basic service instances in the useEffect function, and establish a subscription relationship between each of the state storage instances and its corresponding basic service instance during the initialization process, and build multiple React function components as the UI element components of the current scene based on the application UI requirements of the current scene; and in each of the UI element components, establish a data-level subscription relationship with the current UI element component by calling the state storage access hook to obtain one or more specified data items from the corresponding state storage instance, and bind various UI response events of the current UI element component to a class of operation methods of the state storage instance; and wrap the root component based on the scene context provider of the current scene.

7. An electronic device, characterized in that: include: memory, processors, and transceivers; The processor is configured to be coupled to the memory, read and execute instructions in the memory, so as to implement the method according to any one of claims 1 to 5; The transceiver is coupled to the processor, and the processor controls the transceiver to send and receive messages.

8. A computer-readable storage medium, characterized in that The computer-readable storage medium stores computer instructions, and when the computer instructions are executed by a computer, the computer is caused to execute the method according to any one of claims 1 to 5.

Images