UI component rendering method and device, equipment and storage medium

Abstract

The invention discloses a UI component rendering method and device, equipment and a storage medium, and relates to the technical field of computer software, and the method comprises the following steps: determining a target UI component and a target data request according to a target data display demand, and generating a target attribute template of the target UI component; determining target response data based on the target data request, and generating a target data model corresponding to the target UI component based on the target response data and the target attribute template; and performing analysis operation based on the target response data and the target data model to generate a target entity corresponding to the target data display demand, and binding the target entity with the target UI component so as to render the target UI component based on the target entity. In this way, relation decoupling between the UI component and the data source can be achieved through model analysis and data processing, independence and reusability of the UI component are improved, and code maintainability is higher.

Description

Technical Field

[0001] The present invention relates to the field of computer software technology, and in particular to a UI component rendering method, device, equipment and storage medium. Background Art

[0002] Existing web development practices are plagued by a high degree of "hard-coded" tight coupling, custom development, and duplication. This makes it difficult to port the same software modules and functional logic to other web projects, leading to a continuous increase in software maintenance and labor costs. At the same time, large-scale software development requires the decoupling and on-demand binding of relationships between software modules, components, models, and data, and the enhanced sharing and reuse of software modules to accommodate large-scale team collaboration and complex projects.

[0003] Generally speaking, the data model representation of UI components (user interface components) and their decoupling and binding with data sources are typically implemented using technologies such as contract programming and metadata parsing, but both have limitations. For example, contract programming utilizes standardized data exchange formats, requiring service interfaces interacting with UI components to conform to these data format requirements, which compromises software module flexibility and functional portability. Metadata parsing, on the other hand, typically uses JSON Schema syntax to describe models and parse them for data application within UI components. However, this leads to complex description structures, weak descriptive capabilities, and inflexible usage.

[0004] To sum up, how to improve the independence and reusability of UI components is a technical problem that needs to be solved urgently. Summary of the Invention

[0005] In view of this, the purpose of the present invention is to provide a UI component rendering method, apparatus, device and storage medium, which can improve the independence and reusability of UI components. The specific scheme is as follows:

[0006] In a first aspect, the present application provides a UI component rendering method, comprising:

[0007] Determine the target UI component and target data request according to the target data display requirements, and generate a target attribute template for the target UI component;

[0008] Determining target response data based on the target data request, and generating a target data model corresponding to the target UI component based on the target response data and the target attribute template;

[0009] A parsing operation is performed based on the target response data and the target data model to generate a target entity corresponding to the target data display requirement, and the target entity is bound to the target UI component so as to render the target UI component based on the target entity.

[0010] Optionally, generating a target attribute template for the target UI component includes:

[0011] Scanning source code corresponding to the target UI component to identify and extract configurable properties of the target UI component;

[0012] The target property template of the target UI component is generated based on the configurable property of the target UI component.

[0013] Optionally, the UI component rendering method further includes:

[0014] Initialize the dispatch queue and add the response data query task, data model determination task, parsing calculation task, entity binding task and component rendering task to the dispatch queue;

[0015] The response data query task, the data model determination task, the parsing operation task, the entity binding task and the component rendering task in the scheduling queue are executed based on a preset first-in-first-out strategy.

[0016] Optionally, determining target response data based on the target data request includes:

[0017] Acquire the target response data locally based on the response data query task and the target data request;

[0018] Or, determining a target background data interface based on the response data query task and the target data request, so as to call the target background data interface to obtain the target response data;

[0019] Accordingly, generating a target data model corresponding to the target UI component based on the target response data and the target attribute template includes:

[0020] Determine the target visualization interface corresponding to the task and the target UI component based on the data model, and map each attribute in the target attribute template to the target response data;

[0021] The model expression corresponding to the attribute is determined based on the mapping result corresponding to the attribute, and the target data model corresponding to the target UI component is generated based on the model expression corresponding to each attribute.

[0022] Optionally, performing a parsing operation based on the target response data and the target data model to generate a target entity corresponding to the target data display requirement includes:

[0023] Determine, based on the analytical operation task, a model expression corresponding to each attribute in the target data model;

[0024] Splitting the model expression to obtain an integer part corresponding to the model expression and an operation part corresponding to the model expression;

[0025] Performing an analytical operation based on the shaping part and the target response data to obtain an initial analytical result, and performing an analytical operation based on the operation part and the initial analytical result to obtain an attribute value of the attribute corresponding to the model expression;

[0026] Generating the target entity corresponding to the target data display requirement based on the attribute values ​​of the attributes;

[0027] The shaping part is used to convert the data format of the target response data, and the calculation part is used to calculate the initial parsing result.

[0028] Optionally, performing a parsing operation based on the shaping part and the target response data to obtain an initial parsing result, and performing a parsing operation based on the operation part and the initial parsing result to obtain an attribute value of the attribute corresponding to the model expression includes:

[0029] Determining the operators in the shaping part and the order of the operators from left to right, and performing a parsing operation based on the operators, the order of the operators, and the target response data to obtain the initial parsing result;

[0030] Based on the preset operation identifier and the order from left to right, the target operators in the operation part and the corresponding order of the target operators are determined, and based on the target operators, the corresponding order of the target operators and the initial parsing result, the parsing operation is performed to obtain the attribute value of the attribute corresponding to the model expression.

[0031] Optionally, binding the target entity to the target UI component so as to render the target UI component based on the target entity includes:

[0032] Binding the target entity to the target UI component based on a preset two-way binding mechanism and the entity binding task, and marking the binding state of the target UI component as bound;

[0033] The target UI component is rendered based on a preset data bidirectional synchronization mechanism, the component rendering task, the target entity, and a target rendering function corresponding to the target UI component, and the target entity is displayed through the target UI component on a target visualization interface.

[0034] In a second aspect, the present application provides a UI component rendering device, comprising:

[0035] A target attribute template generation module is used to determine a target UI component and a target data request according to target data display requirements, and to generate a target attribute template for the target UI component;

[0036] a target data model generating module, configured to determine target response data based on the target data request, and generate a target data model corresponding to the target UI component based on the target response data and the target attribute template;

[0037] The target UI component rendering module is used to perform parsing operations based on the target response data and the target data model to generate a target entity corresponding to the target data display requirements, and bind the target entity to the target UI component so as to render the target UI component based on the target entity.

[0038] In a third aspect, the present application provides an electronic device, comprising:

[0039] Memory, used to store computer programs;

[0040] The processor is used to execute the computer program to implement the aforementioned UI component rendering method.

[0041] In a fourth aspect, the present application provides a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, the aforementioned UI component rendering method is implemented.

[0042] In this application, first, the target UI component and target data request are determined according to the target data display requirement, and the target attribute template of the target UI component is generated; then, the target response data is determined based on the target data request, and the target data model corresponding to the target UI component is generated based on the target response data and the target attribute template; finally, a parsing operation is performed based on the target response data and the target data model to generate a target entity corresponding to the target data display requirement, and the target entity is bound to the target UI component so as to render the target UI component based on the target entity. As can be seen from the above, in this application, the appropriate target UI component and the corresponding target data request are determined according to the target data display requirement, and the target attribute template of the target UI component is determined. Then, the target response data is obtained according to the target data request, and the target data model corresponding to the target UI component is generated by combining the target response data and the target attribute template. Then, a parsing operation is performed on the target response data and the target data model to generate a target entity that meets the target data display requirement. Then, the target entity is bound to the target UI component to realize the rendering of the target UI component based on the target entity. In this way, this application can decouple the relationship between UI components and data sources through model parsing and data processing, improve the independence and reusability of UI components, and make the code more maintainable. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are merely embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0044] Figure 1 A system architecture diagram of a UI component rendering solution provided for this application;

[0045] Figure 2 A flowchart of a UI component rendering method provided by this application;

[0046] Figure 3 A flowchart of a specific UI component rendering method provided by this application;

[0047] Figure 4 A schematic diagram of the structure of a UI component rendering device provided by this application;

[0048] Figure 5 This is a structural diagram of an electronic device provided in this application. DETAILED DESCRIPTION

[0049] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.

[0050] Generally speaking, the data model representation of UI components and their decoupling and binding functions with data sources are usually implemented using technologies such as contract programming and metadata parsing, but both have certain limitations. For example, contract programming technology is implemented through a standardized data interaction format, requiring that the service interface that interacts with the UI component must meet its data format requirements, which loses the flexibility of software module use and the portability of functions; while metadata parsing technology usually uses JSON Schema syntax to describe the model, and parses the model to implement the application of data in UI components, but there are problems such as complex description structure, weak description ability and inflexible use. To this end, the present application provides a UI component rendering solution that can improve the independence and reusability of UI components.

[0051] In this application's UI component rendering solution, based on a data model-centric design concept, the UI component application process in the front-end development process is abstracted as a process where data D (Data) is mapped by a model M (Model) and transformed by a process f to obtain an entity E (Entity) and then applied to the UI component. The core relationship is expressed as follows:

[0052] ;

[0053] Among them, entity E represents the model entity, that is, the data expected by the UI component; data D represents the data domain, such as the data returned by the background service interface; model M represents the data model, that is, the description of the model entity structure and attribute relationship; process f represents the conversion process, that is, the processing logic of the generation and application of entity E.

[0054] JavaScript (JS) is primarily divided into two categories: primitive types and object types. Primitive types include number, string, boolean, symbol, bigint, undefined, and null, totaling seven types. Object types include Object, Array, Function, Date, RegExp, and more. In this application, entity E can be any type in the JS language. Its type definition is as follows: Data D can be any type in JS language. Its type definition is as follows: Model M describes the data model structure of the UI component and the mapping relationship between each attribute and data. It is a describable structured data, usually expressed as a specific value of each data type in the JS language or an array or object that is nested and structured through each data type. It should be noted that process f is the processing process of this application, which is the entire process from acquiring data, model parsing, entity generation to application display. The specific system framework used can be found in Figure 1 As shown, it involves 6 sub-modules, including: scheduling management module, data management module, model management module, analytical operation module, entity management module and component management module. The main functions of each module are as follows:

[0055] (1) Scheduling management module: manages process status, module status and scheduling queue, and coordinates the work of each module according to the scheduling strategy and module status.

[0056] (2) Data management module: Based on the data management strategy, it provides data storage, query and other functions, and can manage dynamic data (backend services, etc.) and static data.

[0057] (3) Model management module: manages the model, providing a visual UI interface to assist users in completing management operations such as binding relationships between UI components and data and expanding, updating, and deleting models.

[0058] (4) Analytical operation module: Use the depth-first algorithm to traverse and analyze the data model to generate an operator function sequence. By querying data and executing the optimized operator function sequence, the operation data is generated and assembled to generate the model entity.

[0059] (5) Entity management module: manages model entities, binds entities to UI components, realizes two-way synchronization between entities and UI components, and drives the rendering and display of UI components.

[0060] (6) Component management module: manages UI components, automatically generates attribute model templates of UI components, and reports them to the model management module; renders UI components, and displays model entities on the Web interface through UI components.

[0061] See also Figure 2 As shown, an embodiment of the present invention discloses a UI component rendering method, which may include:

[0062] Step S11: Determine a target UI component and a target data request according to a target data display requirement, and generate a target attribute template for the target UI component.

[0063] In this embodiment, the scheduling management module completes the process state and scheduling queue initialization, and the other modules complete their own initialization. Specifically, the scheduling queue is first initialized, and the response data query task, data model determination task, parsing calculation task, entity binding task, and component rendering task are added to the scheduling queue. Then, the response data query task, data model determination task, parsing calculation task, entity binding task, and component rendering task in the scheduling queue are executed based on a preset first-in-first-out strategy, and are removed from the scheduling queue after the task is completed.

[0064] In this embodiment, let the target UI component i be a VueField component. The function of the VueField component is to dynamically modify a certain attribute of an object according to the data definition of the background interface. Then determine the target data request s. It should be noted that the above-mentioned generation of the target attribute template of the target UI component may include: first scanning the source code corresponding to the target UI component to identify and extract the configurable attributes of the target UI component; then generating the target attribute template of the target UI component based on the configurable attributes of the target UI component. Specifically, the source code of the target UI component i is as follows:

[0065] <template>

[0066]

[0067] <label>

[0068] {{label}}:

[0069] <input v-model="model[prop]" :maxlength="max">

[0070] < / label>

[0071]

[0072] < / template>

[0073] <script>

[0074] export default {

[0075] name: 'VueField',

[0076] props: {

[0077] model: Object,

[0078] label: String,

[0079] prop: {

[0080] type: String,

[0081] default: 'name'

[0082] },

[0083] max: {

[0084] type: Number,

[0085] default: 20,

[0086] }

[0087] },

[0088] / / 省略methods / computed等定义

[0089] }

[0090] < / script>

[0091] After the program is initialized, the component management module scans the source code of the target UI component i to generate a target attribute template of the target UI component i. The structure of the target attribute template t is as follows:

[0092] {

[0093] model: Object,

[0094] label: String,

[0095] prop: {

[0096] type: String,

[0097] default: 'name'

[0098] },

[0099] max: {

[0100] type: Number,

[0101] default: 20,

[0102] }

[0103] }

[0104] Step S12: determining target response data based on the target data request, and generating a target data model corresponding to the target UI component based on the target response data and the target attribute template.

[0105] In this embodiment, the above-mentioned determination of the target response data based on the target data request may include: obtaining the target response data from the local computer based on the response data query task and the target data request; or determining the target background data interface based on the response data query task and the target data request, and calling the target background data interface to obtain the target response data. In a specific embodiment, when obtaining the corresponding data from the background, the target background data interface is defined as follows:

[0106] {

[0107] url: ' / app / v1 / form',

[0108] method: 'get',

[0109] }

[0110] The data management module obtains the target response data d through the target background data interface according to the target data request s as follows:

[0111] {

[0112] code: 0,

[0113] msg: 'success',

[0114] data: {

[0115] formData: {

[0116] name: 'Zhang San',

[0117] label: 'Username',

[0118] age: 16,

[0119] },

[0120] key: 'label',

[0121] maxNum: 32,

[0122] }

[0123] }

[0124] It should be noted that the above-mentioned generation of the target data model corresponding to the target UI component based on the target response data and the target attribute template may include: first, determining the target visualization interface corresponding to the task and the target UI component based on the data model, and mapping each attribute in the target attribute template with the target response data; then, determining the model expression corresponding to the attribute based on the mapping result corresponding to the attribute, and generating the target data model corresponding to the target UI component based on the model expression corresponding to each attribute. Specifically, the model management module completes the relationship binding between the target attribute template t corresponding to the target UI component i and the target response data d corresponding to the target data request s according to the target visualization interface corresponding to the target UI component, that is, constructs the target data model m, and stores it in the model management module. The structure of the target data model m is as follows:

[0125] {

[0126] model: 'root.data.formData',

[0127] label: 'Modify Label properties',

[0128] prop: 'root.data.key',

[0129] max: 'root.data.maxNum'

[0130] }

[0131] Step S13: performing parsing operations based on the target response data and the target data model to generate a target entity corresponding to the target data display requirement, and binding the target entity to the target UI component so as to render the target UI component based on the target entity.

[0132] In this embodiment, the parsing operation module takes the target response data d and the target data model m as input, obtains the target entity e through parsing operation, and submits the target UI component i and the target entity e to the entity management module for management. Specifically, first, the model expression corresponding to each attribute in the target data model is determined based on the parsing operation task; then the model expression is split to obtain the shaping part corresponding to the model expression and the operation part corresponding to the model expression; then, the initial parsing result is obtained by performing parsing operation based on the shaping part and the target response data, and the attribute value of the attribute corresponding to the model expression is obtained by performing parsing operation based on the operation part and the initial parsing result; finally, the target entity corresponding to the target data display requirement is generated based on the attribute value of each attribute; wherein, the shaping part is used to convert the data format of the target response data, and the operation part is used to operate on the initial parsing result. It should be noted that an attribute refers to a feature or element of an object, and an attribute describes the state or behavior of an object and is used to store any type of data, that is, an attribute value. A model expression is a special string. A complete expression consists of an shaping part and an operation part, and is the basic unit of the model representation method. The structure of the model expression is as follows:

[0133] ;

[0134] Here, shape is the shaping part of the model expression, and operator is the operation part of the model expression. The shaping part and the operation part are connected by a space character, and the two parts can exist independently. The shaping part converts the data format into another data format, and the operation part further processes the data, such as calculating the average, sum, union / intersection, etc. The parsing rules of the model expression are as follows:

[0135] (1) The model expression is parsed from left to right, first calculating the shaping part and then the operation part;

[0136] (2) If the model expression contains an operation part, the operation result of the model expression is determined by the operation part; otherwise, the operation result of the model expression is determined by the shaping part.

[0137] As a result, the structure of the target entity e is as follows:

[0138] {

[0139] model:{

[0140] name: 'Zhang San',

[0141] label: 'Username',

[0142] age: 16,

[0143] },

[0144] label: 'Modify Label properties',

[0145] prop: label',

[0146] max: 32

[0147] }

[0148] It should be noted that the above-mentioned binding of the target entity with the target UI component so as to render the target UI component based on the target entity may include: firstly binding the target entity with the target UI component based on the preset two-way binding mechanism and the entity binding task, and marking the binding state of the target UI component as bound; then rendering the target UI component based on the preset data two-way synchronization mechanism, the component rendering task, the target entity and the target UI component corresponding target rendering function, and displaying the target entity through the target UI component on the target visualization interface. Specifically, the entity management module uses the two-way binding mechanism of the Vue framework to bind the target UI component i and the target entity e to realize the two-way data synchronization mechanism between the target UI component i and the target entity e, and notifies the component management module to render the target UI component i. After that, the component management module executes the rendering function of the target UI component i and displays the target entity e on the target UI component i on the Web interface.

[0149] It should be pointed out that when the component management module renders the UI component, if the UI component is in a bound state, the UI component is rendered directly. Otherwise, the UI component i and the data request s are submitted to the entity management module. The entity management module queries the local data based on the UI component i and the data request s. If the entity e exists, the binding of the UI component i and the entity e is completed, and the component management module is notified to render the UI component i. Otherwise, the UI component i and the data request s are submitted to the scheduling management module. Afterwards, the scheduling management module adds the response data query task, the data model determination task, the parsing operation task, the entity binding task, and the component rendering task to the scheduling queue in turn, and executes them in sequence. When executing the data model determination task, the model management module queries and returns the data model m locally or in the background based on the UI component i and the data request s; if the data model m does not exist, the corresponding data model m is constructed.

[0150] It should be noted that in addition to the UI component rendering method provided in this embodiment, relationship visual editing technology can also be used. Specifically, the "blueprint" editor is a representative example, which is mainly used in low-code platforms. It provides a visual interface and completes data processing in the form of a "data flow diagram" by dragging data nodes, logic nodes, and relationship nodes. It relies on complex graphics technology and layout algorithms.

[0151] As can be seen from the above, this embodiment first determines the target UI component and target data request based on the target data display requirements, and generates a target attribute template for the target UI component. Then, target response data is determined based on the target data request, and a target data model corresponding to the target UI component is generated based on the target response data and the target attribute template. Finally, a parsing operation is performed on the target response data and the target data model to generate a target entity corresponding to the target data display requirements. The target entity is then bound to the target UI component to enable rendering of the target UI component based on the target entity. As can be seen from the above, this embodiment first determines the appropriate target UI component and the corresponding target data request based on the target data display requirements, and determines the target attribute template for the target UI component. Then, target response data is obtained based on the target data request, and the target data model corresponding to the target UI component is generated by combining the target response data and the target attribute template. A parsing operation is then performed on the target response data and the target data model to generate a target entity that meets the target data display requirements. The target entity is then bound to the target UI component to enable rendering of the target UI component based on the target entity. In this way, this embodiment can decouple the relationship between UI components and data sources through model parsing and data processing, improving the independence and reusability of UI components and enhancing code maintainability. Furthermore, this embodiment provides a set of data models and their entity application programs. Through functions such as automatic model creation and visual management, manual steps are minimized, preventing low-level errors and reducing maintenance costs.

[0152] Based on the previous embodiment, it can be seen that the present application can bind the target entity with the target UI component to achieve the rendering of the target UI component based on the target entity. Next, this embodiment will explain in detail how to perform parsing operations on the target response data and the target data model to generate the target entity. Figure 3 As shown, the embodiment of the present invention further discloses a UI component rendering method, which may include:

[0153] Step S21: Determine the model expression corresponding to each attribute in the target data model based on the analytical operation task.

[0154] It should be noted that the model M describes the structure of the UI component data model and the mapping relationship between each attribute and data. It is a describable structured data, usually expressed as a specific value of each data type in the JS language or an array or object that is nested and structured by each data type. If the model M is a specific value of each data type in the JS language, it means that the model is initialized with this value. In particular, if the model M is a "root." or A string starting with indicates a reference to a data object in data D. In this case, model M is also called a model expression and is the basic unit of model relationship representation. The type definition of model M is as follows:

[0155] ;

[0156] There are mainly two situations between model M and data D:

[0157] (1) When the attribute structure of the model is completely consistent with that of the data, the model M is represented by "root." or The string that begins with .

[0158] (2) When the model and data attribute structures are not completely consistent, the mapping relationship between the model and the data is reshaped based on the model expression through structures such as arrays or objects. At this time, the model M is usually expressed in the form of an array or object.

[0159] Step S22: Split the model expression to obtain a shaping part corresponding to the model expression and an operation part corresponding to the model expression.

[0160] Step S23: performing an analytical operation based on the shaping part and the target response data to obtain an initial analytical result, and performing an analytical operation based on the operation part and the initial analytical result to obtain the attribute value of the attribute corresponding to the model expression; wherein the shaping part is used to convert the data format of the target response data, and the operation part is used to perform an operation on the initial analytical result.

[0161] In this embodiment, the operators and their corresponding order in the integer part are first determined from left to right. Parsing operations are then performed based on the operators, their corresponding order, and the target response data to obtain the initial parsing result. It should be noted that the integer part of the model expression consists of several attributes and operators, and its main function is to describe the mapping relationship between the entity E and the attributes in the data D. Its basic pattern is as follows:

[0162] ;

[0163] Indicates the i-th level attribute in the path, which means attribute The corresponding value in data D or the calculated value of step i is recorded as a data object A path refers to a single attribute or a chain of attributes connected by multiple attributes. It is a mode for handling deeply nested attributes, that is, accessing or modifying attributes nested inside an object. It should be noted that "." is an attribute selector. is the reference operator, " is the traversal operator, " " is the grouping operator, "..." is the deconstruction operator, " is the selection operator, " " is an object operator, " " is an array operator, which can perform corresponding operations based on the operation rules corresponding to the above operators. is a separator. To facilitate subsequent description Also called the current attribute, The current data object. The relevant descriptions are as follows:

[0164] (1) When i=0, the attribute is a root attribute, otherwise it is a non-root attribute;

[0165] (2) If i=0 and When , the path is an absolute path, otherwise it is a relative path;

[0166] (3) If i=0 and hour, Data object The data returned by the background service, that is, data D;

[0167] (4) If the attribute for , then its values ​​represent the current data object The key name, key value, key domain (i.e. key name array), value domain (i.e. key value array) and key-value pair domain (i.e. key-value pair array) of If it is a non-iterative object, the values ​​of the above properties are all undefined.

[0168] The operator in the shaping part is a symbol or keyword used to perform operations on the model. The operator allows the model to be operated and returns the result. After the Corresponding data object Perform operations. Operators are divided into two categories: basic operators and compound operators, with a total of 8 operators. Basic operators include attribute selectors, reference operators, traversal operators, grouping operators, and destructuring operators. Compound operators include selection operators, object operators, and array operators. Each operator has the same priority and is parsed and calculated one by one according to the order of appearance. Operators cannot be directly connected and must be connected with delimiters to maintain clear semantics. The specific definitions and operation rules are as follows:

[0169] (1) Attribute selector

[0170] The symbol is ".", and its function is to obtain the current data object Sub-attributes Data object , its basic pattern is as follows:

[0171] ;

[0172] The operation rules are as follows:

[0173] 1) When i=0 and When the current data object Initialized to data D, otherwise initialized to the data object of the parent node ;

[0174] 2) Get attributes and its corresponding data objects ;

[0175] 3) If Not undefined and has no subsequent properties , then Returns the value of the current expression, otherwise sets i=i+1 and Set as And go to step 2; otherwise go to step 4;

[0176] 4) If If it is undefined, the property is terminated. Operation, will Returns the value of the current expression.

[0177] (2) Reference operator

[0178] The symbol is , the function is to create and use the current data object The basic pattern of a reference is as follows:

[0179] ;

[0180] The operation rules are as follows:

[0181] 1) When creating, reference operator Place in properties After that, it means creating a data object The absolute reference of the reference name is name, and its scope is valid in the entire process f. The reference name name cannot be a pure number, otherwise the reference is invalid;

[0182] 2) When using, only An absolute path that starts with Operator, usually with and" "Models starting with " represent data objects For reference, the operation rules refer to the deconstruction operator and selection operator;

[0183] 3) If name is of type number, create a data object The relative reference of , which means the reverse order reference data object, that is Represents the current data object References, Represents the parent data object citations, and so on;

[0184] 4) The following "0" can be omitted, that is and Equivalent, indicating the current data object citations;

[0185] 5) In particular, It is a built-in reference that can be used without creation and represents a reference to data D.

[0186] (3) Traversal operator

[0187] The symbol is " ", the function is to traverse the current data object The basic pattern is as follows:

[0188] ;

[0189] The operation rules are as follows:

[0190] 1) If Corresponding data object If it is an iterable object, the value of the current expression is of Array type, otherwise it is undefined;

[0191] 2) If the attribute If exists, it means traversing the data object Attributes of each element in the value range Corresponding data object ; If the attribute If it does not exist, it means that the data object Perform traversal operations on the value range of ;

[0192] 3) If N is an integer, its absolute value indicates that at most N traversals will be performed;

[0193] 4) If N is a positive number, it means traversing the data object The first N elements of the range;

[0194] 5) If N is a negative number, it means traversing the data object N elements after the range;

[0195] 6) If N is omitted, it means traversing the data object All elements of the value range.

[0196] It should be noted that iterable objects refer to objects in JS that have An object with properties, an iterable object can be traversed by an iterator. In the JS language, the most common iterable objects are strings, arrays, and objects.

[0197] (4) Grouping operators

[0198] The symbol is " ", the function is to The basic pattern is as follows:

[0199] ;

[0200] The operation rules are as follows:

[0201] 1) If Corresponding data object It is an iterable object, and its operation result is of Object type, otherwise it is undefined;

[0202] 2) If the attribute If exists, then according to the data object Attributes of each sub-element in the value range Value pair data object Perform group operations on each element in the value range;

[0203] 3) If the attribute If it does not exist, it means that the data object The value range of the data object The elements of the range are grouped together.

[0204] (5) Destructuring operator

[0205] The symbol is , the function is to model A shallow copy of the value or reference is performed only in the compound operator The basic mode is as follows:

[0206] ;

[0207] The operation rules are as follows:

[0208] 1) If If exists, the data object As a model The relative path form expression or the base path of the relative reference of the model participates in the model operation;

[0209] 2) If the data object Iterable object, the value of the current expression is a data object A shallow copy of the data object, otherwise it is undefined; in the array operator, the destructuring operation is Shallow copy of the range;

[0210] 3) In object operators, deconstruction operations are performed on data objects. Shallow copy of key-value pair fields;

[0211] 4) In particular, Equivalent, indicating deconstruction of the current data object .

[0212] (6) Selection operator

[0213] The symbol is " ”, used in the model Set operations, where each expression is separated by a comma (","), return the first model whose operation result is not undefined or null. The basic pattern is as follows:

[0214] ;

[0215] The operation rules are as follows:

[0216] 1) If If exists, the data object As a model The base path of the relative path form expression participates in the model operation;

[0217] 2) Calculate the model from left to right If the value is logically true, the value is returned as the value of the current expression; otherwise, it is false and the next model is calculated. , and the processing logic is similar.

[0218] 3) If the model expression If it is empty, it means referencing the current data object ,like,( )and( )equivalence.

[0219] (7) Object operators

[0220] The symbol is " ”, used for model key-value pairs Set operations, each key-value pair is separated by a comma, and the function is based on a given key-value pair To construct a data object of type object. The basic pattern is as follows:

[0221] ;

[0222] The operation rules are as follows:

[0223] 1) If If exists, the data object As a model The base path of the relative path form expression participates in the model operation;

[0224] 2) Calculate the model from left to right The value of The attribute value of the key name;

[0225] 3) If the key name is omitted and If it is an expression, the key name is the model expression The last level attribute name in the path is used as the key name; duplicate key names are not allowed. and If they are equal, The key-value pair coverage The key-value pairs they belong to, that is, the later key-value pairs cover the earlier key-value pairs;

[0226] 4) Deconstruction operators and reference operators can be used;

[0227] 5) Object selectors and array selectors can be nested to build data objects with more complex structures.

[0228] (8) Array operators

[0229] The symbol is " ”, used in the model Set operations, each expression is separated by commas, and the function is based on a given model To construct a data object of type array. The basic pattern is as follows:

[0230] ;

[0231] The operation rules are as follows:

[0232] 1) If If exists, the data object As a model The base path of the relative path form expression participates in the model operation;

[0233] 2) Calculate the model from left to right The value of is used as the array element corresponding to the i-th index of the array;

[0234] 3) Duplicate values ​​are allowed; deconstruction operators and reference operators can be used

[0235] 4) Object selectors and array selectors can be nested to build data objects with more complex structures.

[0236] After that, the operation part of the model expression needs to be parsed. Specifically, first determine the target operators in the operation part and the order of each target operator based on the preset operation identifier and the order from left to right, and then perform parsing based on each target operator, the order of each target operator and the initial parsing result to obtain the attribute value of the attribute corresponding to the model expression. It should be noted that the operation part of the model expression consists of several Operator and preceding operation identifier ( ) and performs complex logical operations through operator combinations. Operators must be defined based on actual business conditions, such as sum, maximum, and union. The basic model is as follows:

[0237] ;

[0238] 1) Among them, Operators are divided into two types: expressions and functions. The operation rules are as follows: The result of the integer part is used as an actual parameter or variable. Operator operation;

[0239] 2) Calculate from left to right , the result of the operation is used as an actual parameter or variable Operations;

[0240] 3) The last one The result of the operator is returned as the value of the operation part;

[0241] 4) If If the operator type is an expression, the code operation identifier must be used ( ) to wrap executable JS code, and its execution result will be returned as the value of the current operator. , where code is an executable JS expression or function call, etc. In code, variables can access corresponding data objects through attribute selectors or reference operators, where Indicates a reference to the result of the previous operation. In particular, when the model has only one expression operator, the preceding operation identifier ( ) can be omitted.

[0242] 5) If The operator type is function, which is a special form of expression operator. It can accept several parameters for operation and return the result as the value of the current operator. The function operator is expressed as ,in As actual parameter, the shaping part or the result of the previous operator is used as the first parameter of the function operator, that is, Participate in the operation. In particular, if the function operator does not require parameters or only requires the result of the previous operation (the result of an integer operation or an operator operation) as the only real number to participate in the calculation, it can be abbreviated to the function name func, such as sum, min, etc.

[0243] Step S24: Generate a target entity corresponding to the target data display requirement based on the attribute values ​​of the attributes.

[0244] In a specific embodiment, the data D is as follows:

[0245] const data = {

[0246] level: “low”,

[0247] person: [

[0248] { name: “Zhang San” ,age: 18},

[0249] { name: “Li Si” , age: 16},

[0250] { name: “Wang Wu” , age: 16}

[0251] ],

[0252] levels: { high: "high", medium: "medium", low: "low"}

[0253] }

[0254] Design the corresponding model M, explain the corresponding meaning of the model M, and perform analytical operations on the data D to obtain the entity E, as shown in Table 1.

[0255] Table 1

[0256]

[0257] For a more specific processing procedure of the above step S22, reference may be made to the corresponding contents disclosed in the above embodiments, which will not be described again here.

[0258] As can be seen from the above, in this embodiment, symbolic notations and functional definitions of processing logic such as traversal, grouping and deconstruction are given for operators, and a set of corresponding operation rules are formulated. A simplified structure of the data model and its representation method and a set of corresponding parsing rules are given for the data model. In this way, by formulating a set of concise data model representation syntax, this embodiment can accurately express the structure of the data model and explicitly express the data processing logic, which is conducive to tracking, debugging and troubleshooting the processing logic. At the same time, describing the data model through key-value pairs and array and object nested structures can reduce the judgment logic in the parsing process; abstracting the data processing logic into basic operator functions, completing complex logical operations through operator combinations, and describing this combination capability through syntax, avoiding customized functional functions, decoupling the strong relationship between UI components and data sources, and improving the reusability of UI components.

[0259] Accordingly, see Figure 4 As shown, the embodiment of the present application also provides a UI component rendering device, which may include:

[0260] A target attribute template generating module 11 is configured to determine a target UI component and a target data request according to a target data display requirement, and to generate a target attribute template for the target UI component;

[0261] A target data model generating module 12 is configured to determine target response data based on the target data request, and generate a target data model corresponding to the target UI component based on the target response data and the target attribute template;

[0262] The target UI component rendering module 13 is used to perform parsing operations based on the target response data and the target data model to generate a target entity corresponding to the target data display requirement, and bind the target entity to the target UI component so as to render the target UI component based on the target entity.

[0263] As can be seen from the above, in this application, the target UI component and target data request are first determined according to the target data display requirements, and the target attribute template of the target UI component is generated; then, the target response data is determined based on the target data request, and the target data model corresponding to the target UI component is generated based on the target response data and the target attribute template; finally, a parsing operation is performed based on the target response data and the target data model to generate a target entity corresponding to the target data display requirements, and the target entity is bound to the target UI component so that the target UI component can be rendered based on the target entity. As can be seen from the above, in this application, the appropriate target UI component and the corresponding target data request are first determined according to the target data display requirements, and the target attribute template of the target UI component is determined. Then, the target response data is obtained according to the target data request, and the target data model corresponding to the target UI component is generated by combining the target response data and the target attribute template. Then, a parsing operation is performed on the target response data and the target data model to generate a target entity that meets the target data display requirements. Then, the target entity is bound to the target UI component to achieve rendering of the target UI component based on the target entity. In this way, this application can decouple the relationship between UI components and data sources through model parsing and data processing, improve the independence and reusability of UI components, and make the code more maintainable.

[0264] In some specific implementations, the target attribute template generation module 11 may include:

[0265] A source code scanning unit, configured to scan the source code corresponding to the target UI component to identify and extract configurable properties of the target UI component;

[0266] A target attribute template generating unit is configured to generate the target attribute template of the target UI component based on the configurable attribute of the target UI component.

[0267] In some specific implementations, the UI component rendering device may further include:

[0268] A scheduling queue initialization module is used to initialize the scheduling queue and add response data query tasks, data model determination tasks, parsing calculation tasks, entity binding tasks and component rendering tasks to the scheduling queue;

[0269] The task execution module is used to execute the response data query task, the data model determination task, the parsing operation task, the entity binding task and the component rendering task in the scheduling queue based on a preset first-in-first-out strategy.

[0270] In some specific implementations, the target data model generation module 12 may include:

[0271] a target response data acquisition unit, configured to acquire the target response data locally based on the response data query task and the target data request; or, to determine a target background data interface based on the response data query task and the target data request, and to call the target background data interface to acquire the target response data;

[0272] Accordingly, the target data model generating module 12 may include:

[0273] an attribute mapping unit, configured to determine a target visualization interface corresponding to a task and the target UI component based on the data model, and map each attribute in the target attribute template with the target response data;

[0274] The target data model generating unit is configured to determine the model expression corresponding to the attribute based on the mapping result corresponding to the attribute, and generate the target data model corresponding to the target UI component based on the model expression corresponding to each attribute.

[0275] In some specific implementations, the target UI component rendering module 13 may include:

[0276] A model expression determination submodule, configured to determine, based on the analytical operation task, a model expression corresponding to each attribute in the target data model;

[0277] A model expression splitting submodule, used for splitting the model expression to obtain a shaping part corresponding to the model expression and a calculation part corresponding to the model expression;

[0278] a parsing operation submodule, configured to perform a parsing operation based on the shaping part and the target response data to obtain an initial parsing result, and perform a parsing operation based on the operation part and the initial parsing result to obtain an attribute value of the attribute corresponding to the model expression;

[0279] The target entity generation submodule is used to generate the target entity corresponding to the target data display requirement based on the attribute values ​​of each attribute; wherein the shaping part is used to convert the data format of the target response data, and the calculation part is used to calculate the initial parsing result.

[0280] In some specific implementations, the analytical operator module may include:

[0281] an initial parsing result determining unit, configured to determine, from left to right, each operator in the shaping portion and the order in which the operators correspond, and perform a parsing operation based on the operators, the order in which the operators correspond, and the target response data to obtain the initial parsing result;

[0282] An attribute value determination unit is used to determine each target operator in the operation part and the corresponding order of each target operator based on a preset operation identifier and an order from left to right, and perform an analytical operation based on each target operator, the corresponding order of each target operator and the initial analytical result to obtain the attribute value of the attribute corresponding to the model expression.

[0283] In some specific implementations, the target UI component rendering module 13 may include:

[0284] a target UI component binding unit, configured to bind the target entity to the target UI component based on a preset two-way binding mechanism and the entity binding task, and mark the binding state of the target UI component as bound;

[0285] The target UI component rendering module unit is used to render the target UI component based on the preset data bidirectional synchronization mechanism, the component rendering task, the target entity and the target rendering function corresponding to the target UI component, and display the target entity through the target UI component on the target visualization interface.

[0286] Furthermore, the embodiment of the present application also discloses an electronic device, Figure 5 This is a structural diagram of an electronic device 20 according to an exemplary embodiment. The content in the diagram cannot be considered as any limitation on the scope of use of this application. The electronic device 20 may specifically include: at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input / output interface 25, and a communication bus 26. The memory 22 is used to store a computer program, which is loaded and executed by the processor 21 to implement the relevant steps in the UI component rendering method disclosed in any of the aforementioned embodiments. In addition, the electronic device 20 in this embodiment may specifically be an electronic computer.

[0287] In this embodiment, the power supply 23 is used to provide operating voltage for each hardware device on the electronic device 20; the communication interface 24 can create a data transmission channel between the electronic device 20 and the external device. The communication protocol it follows is any communication protocol that can be applied to the technical solution of this application and is not specifically limited here; the input and output interface 25 is used to obtain external input data or output data to the outside world. Its specific interface type can be selected according to specific application needs and is not specifically limited here.

[0288] In addition, the memory 22, as a carrier for resource storage, can be a read-only memory, random access memory, disk or CD, etc. The resources stored thereon can include an operating system 221, a computer program 222, etc., and the storage method can be temporary storage or permanent storage.

[0289] The operating system 221 is used to manage and control the hardware devices on the electronic device 20 and the computer program 222, which can be Windows Server, Netware, Unix, Linux, etc. In addition to including a computer program that can be used to implement the UI component rendering method performed by the electronic device 20 disclosed in any of the aforementioned embodiments, the computer program 222 can further include a computer program that can be used to perform other specific tasks.

[0290] Furthermore, this application also discloses a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, the aforementioned UI component rendering method is implemented. The specific steps of this method can be referred to the corresponding contents disclosed in the aforementioned embodiments and will not be repeated here.

[0291] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from the other embodiments. Reference can be made to the descriptions of the identical or similar parts between the various embodiments. For the devices disclosed in the embodiments, since they correspond to the methods disclosed in the embodiments, the descriptions are relatively simple, and the relevant parts can be referred to the descriptions of the methods.

[0292] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the above description has generally described the components and steps of each example according to their functions. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

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

[0294] Finally, it should be noted that, in this document, relational terms such as first and second, etc., are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "comprises," "comprising," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or device. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of additional identical elements in the process, method, article, or device comprising the element.

[0295] The above is a detailed introduction to the technical solution provided by the present application. Specific examples are used herein to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea. At the same time, for those skilled in the art, according to the ideas of the present application, there may be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as a limitation on the present application.

Claims

1. A UI component rendering method, characterized in that: include: Determine the target UI component and target data request according to the target data display requirements, and generate a target attribute template for the target UI component; Determining target response data based on the target data request, and generating a target data model corresponding to the target UI component based on the target response data and the target attribute template; A parsing operation is performed based on the target response data and the target data model to generate a target entity corresponding to the target data display requirement, and the target entity is bound to the target UI component so as to render the target UI component based on the target entity.

2. The UI component rendering method according to claim 1, characterized in that: The generating of the target attribute template of the target UI component includes: Scanning source code corresponding to the target UI component to identify and extract configurable properties of the target UI component; The target property template of the target UI component is generated based on the configurable property of the target UI component.

3. The UI component rendering method according to claim 1, characterized in that: Also includes: Initialize the dispatch queue and add the response data query task, data model determination task, parsing calculation task, entity binding task and component rendering task to the dispatch queue; The response data query task, the data model determination task, the parsing operation task, the entity binding task and the component rendering task in the scheduling queue are executed based on a preset first-in-first-out strategy.

4. The UI component rendering method according to claim 3, characterized in that: The determining target response data based on the target data request includes: Acquire the target response data locally based on the response data query task and the target data request; Or, determining a target background data interface based on the response data query task and the target data request, so as to call the target background data interface to obtain the target response data; Accordingly, generating a target data model corresponding to the target UI component based on the target response data and the target attribute template includes: Determine the target visualization interface corresponding to the task and the target UI component based on the data model, and map each attribute in the target attribute template to the target response data; The model expression corresponding to the attribute is determined based on the mapping result corresponding to the attribute, and the target data model corresponding to the target UI component is generated based on the model expression corresponding to each attribute.

5. The UI component rendering method according to claim 3, characterized in that: The performing of parsing operations based on the target response data and the target data model to generate a target entity corresponding to the target data display requirement includes: Determine, based on the analytical operation task, a model expression corresponding to each attribute in the target data model; Splitting the model expression to obtain an integer part corresponding to the model expression and an operation part corresponding to the model expression; Performing an analytical operation based on the shaping part and the target response data to obtain an initial analytical result, and performing an analytical operation based on the operation part and the initial analytical result to obtain an attribute value of the attribute corresponding to the model expression; Generating the target entity corresponding to the target data display requirement based on the attribute values ​​of the attributes; The shaping part is used to convert the data format of the target response data, and the calculation part is used to calculate the initial parsing result.

6. The UI component rendering method according to claim 5, characterized in that: The performing of an analytical operation based on the shaping part and the target response data to obtain an initial analytical result, and performing an analytical operation based on the operation part and the initial analytical result to obtain an attribute value of the attribute corresponding to the model expression, includes: Determining the operators in the shaping part and the order of the operators from left to right, and performing a parsing operation based on the operators, the order of the operators, and the target response data to obtain the initial parsing result; Based on the preset operation identifier and the order from left to right, the target operators in the operation part and the corresponding order of the target operators are determined, and based on the target operators, the corresponding order of the target operators and the initial parsing result, the parsing operation is performed to obtain the attribute value of the attribute corresponding to the model expression.

7. The UI component rendering method according to any one of claims 3 to 6, characterized in that: Binding the target entity to the target UI component so as to render the target UI component based on the target entity includes: Binding the target entity to the target UI component based on a preset two-way binding mechanism and the entity binding task, and marking the binding state of the target UI component as bound; The target UI component is rendered based on a preset data bidirectional synchronization mechanism, the component rendering task, the target entity, and a target rendering function corresponding to the target UI component, and the target entity is displayed through the target UI component on a target visualization interface.

8. A UI component rendering device, characterized in that: include: A target attribute template generation module is used to determine a target UI component and a target data request according to target data display requirements, and to generate a target attribute template for the target UI component; a target data model generating module, configured to determine target response data based on the target data request, and generate a target data model corresponding to the target UI component based on the target response data and the target attribute template; The target UI component rendering module is used to perform parsing operations based on the target response data and the target data model to generate a target entity corresponding to the target data display requirements, and bind the target entity to the target UI component so as to render the target UI component based on the target entity.

9. An electronic device, characterized in that: The electronic device includes a processor and a memory; wherein the memory is used to store a computer program, and the computer program is loaded and executed by the processor to implement the UI component rendering method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that Used to store a computer program, which, when executed by a processor, implements the UI component rendering method according to any one of claims 1 to 7.

Images