Dynamic component rendering method and system based on object structure

Abstract

The invention discloses a dynamic component rendering method and system based on an object structure. The method comprises the steps that a parent component configuration object is received, and a child component configuration object is searched for according to child component configuration children in the parent component configuration object; the structure type of the sub-component configuration object is confirmed, different processing strategies are adopted for the sub-component configuration objects of different structure types, and a rendering instance is created; and rendering by adopting different rendering methods according to different rendering instances. According to the technical scheme, different rendering strategies can be adopted for logic rendering according to the sub-component configuration objects of different structure types, and dynamic generation and rendering of the components are achieved.

Description

Technical Field

[0001] The embodiments of the present invention relate to the technical field of dynamic component rendering, and in particular, to a dynamic component rendering method and system based on an object structure. Background Art

[0002] With the continuous increase in the scale and complexity of modern Web applications, component-based development plays a crucial role in the project planning and implementation process. As a leading front-end framework solution in the market, the single-file components (SFCs) of Vue.js have been widely used in engineering practices.

[0003] However, the existing Vue component development methods have the following technical problems in practical applications:

[0004] 1. The component definition method is fixed, making it difficult to achieve dynamic generation and modification. Traditional Vue single-file components need to be predefined and cannot be dynamically adjusted according to the runtime requirements.

[0005] 2. It is difficult to serialize and store the component structure, which is not convenient for database persistence. There are format conversion obstacles between the existing component definition methods and data storage systems.

[0006] 3. The efficiency of batch component generation is low, and the code duplication is high. When a large number of similar components need to be generated, the existing solutions require a large amount of template code to be written repeatedly.

[0007] 4. The reusability between components is poor, and it is difficult to meet the requirements of different scenarios. The fixed component structure makes it difficult to be flexibly reused in different business scenarios.

[0008] 5. The lack of a unified component caching and updating mechanism affects the rendering performance. The existing solutions fail to effectively solve the component caching problem, resulting in unnecessary repeated rendering.

[0009] 6. The communication and state management between components are complex, increasing the development and maintenance costs. The lack of a unified state management solution leads to chaotic data flow between components.

[0010] Therefore, there is an urgent need for a new component rendering solution that can provide a more flexible component definition method and solve technical problems such as dynamic generation, caching management, and state synchronization of components. Summary of the Invention

[0011] The embodiments of the present invention provide a dynamic component rendering method and system based on an object structure, which can efficiently and flexibly complete component rendering and facilitate the dynamic generation, caching, and updating of components in Web application development.

[0012] In a first aspect, the embodiments of the present invention provide a dynamic component rendering method based on an object structure, including:

[0013] S1: Receive the parent component configuration object, and find the child component configuration object according to the children in the parent component configuration object;

[0014] S2: Confirm the structure type of the child component configuration object, adopt different processing strategies for child component configuration objects of different structure types, and create a rendering instance;

[0015] S3: Adopt different rendering methods for rendering according to different rendering instances.

[0016] Furthermore, the structure of the parent component configuration object adopts a JavaScript object structure, including: component type type, component property configuration props, child component configuration children, component directive configuration directives, event binding configuration events, namespace namespace.

[0017] Furthermore, the namespace namespace is configured for component cache logic implementation.

[0018] Furthermore, in S2, if the structure type of the child component configuration object is an object structure, create a single object rendering instance according to the corresponding child component configuration object and pass it to the rendering layer;

[0019] If the structure type of the child component configuration object is a data structure, create one or more data rendering instances according to the corresponding child component configuration object and pass them to the rendering layer, and the data rendering instances are stored in the Fragment component.

[0020] Furthermore, if the data structure is a string, create one data rendering instance; if the data structure is an array, traverse the array to create multiple data rendering instances.

[0021] Furthermore, step S3 includes:

[0022] S301: Determine whether there is a child component configuration children in the rendering instance; if there is a child component configuration children, use the rendering instance as a new parent component configuration object and execute S1; if not, execute S302;

[0023] S302: Determine whether there is a slot configuration in the rendering instance; if there is a slot configuration, restore the slot content according to the slot configuration, generate a new rendering instance according to the slot content, and execute S301; if not, execute S303;

[0024] S303: Directly render the data structure part in the rendering instance that is neither an object structure nor a slot configuration.

[0025] Further, the slot configuration includes: functional slots and / or object slots;

[0026] Restore the functional slot, and the structure type of the corresponding slot content is an object structure or a data structure or a slot configuration;

[0027] Restore the object slot, and the structure type of the corresponding slot content is an object structure.

[0028] In a second aspect, an embodiment of the present invention provides a dynamic component rendering system based on an object structure, including:

[0029] The system includes: a logic processing layer and a rendering layer;

[0030] The logic processing layer is used to receive a parent component configuration object, and find a child component configuration object according to the children in the parent component configuration object;

[0031] The logic processing layer is further used to confirm the structure type of the child component configuration object, adopt different processing strategies for different structure types of child component configuration objects, and create a rendering instance;

[0032] The rendering layer is used to perform rendering by adopting different rendering methods according to different rendering instances.

[0033] In a third aspect, an embodiment of the present invention further provides an electronic device, and the electronic device includes:

[0034] At least one processor; and

[0035] A memory communicatively connected to the at least one processor; wherein,

[0036] The memory stores a computer program executable by the at least one processor, and when the computer program is executed by the at least one processor, the at least one processor can execute the method for dynamically rendering a component based on an object structure according to any embodiment of the present invention.

[0037] In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium, and the computer-readable storage medium stores computer instructions, and when the computer instructions are executed by a processor, the method for dynamically rendering a component based on an object structure according to any embodiment of the present invention is implemented.

[0038] An embodiment of the present invention provides a method for dynamically rendering a component based on an object structure. By parsing layer by layer starting from the top-level component, a corresponding component instance is created for each level, and the dynamic rendering of the component is realized. Description of the Drawings

[0039] To more clearly illustrate the technical solutions in the embodiments of the present invention, the following will briefly introduce the accompanying drawings required for the description of the embodiments. Obviously, the accompanying drawings in the following description are only some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other accompanying drawings can be obtained based on these drawings.

[0040] Figure 1 is a schematic flowchart of a dynamic component rendering method based on an object structure provided by an embodiment of the present invention;

[0041] Figure 2 is a schematic diagram of partial encapsulated code of a component configuration object provided by an embodiment of the present invention;

[0042] Figure 3 is a schematic structural diagram of a dynamic component rendering system based on an object structure provided by an embodiment of the present invention;

[0043] Figure 4 is a schematic diagram of partial encapsulated code of a logic processing layer provided by an embodiment of the present invention;

[0044] Figure 5 is a schematic diagram of partial encapsulated code of a rendering layer provided by an embodiment of the present invention. Detailed implementation manners

[0045] The following will further elaborate on the present invention in conjunction with the accompanying drawings and embodiments. It can be understood that the specific embodiments described herein are only used to explain the present invention, rather than limiting the present invention. Additionally, it should be noted that for the convenience of description, only parts related to the present invention are shown in the accompanying drawings, rather than all structures.

[0046] Embodiment 1

[0047] Figure 1 is a schematic flowchart of a dynamic component rendering method based on an object structure provided by an embodiment of the present invention. This embodiment is applicable to the situation of dynamic component rendering. This method can be executed by the dynamic component rendering system based on an object structure in the embodiments of the present invention. This system can be implemented in software and / or hardware and integrated in an electronic device.

[0048] In the embodiments of the present invention, the rendering process is as follows: First, the logic processing layer receives the component configuration of the component configuration object, then the logic processing layer parses the component type and merge instructions, and passes the configuration to the rendering layer. The rendering layer executes the rendering logic to achieve dynamic update and caching of the component.

[0049] As Figure 1 shown, the method specifically includes the following steps:

[0050] S1: Receive the parent component configuration object, and find the child component configuration object according to the child component configuration children in the parent component configuration object.

[0051] It should be noted that the structure of the parent component configuration object adopts the JavaScript object structure, and its components include: component type type, component property configuration props, child component configuration children, component directive configuration directives, event binding configuration events, and namespace.

[0052] Among them, type supports string, function or object form. props is an object used to receive data passed to the component, and any type of data can be passed to the component. props is a read-only object, and only the values of the properties can be read, and the object cannot be modified. children supports string, array or object form.

[0053] The component configuration object supports the complete Vue component life cycle: beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted.

[0054] In the embodiment of the present invention, the namespace is the cache of the reactive variables inside the component. This embodiment supports component caching and designs a component caching mechanism based on the namespace: supports caching and reuse of component instances; realizes on-demand loading (lazy loading) of components; provides a cache update and invalidation handling mechanism.

[0055] Figure 2 It is a schematic diagram of partial encapsulation code of the component configuration object provided by the embodiment of the present invention. Figure 2 Only partial code is shown, including the component type type, component property configuration props, child component configuration children, and event binding configuration events in the component configuration object. Among them, there is only one child component configuration object in the child component configuration children, that is, "button", which is of string type.

[0056] In Figure 2 it shows several core features of the component configuration object: dynamic definition of components: define each property of the component through the object structure; dynamic configuration of properties: the props property of the component can be directly set; event handling: bind event handling functions through the events object; dynamic switching: the type and properties of the component can be dynamically changed at runtime.

[0057] Combined withFigure 2 When the user clicks on the component configuration object, the following content will be randomly switched: Component type: randomly switched between ElButton, ElLink, ElInput, ElSelect, and ElCard; Style type: randomly switched among four styles: primary, success, warning, and danger. This dynamic switching ability fully demonstrates the advantages of the present invention in component dynamic rendering.

[0058] In the embodiment of the present invention, after the logic processing layer receives the externally incoming component configuration object, it verifies the legality of the configuration and then sets the default values and initial states.

[0059] S2: Confirm the structural type of the sub-component configuration object, and adopt different processing strategies for sub-component configuration objects of different structural types to create a rendering instance.

[0060] Specifically, the logic processing layer will check the structural type of the sub-component configuration object, select the corresponding processing strategy according to different types, and prepare the props data to be passed down. Props is an object used to receive data passed to the component, and any type of data can be passed to the component.

[0061] In S2, if the structural type of the sub-component configuration object is an object structure, a single object rendering instance will be created according to the corresponding sub-component configuration object and passed to the rendering layer.

[0062] For the sub-component configuration object with an object structure, the logic processing layer directly creates a single object rendering instance and passes the complete sub-component configuration object to the rendering layer. Exemplary:

[0063] type: ‘div',

[0064] children: {

[0065] type: ‘p',

[0066] children: ‘This is a paragraph'

[0067] In the example, the structural type of children in the sub-component configuration object is an object structure, including: type “p” and children “This is a paragraph”. Therefore, a single object rendering instance of the sub-component configuration object children is created.

[0068] If the structure type of the subcomponent configuration object is a data structure, one or more data rendering instances are created and passed to the rendering layer according to the corresponding subcomponent configuration object. The data rendering instances are stored in the Fragment component. Fragments can reduce unnecessary component levels, make component structures simpler, and improve component performance.

[0069] Data structures include strings, arrays, etc.

[0070] If the data structure is a string, create a data rendering instance.

[0071] If the data structure is an array, traverse the array to create multiple data rendering instances. Example:

[0072] type:'div',

[0073] children:[

[0074] {type:'p',children:'First paragraph'},

[0075] {type:'p',children:'Second paragraph'}]

[0076] In the example, the structure type of children in the subcomponent configuration object is an array, including: {type'p', children:'first paragraph'} and {type:'p', children:'second paragraph'}, then a data rendering instance is created for each element in the array.

[0077] S3: Different rendering methods are used for rendering according to different rendering instances.

[0078] In the rendering instance, there is at least one of the children configuration, slot configuration, and data configuration.

[0079] Figure 3 A schematic diagram of a dynamic component rendering system based on an object structure provided by an embodiment of the present invention, combined with Figure 3 , step S3 comprises:

[0080] S301: Determine whether there is a child component configuration children in the rendering instance; if there is a child component configuration children, use the rendering instance as a new parent component configuration object and execute S1; if not, execute S302.

[0081] In a rendering instance, there are object rendering instances and data rendering instances. For an object rendering instance, which is derived from a sub-component configuration object with an object structure and must have children, the object rendering instance is used as a new parent component configuration object to execute S1, thereby parsing the object in the sub-component configuration object. For a data rendering instance, which is derived from a sub-component configuration object with a data structure, if the data structure is an array, there may still be an object structure in the array, that is, the data rendering instance may also be an object structure.

[0082] Therefore, it is necessary to determine whether there is a sub-component configuration children in the rendering instance to determine whether the rendering instance is an object structure. If it is an object structure, enter step S1 to parse the object structure. Through step S301, the object structure of the sub-components at each level is de-structured.

[0083] In the embodiment of the present invention, a complete recursive rendering system is implemented: each rendering instance can contain sub-rendering instances, and the nested component structure is processed recursively to automatically process each level of the component tree. Its execution process is: starting from the top-level component (parent component configuration object), parsing layer by layer, creating corresponding component instances for each level, and handling data transfer and event binding between components through props and events.

[0084] S302: Determine whether there is a slot configuration in the rendering instance; if there is a slot configuration, restore the slot content according to the slot configuration, generate a new rendering instance according to the slot content, and execute S301; if not, execute S303.

[0085] Slots are a concept in Vue, used to determine where the carried content will be inserted, making the module block and having the characteristics of modularity. Slots are an API for content distribution implemented by Vue, using elements as the outlets for carrying the distributed content.

[0086] Restoring the slot content according to the slot configuration includes: handling default slots and named slots, and supporting dynamic slot content. Exemplary:

[0087] slots:{

[0088] default:‘default content',

[0089] header:{type:‘h1',children:‘title'}}

[0090] The slot configuration includes: functional slots and / or object slots.

[0091] Restore the functional slot. The structural type of the corresponding slot content is an object structure, a data structure, or a slot configuration. Restoring the functional slot includes: receiving runtime data parameters and dynamically calculating the slot content. Exemplarily:

[0092] slots:{

[0093] default:(data)=>({

[0094] type:'span',

[0095] children:data.text})}

[0096] Restore the object slot. The structural type of the corresponding slot content is an object structure. Restoring the object slot includes: using a static configuration object and supporting nested component definitions. Exemplarily:

[0097] slots:{

[0098] header:{

[0099] type:'div',

[0100] children:'Static header'}}

[0101] Through step S302, parse the slots in each level to achieve deslotting.

[0102] S303: Directly render the non-object structure and non-slot configuration data structure parts in the rendering instance.

[0103] Specifically, directly render the non-object structure and non-slot configuration data structure parts in the rendering instances of all levels.

[0104] In the embodiments of the present invention, an architecture with a layered logical processing layer and rendering layer is adopted. This layered architecture and processing mechanism bring the following advantages:

[0105] Clear structure: The logical layer and the rendering layer are separated, and the responsibilities are clearly divided, which is convenient for maintenance and extension.

[0106] High flexibility: Supports multiple component definition methods, can handle complex component structures, and adapts to different business scenarios.

[0107] Performance optimization: Reasonable component layering, efficient recursive rendering, and intelligent caching strategies.

[0108] Developer-friendly: The configuration method is intuitive, the usage method is simple, and it is easy to understand and use.

[0109] The technical solutions in the embodiments of the present invention can be widely applied to front-end application scenarios that require high customization and dynamism. For example, in enterprise applications, it can be used to build flexible form systems, dynamic data display interfaces, and configurable workflows. In e-commerce platforms, it can achieve the dynamic generation and update of product display components, providing a better shopping experience. In content management systems, this method can support the dynamic assembly and adjustment of interface components to meet the personalized needs of different users. By serially storing component configurations, the persistence and cross-platform sharing of components can also be achieved, facilitating the expansion and maintenance of the system.

[0110] The technical solutions in the embodiments of the present invention can also, in terms of function expansion, support more component types and interaction methods and provide richer configuration options; by improving development tools and debugging functions, a better development experience can be provided; and by establishing a component market and a template library, the sharing and reuse of components can be promoted, driving the prosperous development of the front-end development ecosystem.

[0111] The technical solutions of the embodiments of the present invention achieve the dynamic rendering of components by parsing layer by layer starting from the top-level components and creating corresponding component instances for each layer. It significantly improves the dynamism and flexibility of components. Through the object-based component definition method, the component structure can be dynamically adjusted according to runtime requirements, meeting the needs of complex business scenarios; it optimizes the rendering performance of components. Through a unified caching mechanism and update strategy, unnecessary component re-rendering is reduced, improving the page response speed; it simplifies the communication mechanism between components. By using namespaces and dependency injection, the data flow between components is standardized, reducing the complexity of state management; it improves the maintainability of the code. The object-based representation of the component structure makes the code easier to understand and maintain, reducing errors during the development process.

[0112] Embodiment 2

[0113] Figure 3 It is a schematic structural diagram of a dynamic component rendering system based on an object structure provided by the embodiments of the present invention. This embodiment is applicable to the situation of dynamic component rendering. The system can be implemented in software and / or hardware and integrated in an electronic device.

[0114] Combined with Figure 3 , the system includes: a logical processing layer and a rendering layer.

[0115] The present invention adopts a dual-component architecture design and uses different component implementation methods. The advantages of this architecture design are as follows: it realizes the separation of concerns and improves the maintainability of the code; it optimizes the performance, and the lightweight design of the rendering layer reduces unnecessary overhead; it provides better type inference support and enhances the reliability of the code; it is convenient for unit testing, and the pure function feature of the rendering layer makes the testing simpler.

[0116] Among them, the logic processing layer adopts a stateless functional component: it focuses on data conversion and configuration processing without involving internal state management; it improves the purity and predictability of the component, which is convenient for testing and maintenance; it reduces the overhead of component instantiation and improves the rendering performance; all necessary operations can be completed through the props and context parameters.

[0117] Among them, the rendering layer adopts a stateful component (defineComponent): it needs to manage the complex component life cycle; it processes the dynamic rendering and update logic of the component; it maintains the internal state and cache of the component; it realizes two-way data binding with the parent component; it processes complex instructions and event systems.

[0118] Furthermore, the logic processing layer is used to receive the parent component configuration object and find the sub-component configuration object according to the sub-component configuration children in the parent component configuration object.

[0119] Furthermore, the logic processing layer is also used to confirm the structural type of the sub-component configuration object, and adopt different processing strategies for sub-component configuration objects of different structural types to create a rendering instance.

[0120] Figure 4 Schematic diagram of partial encapsulated code of the logic processing layer provided by the embodiment of the present invention. The logic processing layer (ModelComp.vue) is used as the top-level component and is mainly responsible for the preprocessing and distribution of the configuration.

[0121] Combined with Figure 4 , const is the keyword for defining constant variables. The object defined by const has a data structure.

[0122] The logic processing layer is responsible for determining the component type, merging the default instructions and the incoming instructions, merging the incoming props and the context attrs, and rendering the sub-component RenderComp.

[0123] return h(rendercomp,binds) is a usage of the render function in Vue.js, which is used to create virtual DOM nodes. The h function is an alias for createElement and is used to create VNodes (Virtual Nodes), which is a data structure used internally in Vue to describe the DOM structure. rendercomp is the name of the component to be rendered, and binds is an object that contains the props, event listeners, and other properties to be passed to the component.

[0124] The rendering layer is used to perform rendering using different rendering methods according to different rendering instances.

[0125] Figure 5 Schematic diagram of partial encapsulated code of the rendering layer provided by an embodiment of the present invention. The rendering layer (RenderComp.vue) is mainly responsible for implementing component logic.

[0126] Furthermore, the rendering layer is also used to determine whether there is a sub-component configuration children in the rendering instance; if there is a sub-component configuration children, the rendering instance is passed as a new parent component configuration object to the logic processing layer;

[0127] If there is no object structure, it is determined whether there is a slot configuration in the rendering instance;

[0128] If there is a slot configuration, the slot content is restored according to the slot configuration, and a new rendering instance is generated according to the slot content, and it is again determined whether there is a sub-component configuration children in the new rendering instance;

[0129] If there is no slot configuration, the data structure part in the rendering instance that is neither an object structure nor a slot configuration is directly rendered.

[0130] The embodiment of the present invention adopts a dual-component architecture design, realizes the separation of concerns, improves the maintainability of the code; optimizes the performance, and the lightweight design of the rendering layer reduces unnecessary overhead; provides better type inference support and enhances the reliability of the code; is convenient for unit testing, and the pure function feature of the rendering layer makes testing simpler.

[0131] Embodiment Three

[0132] The embodiment of the present invention also provides an electronic device, which includes:

[0133] At least one processor; and

[0134] A memory communicatively connected to the at least one processor; wherein,

[0135] The memory stores a computer program executable by the at least one processor, and when the computer program is executed by the at least one processor, the at least one processor is enabled to execute the method for dynamically rendering components based on an object structure according to any embodiment of the present invention.

[0136] An embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored, and when the program is executed by a processing device, it implements the method for dynamically rendering components based on an object structure according to any embodiment of the present invention.

[0137] It should be understood that various forms of the processes shown above can be used, steps can be reordered, added or deleted. For example, the steps described in the present invention can be executed in parallel, sequentially or in different orders, as long as the desired results of the technical solution of the present invention can be achieved, and no limitation is made herein.

[0138] The above specific embodiments do not constitute a limitation to the protection scope of the present invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principle of the present invention shall be included within the protection scope of the present invention.

Claims

1. A dynamic component rendering method based on object structure, characterized in that: include: S1: receiving a parent component configuration object, and searching for a child component configuration object according to the child component configuration child in the parent component configuration object; S2: confirm the structure type of the subcomponent configuration object, adopt different processing strategies for subcomponent configuration objects of different structure types, and create a rendering instance; S3: Different rendering methods are used for rendering according to different rendering instances.

2. The method according to claim 1, characterized in that The structure of the parent component configuration object adopts a JavaScript object structure, including: component type type, component property configuration props, child component configuration children, component instruction configuration directives, event binding configuration events, and namespace namespace.

3. The method according to claim 2, characterized in that The namespace is configured to be used for component cache logic implementation.

4. The method according to claim 1, characterized in that: Also includes: In S2, if the structure type of the subcomponent configuration object is an object structure, a single object rendering instance is created according to the corresponding subcomponent configuration object and passed to the rendering layer; If the structure type of the subcomponent configuration object is a data structure, one or more data rendering instances are created according to the corresponding subcomponent configuration object and passed to the rendering layer. The data rendering instances are stored in the Fragment component.

5. The method according to claim 4, characterized in that If the data structure is a string, a data rendering instance is created; if the data structure is an array, the array is traversed to create multiple data rendering instances.

6. The method according to claim 1, characterized in that Step S3 includes: S301: Determine whether there is a child component configuration children in the rendering instance; if there is a child component configuration children, take the rendering instance as a new parent component configuration object and execute S1; if not, execute S302; S302: Determine whether there is a slot configuration in the rendering instance; if there is a slot configuration, restore the slot content according to the slot configuration, and generate a new rendering instance according to the slot content, and execute S301; if there is no slot configuration, execute S303; S303: directly rendering the data structure portion of the rendering instance that is not an object structure and is not a slot configuration.

7. The method according to claim 6, characterized in that The slot configuration includes: functional slots and / or object slots; The functional slot is restored, and the structure type of the corresponding slot content is an object structure or a data structure or a slot configuration; The object-type slot is restored, and the structure type of the corresponding slot content is an object structure.

8. A dynamic component rendering system based on object structure, characterized in that: The system is configured to implement the method according to any one of claims 1 to 7, and the system comprises: a logic processing layer and a rendering layer; The logic processing layer is used to receive the parent component configuration object, and search for the child component configuration object according to the child component configuration children in the parent component configuration object; The logic processing layer is also used to confirm the structural type of the subcomponent configuration object, adopt different processing strategies for subcomponent configuration objects of different structural types, and create rendering instances; The rendering layer is used to perform rendering by adopting different rendering methods according to different rendering instances.

9. An electronic device, characterized in that: The electronic device comprises: at least one processor; and a memory communicatively connected to the at least one processor; wherein, The memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the object structure-based dynamic component rendering method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a processor to implement the object structure-based dynamic component rendering method according to any one of claims 1 to 7 when executed.

Images