Apparatus and method for conditional rendering of a front end

Abstract

The application discloses a conditional rendering device and method for a front end, the device comprising: a setting module for setting a first namespace and a second namespace; different first namespaces correspond to different rendering requirements, and each first namespace is used for maintaining a condition judgment component involved in a corresponding rendering requirement; each second namespace exists in a corresponding first namespace and is used for maintaining a condition value of a condition parameter involved in a condition judgment component maintained by the corresponding first namespace; a processing module for selecting a first namespace and a second namespace suitable for a to-be-rendered object in the front end; collecting parameter values of condition parameters of the to-be-rendered object based on a condition judgment component of the selected first namespace; and performing conditional rendering processing on the to-be-rendered object based on the condition judgment component of the selected first namespace, the condition value of the condition parameter of the selected second namespace and the collected parameter values of the condition parameters.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a conditional rendering apparatus and method for a front end. Background Technology

[0002] As component-based development gradually becomes the mainstream development model for front-end development, more and more front-end pages are built using componentization. The front-end fulfills users' business needs by rendering components related to those needs.

[0003] Component rendering in front-end development often requires conditional checks to control the rendering process. Traditional conditional rendering methods typically require writing a separate set of code for each front-end application to control component rendering. However, because this code is highly specific and cannot be reused, separate sets of conditional rendering code must be written for different front-end applications or different pages within the same front-end, making it difficult to handle component rendering quickly and efficiently. Summary of the Invention

[0004] In view of this, this application proposes a conditional rendering apparatus and method for front-end, the main purpose of which is to process component rendering quickly and efficiently.

[0005] To achieve the above objectives, this application mainly provides the following technical solutions: In a first aspect, this application provides a conditional rendering apparatus for a front-end, the conditional rendering apparatus for a front-end comprising: The configuration module is used to configure multiple first namespaces and multiple second namespaces. Different first namespaces correspond to different rendering requirements, and each first namespace is used to maintain the condition judgment components involved in the corresponding rendering requirements. Each second namespace has a corresponding first namespace and is used to maintain the condition values ​​of the condition parameters involved in the condition judgment components maintained by the corresponding first namespace. The processing module is used to select a first namespace and a second namespace applicable to the object to be rendered in the front end; collect the parameter values ​​of the conditional parameters involved in the object to be rendered based on the conditional judgment component maintained by the selected first namespace; and perform conditional rendering processing on the object to be rendered based on the conditional judgment component maintained by the selected first namespace, the conditional values ​​of the conditional parameters maintained by the selected second namespace, and the collected parameter values ​​of the conditional parameters.

[0006] In some embodiments, the setting module includes: a first setting unit, configured to set a first namespace corresponding to the rendering requirements of the sample rendering object; collect the condition judgment logic involved in the sample rendering object; encapsulate the collected condition judgment logic into a corresponding condition judgment component based on the nesting and / or dependency relationship between the collected condition judgment logics, and add the encapsulated condition judgment component to the first namespace set for the sample rendering object.

[0007] In some embodiments, the setting module includes: a second setting unit, configured to: set a corresponding second namespace for each of the first namespaces; collect condition values ​​of condition parameters involved in the condition judgment components maintained by the first namespaces; and add the collected condition values ​​of the condition parameters to the second namespace.

[0008] In some embodiments, the second setting unit is specifically used to determine the sample rendering object corresponding to the first namespace; collect the condition values ​​of the condition parameters involved in the condition judgment component maintained by the first namespace from the sample rendering object; wherein the condition judgment logic involved in the sample rendering object is used to generate the condition judgment component maintained by the first namespace.

[0009] In some embodiments, the second setting unit is specifically used to display the condition parameters involved in the condition judgment component maintained by the first namespace through an interactive interface; and to collect the condition values ​​for the displayed condition parameters input in the interactive interface.

[0010] In some embodiments, the setting module is further configured to perform the following for each of the second namespaces: when it is determined that the condition value of a condition parameter involved in the second namespace needs to be updated, and when it is determined that there is a target parameter in the condition judgment component corresponding to the second namespace that depends on the condition parameter, the parameter value of the target parameter is updated at the same time as the parameter value of the condition parameter is updated.

[0011] In some embodiments, the processing module includes: a rendering unit, configured to match the correspondence between the condition judgment logic involved in the condition judgment component and the component to be rendered in the object to be rendered, the condition value of the condition parameter, and the parameter value of the condition parameter; and to perform condition rendering processing on the object to be rendered based on the determined correspondence and the nesting and / or dependency relationships between the condition judgment logic involved in the condition judgment component.

[0012] In some embodiments, the processing module includes: a selection unit, configured to select a first namespace that has the same rendering requirements as the object to be rendered as a first namespace suitable for the object to be rendered; and to select a second namespace whose condition values ​​maintained in the second namespace corresponding to the selected first namespace meet the value requirements as a second namespace suitable for the object to be rendered.

[0013] In some embodiments, the rendering requirements are used to define the syntax type of the corresponding condition judgment component, the rendering level of the corresponding condition judgment component in the front-end page, and the rendering object of the function to be rendered in the applicable level.

[0014] In some embodiments, for any first namespace, if the rendering of the applicable object to be rendered requires cross-level communication, the condition judgment component maintained by the first namespace includes the condition judgment logic involved in the level to which the object to be rendered belongs, as well as the condition judgment logic related to the rendering of the object to be rendered in the levels it crosses.

[0015] Secondly, this application provides a conditional rendering method for front-end development, which includes: Set up multiple first namespaces and multiple second namespaces; different first namespaces correspond to different rendering requirements, and each first namespace is used to maintain the condition judgment component involved in the corresponding rendering requirement; each second namespace has a corresponding first namespace and is used to maintain the condition value of the condition parameter involved in the condition judgment component maintained by the corresponding first namespace. When determining the object to be rendered, select the first and second namespaces that are suitable for the object to be rendered in the front end; Based on the conditional judgment component maintained by the selected first namespace, collect the parameter values ​​of the conditional parameters involved in the object to be rendered; Based on the condition judgment component maintained by the selected first namespace, the condition values ​​of the condition parameters maintained by the selected second namespace, and the collected parameter values ​​of the condition parameters, condition rendering processing is performed on the object to be rendered.

[0016] Thirdly, this application provides a computer-readable storage medium including a stored program, wherein, when the program is executed, it controls the device where the storage medium is located to perform the conditional rendering method for a front end, as described in the second aspect.

[0017] The conditional rendering apparatus and method for front-end provided in this application, upon determining the object to be rendered in the front-end, selects a first namespace and a second namespace suitable for the object to be rendered from preset first and second namespaces. Based on the condition judgment component maintained by the selected first namespace, it collects the parameter values ​​of the conditional parameters related to the object to be rendered. Finally, based on the condition judgment component maintained by the selected first namespace, the conditional values ​​of the conditional parameters maintained by the selected second namespace, and the collected parameter values ​​of the conditional parameters, conditional rendering processing is performed on the object to be rendered. It is evident that the solution provided in this application eliminates the need to write a dedicated set of code for conditional rendering on the front-end. When the front-end needs to render the object to be rendered, the conditional judgment component maintained by the first namespace and the conditional values ​​maintained by the second namespace in the conditional rendering apparatus can perform conditional judgments related to component rendering, thereby controlling component rendering. In this way, the solution provided in this application decouples the conditional rendering logic of the component from the business logic of the front-end, enabling fast and efficient processing of component rendering through the conditional rendering apparatus.

[0018] The above description is only an overview of the technical solution of this application. In order to better understand the technical means of this application and to implement it in accordance with the contents of the specification, and to make the above and other objects, features and advantages of this application more obvious and understandable, the following are specific embodiments of this application. Attached Figure Description

[0019] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0020] Figure 1 A schematic diagram of the structure of a conditional rendering apparatus for a front end provided in one embodiment of this application is shown; Figure 2 A schematic diagram of a conditional rendering apparatus for a front end is shown according to another embodiment of this application; Figure 3 A flowchart of a conditional rendering method for a front-end provided in one embodiment of this application is shown. Detailed Implementation

[0021] Exemplary embodiments of the present disclosure will now be described in more detail with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be implemented in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.

[0022] Currently, traditional conditional rendering for components typically requires writing a separate set of code for the front-end to control the rendering of components. However, because the code is highly specific and cannot be reused, a separate set of conditional rendering code needs to be written for different front-ends or different pages on the same front-end, making it impossible to handle component rendering quickly and efficiently.

[0023] The inventors discovered through research that a conditional rendering mechanism for the front-end can be designed to handle component rendering quickly and efficiently. This front-end conditional rendering mechanism eliminates the need to write a separate set of code specifically for conditional rendering on the front-end. When the front-end needs to render an object, the conditional rendering mechanism can perform conditional judgments related to component rendering, thereby controlling the order and timing of component rendering. This decouples the component's conditional rendering logic from the front-end's business logic, enabling fast and efficient component rendering.

[0024] Based on the above considerations, this application provides a conditional rendering apparatus and method for a front-end. Specifically, it involves maintaining multiple first namespaces and multiple second namespaces. The first and second namespaces mentioned here have the following characteristics: different first namespaces correspond to different rendering requirements, and each first namespace is used to maintain the condition judgment components involved in the corresponding rendering requirement; each second namespace has a corresponding first namespace and is used to maintain the condition values ​​of the condition parameters involved in the condition judgment components maintained by the corresponding first namespace. After determining the object to be rendered in the front-end, a first namespace and a second namespace suitable for the object to be rendered in the front-end are selected from the multiple pre-set first and second namespaces. Based on the condition judgment components maintained by the selected first namespace, the parameter values ​​of the condition parameters involved in the object to be rendered are collected. Finally, based on the condition judgment components maintained by the selected first namespace, the condition values ​​of the condition parameters maintained by the selected second namespace, and the collected parameter values ​​of the condition parameters, conditional rendering processing is performed on the object to be rendered.

[0025] In practical applications, the conditional rendering device for the front-end provided in this application embodiment can be configured as a toolkit. When a user needs to conditionally render components in the front-end, they can download the toolkit and deploy the conditional rendering device through the toolkit. The deployed conditional rendering device then completes the conditional rendering of the objects to be rendered on the front-end. In principle, any front-end with specific conditional rendering requirements can complete conditional rendering through the conditional rendering device provided in this application embodiment, thereby avoiding the need to write complex code for conditional rendering on the front-end, reducing the development investment related to conditional rendering in the front-end, and thus enabling fast and efficient processing of component rendering.

[0026] The following is a detailed description of the conditional rendering apparatus and method for the front end provided in the embodiments of this application.

[0027] like Figure 1 As shown, this application embodiment provides a conditional rendering device for a front end, which mainly includes a setting module 11 and a processing module 12.

[0028] The configuration module 11 is used to configure multiple first namespaces and multiple second namespaces. Different first namespaces correspond to different rendering requirements, and each first namespace is used to maintain the condition judgment components involved in the corresponding rendering requirements. Each second namespace has a corresponding first namespace and is used to maintain the condition values ​​of the condition parameters involved in the condition judgment components maintained by the corresponding first namespace.

[0029] The processing module 12 is used to select a first namespace and a second namespace applicable to the object to be rendered in the front end; collect the parameter values ​​of the conditional parameters involved in the object to be rendered based on the conditional judgment component maintained by the selected first namespace; and perform conditional rendering processing on the object to be rendered based on the conditional judgment component maintained by the selected first namespace, the conditional values ​​of the conditional parameters maintained by the selected second namespace, and the collected parameter values ​​of the conditional parameters.

[0030] The following is a detailed explanation of the specific structure and interaction relationships of the various modules involved in the conditional rendering device used in the front end: Setting up module 11: The setting module 11 is mainly used to set multiple first namespaces and multiple second namespaces. The purpose of setting the first namespaces and second namespaces in the setting module 11 is to improve the business applicability of the conditional rendering device provided in this application embodiment, so that when the front end of any specific conditional rendering requirement needs to perform component rendering, the conditional rendering device provided in this application embodiment can complete the condition judgment related to component rendering. The first namespaces and second namespaces are described in detail below.

[0031] The first namespace is used to maintain conditional decision components. To avoid confusion when using these components, different first namespaces correspond to different rendering requirements, and each first namespace is used to maintain the conditional decision components involved in its respective rendering requirement. These rendering requirements define the syntax type of the corresponding conditional decision component, the rendering level within the front-end page to which it applies, and the specific functionalities of the objects to be rendered within that level. The syntax type reflects the syntax used by the conditional decision component, limiting it to rendering objects with the same syntax type. To clarify the scope of application of the conditional decision components maintained by the first namespace, the rendering requirements corresponding to that namespace need to specify the rendering level within the front-end page to which the conditional decision component applies, and the specific functionalities of the objects to be rendered within that level. The level indicates whether the object to be rendered is globally or locally rendered, and the function reflects the specific functionality of the component. This is because, for objects at the same rendering level, different functionalities may require different conditional decision components.

[0032] The syntax types involved in the first namespace set by the setting module 11 can be determined based on business requirements, and this embodiment does not impose specific limitations. For example, the syntax types involved in the first namespace may include, but are not limited to, at least one of the following: IF syntax, Switch syntax, Promise syntax, and Map syntax. For example, the setting module 11 sets up a first namespace 1 and a first namespace 2. The first namespace 1 maintains the condition judgment component 1 involved in rendering requirement 1, and rendering requirement 1 limits the syntax type of condition judgment component 1 to "IF syntax," applicable to global rendering in the front-end page 1. The second namespace 2 maintains the condition judgment component 2 involved in rendering requirement 2, and rendering requirement 2 limits the syntax type of condition judgment component 2 to "Switch syntax," applicable to partial rendering in the front-end page 2, and in partial rendering, applicable to the object to be rendered for button functions.

[0033] The following describes the specific technical solution for setting the first namespace in module 11. For example... Figure 2 As shown, the setting module 11 includes a first setting unit 111. The first setting unit 111 is used to set a first namespace corresponding to the rendering requirements of the sample rendering object; collect the condition judgment logic involved in the sample rendering object; encapsulate the collected condition judgment logic into corresponding condition judgment components based on the nesting and / or dependency relationships between the collected condition judgment logics, and add the encapsulated condition judgment components to the first namespace set for the sample rendering object.

[0034] The sample rendering object is a rendering object in the front end that has a set of code for conditional rendering already written. In order to reuse the condition judgment logic for conditional rendering in its code, the condition judgment component maintained by the first namespace is set up by collecting the condition judgment logic of the sample rendering object.

[0035] After determining the sample rendering object, a first namespace corresponding to the rendering requirements of the sample rendering object is set. To avoid confusion in the first namespace, its identifier is unique. After setting the first namespace, the conditional judgment logic used for conditional rendering in the sample rendering object is collected. Based on the nesting and / or dependencies between the collected conditional judgment logic, it is encapsulated into corresponding conditional judgment components. It is known that when encapsulating conditional judgment components, in addition to considering the nesting and / or dependencies between judgment logic, the syntax type used by the conditional judgment logic also needs to be considered, as different syntax types have different characteristics. The encapsulated conditional judgment components can directly perform conditional judgments on the applicable objects to be rendered in the front end, so that the components involved in the objects to be rendered are rendered in an orderly manner under the conditional judgments. After encapsulating the conditional judgment components, they are added to the first namespace set for the sample rendering object, thereby enabling the first namespace to maintain the conditional judgment components involved in the corresponding rendering requirements.

[0036] This application's embodiments componentize the conditional judgment logic corresponding to rendering requirements into conditional judgment components. This allows for simpler conditional rendering of objects and avoids excessive conditional rendering logic in the front end. Furthermore, componentizing the conditional judgment logic into conditional judgment components not only enables fast and efficient component rendering but also supports various syntax types, leveraging the characteristics of each syntax type. For example, a conditional judgment logic component with the syntax type "IF" is designated as an IF syntax conditional judgment component, primarily handling mutually exclusive relationships between if, else-If, and else. For example, a conditional judgment logic component with the syntax type "Switch" is designated as a Switch syntax conditional judgment component. For example, a conditional judgment logic component with the syntax type "Promise" is designated as a Promise syntax conditional judgment component, supporting asynchronous conditional judgments using "Promise" syntax and primarily handling asynchronous execution controlling rendering at different times and in different states.

[0037] The conditional judgment component needs to be used in conjunction with the condition values ​​of its involved conditional parameters so that the corresponding rendering is performed only when the parameter values ​​meet the condition values. Therefore, in order to maintain the condition values ​​of the conditional parameters involved in the conditional judgment component, multiple second namespaces need to be set up. Each second namespace has a corresponding first namespace and is used to maintain the condition values ​​of the conditional parameters involved in the conditional judgment component maintained by the corresponding first namespace. The conditional parameters maintained by the second namespace and the condition values ​​of the conditional parameters are determined based on specific business requirements, and this embodiment does not impose specific limitations on them. For example, second namespace 1 corresponds to first namespace 1 and is used to maintain the condition value "1" of the conditional parameter "test" corresponding to the conditional judgment component 1 maintained by first namespace 1.

[0038] The following describes the specific technical solution for setting the second namespace in module 11. For example... Figure 2 As shown, the setting module 11 includes a second setting unit 112. The second setting unit 112 is used for each first namespace to: set a corresponding second namespace for the first namespace; collect the condition values ​​of the condition parameters involved in the condition judgment components maintained by the first namespace; and add the collected condition values ​​of the condition parameters to the second namespace.

[0039] Set up a corresponding second namespace for the first namespace. To avoid confusion in the second namespace, the identifier of the second namespace must be unique, and the second namespace must be associated with its corresponding first namespace.

[0040] After setting up the second namespace, it is necessary to collect the condition values ​​of the condition parameters involved in the condition judgment components maintained by the corresponding first namespace. The technical solutions involved in this collection include the following three: The first type, the second setting unit 112, is specifically used to determine the sample rendering object corresponding to the first namespace; collect the condition values ​​of the condition parameters involved in the condition judgment component maintained by the first namespace from the sample rendering object; wherein, the condition judgment logic involved in the sample rendering object is used to generate the condition judgment component maintained by the first namespace.

[0041] Considering that the sample rendering object is a rendering object in the front end that has already been written with a set of code for conditional rendering, in order to improve the efficiency of collecting condition values ​​and reuse the parameter values ​​of the condition parameters in the sample rendering object, the condition values ​​of the condition parameters involved in the condition judgment component maintained by the first namespace are collected from the sample rendering object.

[0042] The second type, the second setting unit 112, is specifically used to display the condition parameters involved in the condition judgment component maintained by the first namespace through the interactive interface; and to collect the condition values ​​input in the interactive interface for the displayed condition parameters.

[0043] Considering that users have specific business requirements for the conditional parameters involved in the conditional judgment component, in order to improve the business applicability of the conditional values, the conditional parameters involved in the conditional judgment component maintained by the first namespace are displayed through the interactive interface, so that users can set the parameter values ​​of the conditional parameters independently based on their business requirements.

[0044] Users will input the required condition values ​​into the corresponding positions of the condition parameters in the interactive interface. After the user finishes inputting, the condition values ​​for the displayed condition parameters are collected from the interactive interface.

[0045] The third method combines the above two collection methods. Specifically, the second setting unit 112 is used to determine the sample rendering object corresponding to the first namespace; collect the condition values ​​of the condition parameters involved in the condition judgment component maintained by the first namespace from the sample rendering object; and display the condition parameters and the collected condition values ​​through the interactive interface for the user to modify. If a confirmation instruction is received, it means that the user does not need to modify the collected condition values, and the collected condition values ​​are directly determined as the condition values ​​of the condition parameters involved in the condition judgment component maintained by the first namespace. If a modification instruction is received, it means that the user needs to modify the collected condition values, and the condition values ​​with modification needs are modified to the values ​​carried in the modification instruction. The unmodified and modified condition values ​​are sorted, and the sorted condition values ​​are determined as the condition values ​​of the condition parameters involved in the condition judgment component maintained by the first namespace.

[0046] Processing module 12: Processing module 12 is mainly used to perform conditional rendering processing on the object to be rendered based on the condition judgment component maintained in the first namespace and the condition values ​​maintained in the second namespace. The object to be rendered is the object that needs to be rendered in the front-end page. It is composed of multiple components. Only after the components that make up the object have undergone condition judgment can the object be rendered.

[0047] After determining the object to be rendered, it is necessary to select a first namespace and a second namespace applicable to the object in the front end. This selection is performed by the selection unit 121 in processing module 12. Figure 2 As shown, the processing module 12 includes a selection unit 121. The selection unit 121 is used to select a first namespace that has the same rendering requirements as the object to be rendered as the first namespace suitable for the object to be rendered; and to select a second namespace whose condition values ​​maintained in the second namespace corresponding to the selected first namespace meet the value requirements as the second namespace suitable for the object to be rendered.

[0048] The syntax and corresponding hierarchy of the conditional judgment component maintained by the first namespace, which has the same rendering requirements as the object to be rendered, are applicable to the object. Therefore, it is selected as the first namespace applicable to the object. To improve business applicability, a first namespace may have two or more second namespaces. Therefore, after selecting the first namespace applicable to the object, the second namespace whose conditional values ​​maintain the required values ​​is selected as the second namespace applicable to the object. For example, first namespace 1 is selected as the first namespace applicable to the object. First namespace 1 has corresponding second namespaces 2 and 3. The difference between second namespaces 2 and 3 is that the conditional value of conditional parameter 1 is different. The conditional value of conditional parameter 1 maintained by second namespace 2 is conditional value 1, and the conditional value of conditional parameter 1 maintained by second namespace 3 is conditional value 2. Among them, second namespace 2 meets the value requirements, so second namespace 2 is selected as the second namespace applicable to the object. The value requirement mentioned here can be the value requirement of a single conditional parameter, or the value requirement of multiple or all conditional parameters involved in the conditional judgment component.

[0049] After selecting the first and second namespaces applicable to the object to be rendered in the front end, the parameter values ​​of the conditional parameters related to the object to be rendered are collected based on the conditional judgment component maintained by the selected first namespace. Specifically, the collection process involves determining the conditional parameters involved in the conditional judgment component, and then collecting the parameter values ​​of the conditional parameters related to the object to be rendered. These parameter values ​​are the parameter values ​​set by the object itself for the conditional parameters. The relationship between the conditional values ​​and the parameter values ​​is used to advance the rendering process of the object to be rendered.

[0050] After collecting the parameter values ​​of the conditional parameters related to the object to be rendered based on the conditional judgment component maintained by the selected first namespace, the processing module 12 performs conditional rendering processing on the object to be rendered based on the conditional judgment component maintained by the selected first namespace, the conditional parameters maintained by the selected second namespace, and the collected parameter values ​​of the conditional parameters. This conditional rendering processing is performed by the rendering unit 122 within the processing module 12. Figure 2 As shown, the processing module includes a rendering unit 122. The rendering unit 122 is used to match the correspondence between the condition judgment logic involved in the condition judgment component and the component to be rendered in the object to be rendered, the condition value of the condition parameter, and the parameter value of the condition parameter; based on the determined correspondence and the nesting and / or dependency relationship between the condition judgment logic involved in the condition judgment component, the rendering unit performs condition rendering processing on the object to be rendered.

[0051] The object to be rendered is the object on the front-end page that needs to be rendered. It consists of multiple components, and the object can only be rendered after the components that make it up undergo conditional judgment. Therefore, when performing conditional rendering on the object to be rendered, it is first necessary to match the correspondence between the conditional judgment logic of the conditional judgment component and the component to be rendered in the object, the condition value of the conditional parameter, and the parameter value of the conditional parameter. For example, if conditional judgment logic 1 corresponds to component to be rendered 1, condition value 1, and parameter value 1, then when executing conditional judgment logic 1, it is determined whether to render component 1 or whether to render components that have nested and / or dependent relationships with component 1, based on condition value 1 and parameter value 1.

[0052] After determining the correspondence between the conditional judgment logic and the component to be rendered in the object to be rendered, the condition value of the conditional parameter, and the parameter value of the conditional parameter, conditional rendering processing is performed on the object to be rendered based on the determined correspondence and the nesting and / or dependency relationships between the conditional judgment logics involved in the conditional judgment component. During conditional rendering processing, the conditional judgment logic will perform corresponding conditional judgments based on its respective nesting and / or dependency relationships, and based on its corresponding parameter value and condition value, and render the object to be rendered on the page accordingly.

[0053] The conditional rendering apparatus for the front end provided in this application, when determining the object to be rendered in the front end, selects a first namespace and a second namespace suitable for the object to be rendered in the front end from preset first namespaces and second namespaces. Based on the condition judgment component maintained by the selected first namespace, it collects the parameter values ​​of the conditional parameters related to the object to be rendered. Finally, based on the condition judgment component maintained by the selected first namespace, the conditional values ​​of the conditional parameters maintained by the selected second namespace, and the collected parameter values ​​of the conditional parameters, conditional rendering processing is performed on the object to be rendered. It can be seen that the solution provided in this application does not require writing a set of dedicated code for conditional rendering for the front end. When the front end needs to render the object to be rendered, the conditional judgment component maintained by the first namespace and the conditional values ​​maintained by the second namespace in the conditional rendering apparatus can perform conditional judgments related to component rendering, thereby controlling component rendering. In this way, the solution provided in this application decouples the conditional rendering logic of the component from the business logic of the front end, enabling fast and efficient processing of component rendering through the conditional rendering apparatus.

[0054] In some embodiments of this application, for any first namespace, if the applicable object to be rendered needs to communicate across levels during rendering, the condition judgment component maintained by the first namespace includes the condition judgment logic involved in the level to which the object to be rendered belongs, as well as the condition judgment logic related to the rendering of the object to be rendered in the levels it crosses.

[0055] When conditional rendering involves cross-level data calls, it increases the complexity of the rendering process. Therefore, to reduce this complexity, for a first namespace, if the object to be rendered requires cross-level communication, the conditional judgment component maintained by the first namespace includes not only the conditional judgment logic related to the object's own level but also the conditional judgment logic related to the rendering of the object in the levels it crosses. This approach allows conditional rendering to be completed without crossing levels, solely through the conditional judgment component maintained by the first namespace, thus reducing the complexity of rendering the object.

[0056] In some embodiments of this application, the setting module 11 is further configured to perform the following for each second namespace: when it is determined that the condition value of a condition parameter involved in the second namespace needs to be updated, and when it is determined that there is a target parameter in the condition judgment component corresponding to the second namespace that depends on the condition parameter, the parameter value of the target parameter is updated at the same time as the parameter value of the condition parameter is updated.

[0057] To ensure the accuracy of conditional values ​​in the second namespace, if it is determined that an update to the conditional value of a conditional parameter in the second namespace is needed, and it is determined that the conditional judgment component corresponding to the second namespace has a target parameter that depends on the conditional parameter, then the parameter value of the target parameter is updated simultaneously with the conditional parameter value. If it is determined that an update to the conditional value of a conditional parameter in the second namespace is needed, and it is determined that the conditional judgment component corresponding to the second namespace does not have a target parameter that depends on the conditional parameter, then only the parameter value of the conditional parameter needs to be updated.

[0058] In some embodiments of this application, the conditional rendering device for the front end can be integrated into a conditional rendering toolkit. This toolkit can be an open-source package to facilitate custom download and development by business personnel. When conditional rendering of a page in the front end is required, the toolkit can be downloaded and installed, and the conditional rendering device can be deployed at the location of conditional rendering on the page. For example, the conditional rendering toolkit is published as an npm library and can be downloaded and used using `npm install`. When the conditional rendering device determines that there is an object to be rendered in the front end, it selects a first namespace and a second namespace applicable to the object to be rendered in the front end, and collects the parameter values ​​of the conditional parameters involved in the object to be rendered based on the conditional judgment component maintained by the selected first namespace. Based on the conditional judgment component maintained by the selected first namespace, the conditional values ​​of the conditional parameters maintained by the selected second namespace, and the collected parameter values ​​of the conditional parameters, conditional rendering processing is performed on the object to be rendered. In this way, the conditional rendering logic of the component is decoupled from the business logic of the front end, and the conditional rendering device for the front end can quickly and efficiently process component rendering.

[0059] Furthermore, another embodiment of this application also provides a conditional rendering method for the front end, such as... Figure 3 As shown, the method mainly includes the following steps: 201. Set up multiple first namespaces and multiple second namespaces; where different first namespaces correspond to different rendering requirements, and each first namespace is used to maintain the condition judgment components involved in the corresponding rendering requirements; each second namespace has a corresponding first namespace, and is used to maintain the condition values ​​of the condition parameters involved in the condition judgment components maintained by the corresponding first namespace.

[0060] 202. When determining the object to be rendered, select the first namespace and the second namespace that are suitable for the object to be rendered in the front end.

[0061] 203. Based on the condition judgment component maintained by the selected first namespace, collect the parameter values ​​of the condition parameters involved in the object to be rendered.

[0062] 204. Based on the condition judgment component maintained by the selected first namespace, the condition value of the condition parameter maintained by the selected second namespace, and the collected parameter value of the condition parameter, perform condition rendering processing on the object to be rendered.

[0063] The conditional rendering method for front-end provided in this application, upon determining the object to be rendered in the front-end, selects a first namespace and a second namespace suitable for the object to be rendered from a preset first namespace and second namespace. Based on the condition judgment component maintained by the selected first namespace, it collects the parameter values ​​of the conditional parameters related to the object to be rendered. Finally, based on the condition judgment component maintained by the selected first namespace, the conditional values ​​of the conditional parameters maintained by the selected second namespace, and the collected parameter values ​​of the conditional parameters, conditional rendering processing is performed on the object to be rendered. It is evident that the solution provided in this application does not require writing a dedicated set of code for conditional rendering for the front-end. When the front-end needs to render the object to be rendered, conditional judgments related to component rendering can be performed through the pre-set condition judgment component maintained by the first namespace and the conditional values ​​maintained by the second namespace, thereby controlling component rendering. In this way, the solution provided in this application decouples the conditional rendering logic of the component from the business logic of the front-end, enabling fast and efficient processing of component rendering through the pre-set condition judgment component maintained by the first namespace and the conditional values ​​maintained by the second namespace.

[0064] In some embodiments of this application, the specific process of setting multiple first namespaces involved in step 201 above includes: setting a first namespace corresponding to the rendering requirements of the sample rendering object; collecting the condition judgment logic involved in the sample rendering object; encapsulating the collected condition judgment logic into a corresponding condition judgment component based on the nesting and / or dependency relationship between the collected condition judgment logics, and adding the encapsulated condition judgment component to the first namespace set for the sample rendering object.

[0065] In some embodiments of this application, the specific process of setting multiple second namespaces involved in step 201 above includes: for each first namespace: setting a corresponding second namespace for the first namespace; collecting the condition values ​​of the condition parameters involved in the condition judgment component maintained by the first namespace; and adding the collected condition values ​​of the condition parameters to the second namespace.

[0066] In some embodiments of this application, the specific process of collecting the condition values ​​of the condition parameters involved in the condition judgment component maintained by the first namespace includes: determining the sample rendering object corresponding to the first namespace; collecting the condition values ​​of the condition parameters involved in the condition judgment component maintained by the first namespace from the sample rendering object; wherein, the condition judgment logic involved in the sample rendering object is used to generate the condition judgment component maintained by the first namespace.

[0067] In some embodiments of this application, the specific process of collecting the condition values ​​of the condition parameters involved in the condition judgment component maintained by the first namespace includes: displaying the condition parameters involved in the condition judgment component maintained by the first namespace through an interactive interface; and collecting the condition values ​​of the displayed condition parameters input in the interactive interface.

[0068] In some embodiments of this application, the specific process of selecting the first namespace and the second namespace applicable to the object to be rendered in the front end when determining the object to be rendered in step 202 above includes: selecting the first namespace that has the same rendering requirements as the object to be rendered as the first namespace applicable to the object to be rendered; and selecting the second namespace whose condition values ​​maintained in the second namespace corresponding to the selected first namespace meet the value requirements as the second namespace applicable to the object to be rendered.

[0069] In some embodiments of this application, the specific process of performing conditional rendering processing on the object to be rendered based on the condition judgment component maintained by the selected first namespace, the condition value of the condition parameter maintained by the selected second namespace, and the collected parameter values ​​of the condition parameters includes: matching the correspondence between the condition judgment logic involved in the condition judgment component and the component to be rendered in the object to be rendered, the condition value of the condition parameter, and the parameter value of the condition parameter; and performing conditional rendering processing on the object to be rendered based on the determined correspondence and the nesting and / or dependency relationships between the condition judgment logic involved in the condition judgment component.

[0070] In some embodiments of this application, the method further includes the following steps: for each of the second namespaces, the following steps are performed: when it is determined that the condition value of a condition parameter involved in the second namespace needs to be updated, and when it is determined that there is a target parameter in the condition judgment component corresponding to the second namespace that depends on the condition parameter, the parameter value of the target parameter is updated at the same time as the parameter value of the condition parameter is updated; In some embodiments of this application, the rendering requirements are used to define the syntax type of the corresponding condition judgment component, the rendering level of the corresponding condition judgment component in the front-end page, and the rendering object of the function to be rendered in the applicable level.

[0071] In some embodiments of this application, for any first namespace, if the rendering of the applicable object to be rendered requires cross-level communication, the condition judgment component maintained by the first namespace includes the condition judgment logic involved in the level to which the object to be rendered belongs, as well as the condition judgment logic related to the rendering of the object to be rendered in the levels it crosses.

[0072] For detailed explanations of each step in the conditional rendering method for the front end provided in this application embodiment, please refer to the corresponding detailed explanations of the conditional rendering device embodiment for the front end described above, which will not be repeated here.

[0073] Furthermore, based on the above embodiments, another embodiment of this application also provides a computer-readable storage medium, the storage medium including a stored program, wherein, when the program is executed, it controls the device where the storage medium is located to execute the above-described conditional rendering method for the front end.

[0074] In the above embodiments, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions in other embodiments.

[0075] It is understood that the relevant features in the above methods and apparatus can be referenced interchangeably. Furthermore, the terms "first," "second," etc., in the above embodiments are used to distinguish between embodiments and do not represent the superiority or inferiority of any particular embodiment.

[0076] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0077] The algorithms and displays provided herein are not inherently related to any particular computer, virtual system, or other device. Various general-purpose systems can also be used in conjunction with the teachings herein. The required structure for constructing such systems is apparent from the above description. Furthermore, this application is not directed to any particular programming language. It should be understood that the content of this application described herein can be implemented using various programming languages, and the above description of specific languages ​​is for the purpose of disclosing preferred embodiments of this application.

[0078] In addition, the memory may include non-permanent memory in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM, and the memory includes at least one memory chip.

[0079] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0080] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data cutover device to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data cutover device, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0081] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data cutover device to operate in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0082] These computer program instructions can also be loaded onto a computer or other programmable data cutover device to cause a series of operational steps to be performed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable device for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0083] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0084] Memory may include non-persistent memory in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0085] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0086] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0087] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0088] The above are merely embodiments of this application and are not intended to limit the scope of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of the claims of this application.

Claims

1. A conditional rendering device for a front-end, characterized in that, The device includes: The configuration module is used to configure multiple first namespaces and multiple second namespaces. Different first namespaces correspond to different rendering requirements, and each first namespace is used to maintain the condition judgment components involved in the corresponding rendering requirements. Each second namespace has a corresponding first namespace and is used to maintain the condition values ​​of the condition parameters involved in the condition judgment components maintained by the corresponding first namespace. The processing module is used to select a first namespace and a second namespace applicable to the object to be rendered in the front end; collect the parameter values ​​of the conditional parameters involved in the object to be rendered based on the conditional judgment component maintained by the selected first namespace; and perform conditional rendering processing on the object to be rendered based on the conditional judgment component maintained by the selected first namespace, the conditional values ​​of the conditional parameters maintained by the selected second namespace, and the collected parameter values ​​of the conditional parameters. The setting module includes a second setting unit, configured to: set a corresponding second namespace for each of the first namespaces; collect the condition values ​​of the condition parameters involved in the condition judgment components maintained by the first namespace; and add the collected condition values ​​of the condition parameters to the second namespace.

2. The apparatus according to claim 1, characterized in that, The settings module includes: The first setting unit is used to set a first namespace corresponding to the rendering requirements of the sample rendering object; collect the condition judgment logic involved in the sample rendering object; encapsulate the collected condition judgment logic into corresponding condition judgment components based on the nesting and / or dependency relationships between the collected condition judgment logics, and add the encapsulated condition judgment components to the first namespace set for the sample rendering object.

3. The apparatus according to claim 1, characterized in that, The second setting unit is specifically used to determine the sample rendering object corresponding to the first namespace; collect the condition values ​​of the condition parameters involved in the condition judgment component maintained by the first namespace from the sample rendering object; wherein, the condition judgment logic involved in the sample rendering object is used to generate the condition judgment component maintained by the first namespace. or, The second setting unit is specifically used to display the condition parameters involved in the condition judgment component maintained by the first namespace through an interactive interface; and to collect the condition values ​​for the displayed condition parameters input in the interactive interface.

4. The apparatus according to any one of claims 1-3, characterized in that, The setting module is further configured to perform the following for each of the second namespaces: when it is determined that the condition value of a condition parameter involved in the second namespace needs to be updated, and when it is determined that there is a target parameter in the condition judgment component corresponding to the second namespace that depends on the condition parameter, the parameter value of the target parameter is updated at the same time as the parameter value of the condition parameter is updated. And / or, The processing module includes: The rendering unit is used to match the correspondence between the condition judgment logic involved in the condition judgment component and the component to be rendered in the object to be rendered, the condition value of the condition parameter, and the parameter value of the condition parameter. Based on the determined correspondence and the nesting and / or dependency relationships between the condition judgment logics involved in the condition judgment component, the object to be rendered is subjected to conditional rendering processing.

5. The apparatus according to claim 1, characterized in that, The processing module includes: The selection unit is used to select a first namespace that has the same rendering requirements as the object to be rendered as the first namespace applicable to the object to be rendered; and to select a second namespace whose condition values ​​maintained in the second namespace corresponding to the selected first namespace meet the value requirements as the second namespace applicable to the object to be rendered.

6. The apparatus according to any one of claims 1-3 and 5, characterized in that, The rendering requirements are used to define the syntax type of the corresponding conditional judgment component, the rendering level of the corresponding conditional judgment component in the front-end page, and the rendering object of the function to be rendered in the applicable level.

7. The apparatus according to claim 6, characterized in that, For any first namespace, if the rendering of the applicable object requires cross-level communication, the condition judgment component maintained by the first namespace includes the condition judgment logic of the object to be rendered in its own level, as well as the condition judgment logic related to the rendering of the object in the levels it crosses.

8. A conditional rendering method for front-end development, characterized in that, The method includes: Set up multiple first namespaces and multiple second namespaces; different first namespaces correspond to different rendering requirements, and each first namespace is used to maintain the condition judgment component involved in the corresponding rendering requirement; each second namespace has a corresponding first namespace and is used to maintain the condition value of the condition parameter involved in the condition judgment component maintained by the corresponding first namespace. When determining the object to be rendered, select the first and second namespaces that are suitable for the object to be rendered in the front end; Based on the conditional judgment component maintained by the selected first namespace, collect the parameter values ​​of the conditional parameters involved in the object to be rendered; Based on the condition judgment component maintained by the selected first namespace, the condition values ​​of the condition parameters maintained by the selected second namespace, and the collected parameter values ​​of the condition parameters, condition rendering processing is performed on the object to be rendered. The method involves setting up multiple second namespaces, including: for each first namespace: setting a corresponding second namespace for the first namespace; collecting the condition values ​​of the condition parameters involved in the condition judgment components maintained by the first namespace; and adding the collected condition values ​​of the condition parameters to the second namespace.

9. A computer-readable storage medium, characterized in that, The storage medium includes a stored program, wherein, when the program is executed, it controls the device where the storage medium is located to perform the conditional rendering method for the front end as described in claim 8.

Images