A front-end component generation method, display method and related device

Abstract

This application discloses a front-end component generation method, display method, and related apparatus. It obtains a first set of functions included in a first composite element for a first business scenario, and a second set of functions included in a second composite element for a second business scenario. Business scenario similarity conditions and functional scenario similarity conditions are used as the basis for determining whether multiple composite elements can generate a front-end component. The similarities and differences between the first and second function sets are determined, resulting in a set of identical functions, a first set of different functions, and a second set of different functions. Front-end components are generated based on attribute information that triggers different display formats and the function sets. This allows the front-end component to display the first composite element based on the first attribute information in the first business scenario, or the second composite element based on the second attribute information in the second business scenario. This expands the scope of application of front-end components, further improves front-end development efficiency, and reduces maintenance costs.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a front-end component generation method, a display method and related devices. Background Art

[0002] In the development process of traditional front-end projects, the entire business system is generally made into a whole application, corresponding to an overall logic. As the business grows or changes, the complexity of the system will increase exponentially. If the business system adds new functions or modifies existing functions, the overall logic of the business system needs to be modified, resulting in low front-end development efficiency and high maintenance costs of the business system.

[0003] In the related art, developers usually divide the business system into multiple pages, analyze the basic elements that are used multiple times in multiple pages, and abstract the basic elements that are used multiple times into controls so that they can be directly called later to improve development efficiency. When maintaining the business system, only the code snippets corresponding to different controls need to be maintained.

[0004] However, based on the controls generated in the above manner, one control is only applicable to a single business scenario, such as a video playback front-end component can only be used in a video playback scenario, which has limitations. Summary of the invention

[0005] In order to solve the above technical problems, the present application provides a front-end component generation method, a display method and related devices. The generated front-end components can be applicable to diversified business scenarios, further improving the front-end development efficiency and reducing maintenance costs.

[0006] The embodiments of the present application disclose the following technical solutions:

[0007] On the one hand, an embodiment of the present application provides a method for generating a front-end component, the method comprising:

[0008] Acquire a first function set included in a first composite element for a first business scenario, and acquire a second function set included in a second composite element for a second business scenario;

[0009] If the first business scenario and the second business scenario meet a scenario similarity condition, and the first function set and the second function set meet a function similarity condition, determine a same function subset, a first different function subset, and a second different function subset;

[0010] Determine first attribute information for identifying a presentation form of the first different function subset in the first business scenario, and determine second attribute information for identifying a presentation form of the second different function subset in the second business scenario;

[0011] A front-end component is generated according to the first attribute information, the second attribute information, the same function subset, the first different function subset and the second different function subset, and the front-end component is used to display the first composite element based on the first attribute information in the first business scenario, or to display the second composite element based on the second attribute information in the second business scenario.

[0012] On the other hand, an embodiment of the present application provides a front-end component display method, the method comprising:

[0013] Obtaining a trigger operation of a user, where the trigger operation is used to open an application page of a business system;

[0014] Determine the front-end component involved in rendering the application page and the business scenario of the front-end component in the application page, wherein the front-end component is generated based on the front-end component generation method described above;

[0015] Based on the attribute information corresponding to the front-end component and the business scenario, a target element corresponding to the business scenario is displayed on the application page, and the target element is one of the first composite element and the second composite element corresponding to the front-end component.

[0016] On the other hand, an embodiment of the present application provides a front-end component generation device, the device comprising: an acquisition unit, a judgment unit, a determination unit, and a generation unit;

[0017] The acquisition unit is used to acquire a first function set included in a first composite element for a first business scenario, and to acquire a second function set included in a second composite element for a second business scenario;

[0018] The judging unit is configured to determine a same function subset, a first different function subset, and a second different function subset if the first business scenario and the second business scenario meet a scenario similarity condition, and the first function set and the second function set meet a function similarity condition;

[0019] The determining unit is configured to determine first attribute information for identifying a presentation form of the first different function subset in the first business scenario, and to determine second attribute information for identifying a presentation form of the second different function subset in the second business scenario;

[0020] The generation unit is used to generate a front-end component based on the first attribute information, the second attribute information, the same function subset, the first different function subset and the second different function subset, and the front-end component is used to display the first composite element based on the first attribute information in the first business scenario, or to display the second composite element based on the second attribute information in the second business scenario.

[0021] On the other hand, an embodiment of the present application provides a front-end component display device, the device comprising: an acquisition unit, a determination unit and a display unit;

[0022] The acquisition unit is used to acquire a trigger operation of the user, where the trigger operation is used to open an application page of the business system;

[0023] The determining unit is used to determine the front-end component involved in rendering the application page and the business scenario of the front-end component in the application page, wherein the front-end component is generated based on the front-end component generation method described above;

[0024] The display unit is used to display a target element corresponding to the business scenario on the application page based on the attribute information corresponding to the front-end component and the business scenario, and the target element is one of the first composite element and the second composite element corresponding to the front-end component.

[0025] On the other hand, an embodiment of the present application provides a computer device, the device comprising a processor and a memory:

[0026] The memory is used to store program code and transmit the program code to the processor;

[0027] The processor is used to execute the method described in the above aspects according to the instructions in the program code.

[0028] On the other hand, an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium is used to store a computer program, and the computer program is used to execute the method described in the above aspects.

[0029] On the other hand, an embodiment of the present application provides a computer program product or a computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the method described in the above aspects.

[0030] It can be seen from the above technical solution that in order to make the generated front-end components applicable to a variety of business scenarios, the basic elements required to build the business system are divided into multiple composite elements based on the business scenarios, and each composite element includes at least one basic element and at least one function. Taking two business scenarios as an example, a first function set included in the first composite element for the first business scenario can be obtained, and a second function set included in the second composite element for the second business scenario can be obtained. If the first business scenario and the second business scenario meet the scenario similarity condition, the first function set and the second function set meet the function similarity condition, the first composite element and the second composite element can be generated as front-end components, and the similarities and differences between the first function set and the second function set are determined to obtain the same function subset, the first different function subset, and the second different function subset. Different attribute information will trigger different functions, and different functions will cause the front-end components to be displayed in different forms in different business scenarios. Therefore, the first attribute information used to identify the display form of the first different function subset in the first business scenario is determined, and the second attribute information used to identify the display form of the second different function subset in the second business scenario is determined. The front-end component is generated according to the first attribute information, the second attribute information, the same function subset, the first different function subset, and the second different function subset, so that the front-end component displays the first composite element based on the first attribute information in the first business scenario, or displays the second composite element based on the second attribute information in the second business scenario. Therefore, the business scenario similarity condition and the functional scenario similarity condition are used as the basis for whether multiple composite elements can generate front-end components. The front-end component is generated according to the attribute information and function sets that trigger different display forms, so that the front-end component is applicable to a variety of business scenarios and displays different forms in different business scenarios, further improving the front-end development efficiency and reducing maintenance costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0032] Figure 1 A schematic diagram of an application scenario of a front-end component generation method provided in an embodiment of the present application;

[0033] Figure 2 A flowchart of a front-end component generation method provided in an embodiment of the present application;

[0034] Figure 3 A schematic diagram of a text selection box provided in an embodiment of the present application;

[0035] Figure 4 A schematic diagram of a scenario of a front-end component generation method provided in an embodiment of the present application;

[0036] Figure 5 A schematic diagram of a picture, video and multimedia selection box provided in an embodiment of the present application;

[0037] Figure 6 A schematic diagram of a planning time range selector provided in an embodiment of the present application;

[0038] Figure 7 A schematic diagram of a planned time range selector with a persistence function provided in an embodiment of the present application;

[0039] Figure 8 A flowchart for obtaining a list of composite elements provided in an embodiment of the present application;

[0040] Fig. 9 A flowchart of a front-end component display method provided in an embodiment of the present application;

[0041] Fig.10 A schematic diagram of a scene of a front-end component display method provided in an embodiment of the present application;

[0042] Fig.11 A schematic diagram of a front-end component generating device provided in an embodiment of the present application;

[0043] Fig.12 A schematic diagram of a front-end component display device provided in an embodiment of the present application;

[0044] Fig.13 A schematic diagram of the structure of a server provided in an embodiment of the present application;

[0045] Fig.14 A schematic diagram of the structure of a terminal device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0046] The embodiments of the present application are described below in conjunction with the accompanying drawings.

[0047] In related technologies, the basic elements required for building a business system and used multiple times are abstracted as front-end components. That is, only basic elements with exactly the same functions are abstracted as controls. The abstraction level is low, which affects the front-end development efficiency. Moreover, the basic elements can only realize one function and are extracted from one business scenario. Therefore, the front-end components are only applicable to a single business scenario and have limitations.

[0048] Based on this, the embodiments of the present application provide a front-end component generation method, display method and related devices, which extract front-end components based on business scenarios and functions, expand the scope of use of front-end components, and make the generated front-end components applicable to diversified business scenarios, further improving front-end development efficiency and reducing maintenance costs.

[0049] The front-end component generation method provided in this application can be applied to front-end component generation devices with data processing capabilities, such as terminal devices and servers. Among them, the terminal device can be a smart phone, a desktop computer, a laptop computer, a tablet computer, etc., but is not limited to this; the server can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides cloud computing services. The terminal device and the server can be directly or indirectly connected through wired or wireless communication, and this application does not limit this.

[0050] In order to facilitate understanding of the technical solution of the present application, the front-end component generation method provided in the embodiment of the present application is introduced below in combination with actual application scenarios, taking the server as the front-end component generation device.

[0051] See also Figure 1 , which is a schematic diagram of an application scenario of a front-end component generation method provided in an embodiment of the present application. Figure 1 In the application scenario shown, a business system for game advertising delivery (hereinafter referred to as the game advertising delivery business system) is constructed using Hypertext Markup Language (HTML), and the front-end components required for constructing the game advertising delivery business system are generated by the server 100, so that the game advertising delivery business system can be constructed as a reusable module, thereby improving the front-end development efficiency.

[0052] The game advertising delivery business system includes multiple business scenarios, such as video playback business scenarios, image display business scenarios, etc. Business scenarios are used to meet user needs. Each business scenario includes at least one basic element. Basic elements refer to the basic elements for rendering application pages, such as buttons of various shapes, forms, text boxes, drop-down menus, etc. Each basic element can realize a function, such as a button is used to realize a click function.

[0053] In order to make the generated front-end components applicable to a variety of business scenarios, the basic elements required to build the business system are divided into multiple composite elements based on the business scenarios. Each composite element includes at least one basic element and at least one function, which is used to realize the business capabilities required by the corresponding business scenario. The following is an example of two business scenarios of the game advertising delivery business system: the picture display business scenario (the first business scenario) and the video playback business scenario (the second business scenario).

[0054] The server 100 obtains a picture magnification display frame (first composite element) for a picture display business scenario and a video playback frame (second composite element) for a video playback business scenario, wherein the picture magnification display frame includes multiple basic elements: a black layer (division, div) with a width of 1000px and a height of 800px, the upper layer is a picture, a div with text display of picture name, pixels, etc., and a list of a group of display data. Each basic element corresponds to a function, so that the picture magnification display frame includes a first function set. The video playback frame includes multiple basic elements: a black div with a width of 1000px and a height of 800px, the upper layer is a video, a div with text display of video name, pixels, duration, etc., and a list of a group of display data. Each basic element corresponds to a function, so that the video playback frame includes a second function set.

[0055] The first function set and the second function set differ in the display content of the text display div and the upper content of the black div, that is, in terms of function, the first function set and the second function set are relatively similar, meeting the functional similarity condition, and both the image enlargement display box and the video playback box belong to the Table table (one of the four usage scenarios of the HTML language), and are both used to implement the multimedia playback function, so in terms of business scenarios, the image display business scenario and the video playback business scenario are relatively similar, meeting the scenario similarity condition. Therefore, a front-end component can be generated based on the image enlargement display box and the video playback box.

[0056] The server 100 determines the similarities and differences between the first function set and the second function set, and obtains three function subsets: an identical function subset, a first different function subset, and a second different function subset, wherein the identical function subset includes the identical functions in the first function set and the second function set, the first different function subset includes the functions in the first function set except the identical functions, and the second different function subset includes the functions in the second function set except the identical functions.

[0057] Different attribute information will trigger different functions, and different functions will cause the front-end component to display in different forms in different business scenarios. The server 100 determines the first attribute information (the material type is picture) used to identify the display form of the first different function subset in the first business scenario, and determines the second attribute information (the material type is video) used to identify the display form of the second different function subset in the second business scenario. A front-end component is generated based on the first attribute information, the second attribute information, the same function subset, the first different function subset, and the second different function subset, and the name is a multimedia display frame, so that the multimedia display frame is a picture display enlargement display frame based on the material type in the picture display business scenario, or a video display video playback frame based on the material type in the video playback business scenario.

[0058] Therefore, the similarity conditions of business scenarios and functional scenarios are used as the basis for whether multiple composite elements can generate front-end components. Front-end components are generated according to the attribute information and function sets that trigger different display forms. This makes the front-end components suitable for a variety of business scenarios and display different forms in different business scenarios, further improving the front-end development efficiency and reducing maintenance costs.

[0059] In conjunction with the accompanying drawings, a front-end component generation method provided in an embodiment of the present application is introduced below using a server as a front-end component generation device.

[0060] See also Figure 2 , which is a flow chart of a front-end component generation method provided by an embodiment of the present application. Figure 2 As shown, the front-end component generation method includes the following steps:

[0061] S201: Acquire a first function set included in a first composite element for a first business scenario, and acquire a second function set included in a second composite element for a second business scenario.

[0062] When developers develop various business systems such as overseas game advertising delivery systems, overseas user terminal quality analysis systems, and overseas data collaboration platforms, if they develop based on HTML language, they may use HTML elements with similar functions (i.e., basic elements required to build business systems) on different pages of one or more business systems. In order to improve the efficiency of front-end development, basic elements with similar functions can be abstracted to generate front-end components. Since basic elements can only realize one function and are extracted from one business scenario, the controls generated based on this method are only applicable to a single business scenario and have limitations.

[0063] Based on this, in order to make the generated front-end components applicable to a variety of business scenarios, the basic elements required to build the business system are divided into multiple composite elements based on the business scenarios. Taking two different business scenarios, the first business scenario and the second business scenario, as examples, a first function set included in the first composite element for the first business scenario is obtained, and a second function set included in the second composite element for the second business scenario is obtained.

[0064] Among them, the business scenario refers to the place where the front-end component is applied. It belongs to the concept of spatial scope and indicates the usage scenario in which the front-end component is used. Taking the business system built in HTML language as an example, there are four usage scenarios, namely forms, tables, graphics and query conditions.

[0065] Each composite element includes at least one basic element. Basic elements refer to the basic elements for rendering application pages, such as buttons of various shapes, forms, text boxes, drop-down menus, etc. Each basic element can implement a function, such as a button for realizing a click function. Therefore, the function set included in the composite element includes at least one function.

[0066] Taking the game advertising delivery business system as an example, the seven composite elements in the system and their corresponding function sets are explained below, see Table 1.

[0067] Table 1

[0068]

[0069] S202: If the first business scenario and the second business scenario meet the scenario similarity condition, and the first function set and the second function set meet the function similarity condition, determine the same function subset, the first different function subset, and the second different function subset.

[0070] After obtaining the function sets of the composite elements, it can be determined whether multiple composite elements can generate front-end components based on whether the function sets of the composite elements are similar, such as whether the first function set included in the first composite element and the second function set included in the second composite element meet the function similarity condition.

[0071] The embodiments of the present application do not specifically limit the functional similarity condition, and those skilled in the art may set it according to actual needs, such as the functions included in the first function set are more than 60% similar to the functions included in the second function set.

[0072] It should be noted that the business scenario determines the display form of the composite element. Different business scenarios have elements with the same function but different display forms. Because of the different display forms, even if the functions are the same, these composite elements cannot be extracted into front-end components. For example, the image enlargement display box in the above Table 1 belongs to the business scenario under the Table table usage scenario. The corresponding display form is that the image width and height are 800*600, the image name and pixel information are on the left side directly below the image, and the advertising data is below the image name and other information, and appears in a row and multiple columns. The image display box belongs to the business scenario under the Form form usage scenario. The corresponding display form is that the image width and height are 400*300, and the image name and pixel information are displayed in the lower left corner of the image. When the mouse hovers over the image, a new window pops up to display the advertising data. In the new window, the advertising data appears in the form of a row and multiple columns.

[0073] Therefore, in order to ensure that the generated front-end components can adapt to various business scenarios, it is not only necessary for the function sets included in the composite elements to meet the functional similarity conditions, but also for the business scenarios to which the composite elements are applicable to meet the scenario similarity conditions, such as the first business scenario and the second business scenario meeting the scenario similarity conditions.

[0074] The embodiments of the present application do not specifically limit the scenario similarity conditions, and those skilled in the art may set them according to actual needs, such as the functions included in the first business scenario and the functions included in the second business scenario belong to the same usage scenario in the HTML language.

[0075] Taking the seven composite elements in Table 1 as an example, based on the scene similarity conditions and function similarity conditions, three groups of relatively similar composite elements can be obtained from the seven composite elements, so that each group of composite elements generates a front-end component, as shown in Table 2.

[0076] Table 2

[0077]

[0078] When it is determined that the first business scenario and the second business scenario meet the scenario similarity condition, and the first function set and the second function set meet the function similarity condition, it means that the first composite element or the second composite element is more likely to be reused, and the two can be generated into a front-end component. Since a front-end component includes multiple composite elements, it is necessary to clarify the relationship between different business scenarios and different composite elements.

[0079] The similarities and differences between the first function set and the second function set are determined to obtain three function subsets: a same function subset, a first different function subset, and a second different function subset. The same function subset includes the same functions in the first function set and the second function set, the first different function subset includes the functions in the first function set except the same functions, and the second different function subset includes the functions in the second function set except the same functions.

[0080] S203: Determine first attribute information for identifying a presentation form of a first different function subset in a first business scenario, and determine second attribute information for identifying a presentation form of a second different function subset in a second business scenario.

[0081] Attribute information is used to identify the display form of the front-end component in different business scenarios. In other words, different attribute information will trigger different functions, and different functions will cause the front-end component to be displayed in different business scenarios, such as being displayed as the first composite element or the second composite element. For example, if the first attribute information of the display form in the first business scenario is identified, at least the first subset of different functions will be triggered, and the front-end component will be displayed as the first composite element. Similarly, if the second attribute information of the display form in the second business scenario is identified, at least the second subset of different functions will be triggered, and the front-end component will be displayed as the second composite element.

[0082] The following example uses the front-end components composed of image player and video player as an example. If the current material category is identified as an image, the front-end component is displayed as an image player. If the current material type is identified as a video, the front-end component is displayed as a video player. In this example, the attribute information is the material type, and different material types correspond to different front-end component display forms.

[0083] It should be noted that after the front-end component is displayed as an image player, it is also necessary to obtain the image's Uniform Resource Locator (URL) and basic information about the image, such as the image name, pixels, video duration, etc. The same is true for other composite elements. I will not go into details here.

[0084] In order to generate front-end components matching different business scenarios, it is necessary to determine first attribute information for identifying the presentation form of a first different subset of functions in a first business scenario, and to determine second attribute information for identifying the presentation form of a second different subset of functions in a second business scenario.

[0085] As a possible implementation method, we can organize the logical relationship between attribute information and the display form of front-end components, abstract the effect of attribute information on front-end components into variable class parameters, pass them to front-end components in the form of props (a parameter passed into a component from the outside), and abstract the influence of front-end components on attribute information into functional parameters, which are mounted on front-end components in the form of pops.

[0086] Let's continue to use the front-end components composed of image player and video player as an example. The relevant pseudo code is as follows:

[0087]

[0088]

[0089] Among them, playItem={} represents the effect of attribute information on the front-end component, and setPlayItem represents the influence of the front-end component on the attribute information.

[0090] S204: Generate a front-end component according to the first attribute information, the second attribute information, the same function subset, the first different function subset, and the second different function subset.

[0091] The front-end component thus generated can display the first composite element based on the first attribute information in the first business scenario, or display the second composite element based on the second attribute information in the second business scenario.

[0092] It can be seen from the above technical solution that in order to make the generated front-end components applicable to a variety of business scenarios, the basic elements required to build the business system are divided into multiple composite elements based on the business scenarios, and each composite element includes at least one basic element and at least one function. Taking two business scenarios as an example, a first function set included in the first composite element for the first business scenario can be obtained, and a second function set included in the second composite element for the second business scenario can be obtained. If the first business scenario and the second business scenario meet the scenario similarity condition, the first function set and the second function set meet the function similarity condition, the first composite element and the second composite element can be generated as front-end components, and the similarities and differences between the first function set and the second function set are determined to obtain the same function subset, the first different function subset, and the second different function subset. Different attribute information will trigger different functions, and different functions will cause the front-end components to be displayed in different forms in different business scenarios. Therefore, the first attribute information used to identify the display form of the first different function subset in the first business scenario is determined, and the second attribute information used to identify the display form of the second different function subset in the second business scenario is determined. The front-end component is generated according to the first attribute information, the second attribute information, the same function subset, the first different function subset, and the second different function subset, so that the front-end component displays the first composite element based on the first attribute information in the first business scenario, or displays the second composite element based on the second attribute information in the second business scenario. Therefore, the business scenario similarity condition and the functional scenario similarity condition are used as the basis for whether multiple composite elements can generate front-end components. The front-end component is generated according to the attribute information and function sets that trigger different display forms, so that the front-end component is applicable to a variety of business scenarios and displays different forms in different business scenarios, further improving the front-end development efficiency and reducing maintenance costs.

[0093] As a possible implementation method, in order to further expand the scope of application of front-end components, not only the adaptability of business scenarios but also the adaptability of user identity levels can be considered.

[0094] The user identity level includes at least one of user authority, user level or usage habit type. Among them, user authority can include whether the user has the authority to view the function, whether the user has the authority to view certain data, etc.; user level can include multiple levels, such as ordinary user, VIP (very important person, VIP) first-level user, VIP second-level user, etc.; usage habit type can be left-handed habit type, right-handed habit type, etc. Different user identity levels are composite elements for displaying user adaptability.

[0095] The composite element includes multiple basic elements, which correspond to multiple functions, and different display states corresponding to different function combinations can be determined. The following is an example of the first composite element.

[0096] The first composite element includes multiple presentation states, different presentation states have different function combinations, and the function combinations are determined based on the functions in the first function set. A hierarchical association relationship between the multiple presentation states of the first composite element and the user identity level is determined, and a front-end component is generated based on the hierarchical association relationship, the first attribute information, the second attribute information, the same function subset, the first different function subset, and the second different function subset.

[0097] It should be noted that the hierarchical association relationship between the multiple display states of the second composite element and the user identity level can also be determined, and the front-end component can be generated based on the hierarchical association relationship between the multiple display states of the first composite element and the user identity level, the hierarchical association relationship between the multiple display states of the second composite element and the user identity level, the first attribute information, the second attribute information, the same function subset, the first different function subset and the second different function subset.

[0098] For example, if the user identity level is user authority, taking the front-end components composed of image player and video player as an example, if the uploader of image resources uses the front-end component, the front-end component generated by the added internal association relationship will display the aggregated result data related to the advertising of the corresponding image, such as the number of likes, the number of reposts, etc.; if the uploader of non-image resources uses the front-end component, the front-end component generated by the added internal association relationship will not display the aggregated result data related to the advertising of the corresponding image.

[0099] Since a composite element includes multiple basic elements, different basic elements may affect each other. The following description is made by taking an example where a first composite element includes a first sub-element and a second sub-element.

[0100] Determine the internal association relationship between the first sub-element and the second sub-element, and the internal association relationship is used to identify that the content change of the first sub-element leads to the content change of the second sub-element. Therefore, when generating the front-end component, the front-end component is generated according to the internal association relationship, the first attribute information, the second attribute information, the same function subset, the first different function subset and the second different function subset.

[0101] The following uses the select picker as an example to illustrate the interaction between different sub-elements in a composite element. Figure 3As shown, the select picker includes three sub-elements, namely, text display div301, search input box 302 and drop-down selection box 303. You can enter a search, display all text values ​​through the drop-down selection box, and delete the selected items. When a value in the drop-down selection box 303 is selected, the current text display value of the text display div301 will be changed. Therefore, there is an internal association between the drop-down selection box 303 and the text display div301. When generating the corresponding front-end components, this internal association needs to be considered.

[0102] The present application does not specifically limit the method for determining the internal association relationship. The following takes the first composite element as an example to illustrate the determination of the internal association relationship through one method.

[0103] Determine the sub-elements in the first composite element that will change their state, define these sub-elements as internal variables in the first composite element, and combine the changes of other sub-elements caused by the sub-element changes to abstract the changes into the internal state function of the first composite element, that is, the internal association relationship.

[0104] For example, define the select picker text display div301 as an internal variable to store the current text display content, and define the drop-down selection box 303 as an internal variable. When a value in the drop-down selection box 303 is selected, the current text display value of the text display div301 will be changed. This process of selecting a value in a sub-element and causing the display values ​​in other sub-elements to change can be extracted into an internal function. The relevant pseudo code is as follows:

[0105]

[0106] As a possible implementation method, generally, functional changes of some composite elements in the front-end component will cause changes in the display form of the front-end component. Therefore, the internal and external correlation relationship between the target function in the front-end component and the display form of the front-end component is determined, and the front-end component is generated according to the internal and external correlation relationship, the first attribute information, the second attribute information, the same function subset, the first different function subset and the second different function subset.

[0107] For example, the internal and external association relationships are passed to the front-end component in the form of functions. If there is a button in the image player (composite element) to delete an image (target function), this deletion action needs to be passed to the external parent level, and the deletion logic is executed in the parent level so that the image player no longer displays the deleted image.

[0108] In order to further improve the efficiency of front-end development, composite elements that are used frequently in building business systems can be generated into front-end components to avoid generating front-end components with low reuse rate and a lot of time wasted.

[0109] Therefore, the element set required for building a business system can be obtained, such as a prototype or the code used when building a business system. Based on the business scenario and the number of times the element is used, the element set is divided into sub-element sets corresponding to different business scenarios. The number of times the composite element in each sub-element set is used to build a business system is greater than a threshold. For example, elements in the element set that are used less than twice are deleted, and elements with the same business scenario are divided into the same sub-element set. The first composite element for the first business scenario and the second composite element for the second business scenario are respectively obtained from the sub-element sets corresponding to different business scenarios, and the first function set included in the first composite element and the second function set included in the second composite element are determined.

[0110] Taking the construction of a business system through HTML language as an example, the interface in the business system can be analyzed, and the composite elements that appear can be counted in units of pages. The embodiment of the present application does not specifically limit the statistical method, and two methods are used as examples for explanation below.

[0111] Method 1: The situation where the HTML code has not yet been refactored.

[0112] Obtain the prototypes needed to build the business system, such as the user interface (UI) design draft, check the prototypes of different pages, use image recognition or manual statistics to count the repeated parts of the pages, and then divide them based on the usage scenarios, that is, forms, tables, graphics and query conditions, so as to obtain multiple subsets corresponding to different usage scenarios. It should be noted that different usage scenarios also correspond to multiple business scenarios, and each usage scenario can be further subdivided based on the business scenario to obtain multiple subsets.

[0113] Method 2: There is a situation where you need to develop and refactor HTML code.

[0114] Based on the script of HTML elements, different pages are scanned, and repeated matching elements in the pages are counted, and repeated composite elements and the number of repetitions are summarized. Then, multiple subsets are obtained based on the usage scenarios. The relevant parts can refer to the division method of method 1, which will not be repeated here.

[0115] In order to better understand the front-end component generation method provided in the embodiment of the present application, the above-mentioned front-end component generation process is introduced below in combination with specific application scenarios.

[0116] In this application scenario, the business system is a game advertising business system, and the language used to build the business system is HTML. The front end of the business system is built using umi.js and antd frameworks of react (an open source JavaScript library that renders data as HTML views), so the generated components also use the syntax of react's antd. In addition, the business system can also be built using other frameworks of react or the front-end framework of vue, and the extracted components can be in other syntaxes, which is not specifically limited in this application.

[0117] Among them, umi.js is an extensible enterprise-level front-end application framework. Umi is based on routing and supports both configuration-based routing and convention-based routing to ensure that routing is fully functional and expands its functions. It is then equipped with a plug-in system with a complete life cycle, covering every life cycle from source code to built products, and supporting various functional expansions and business needs. Antd is a React UI component library based on the Ant Design design system, mainly used for the development of enterprise-level mid- and back-end products.

[0118] See also Figure 4 , which is a scene diagram of a front-end component generation method provided by an embodiment of the present application. Generating a front-end component is mainly divided into two parts, 1. analyzing composite elements and 2. generating a reusable front-end component. The following are respectively described.

[0119] 1. The analysis of composite elements is explained from three perspectives: reusability, functionality and adaptability.

[0120] First, analyze from the perspective of reusability: analyze the pages in the game advertising business system, take the page as the unit, count the repeated composite elements and the corresponding number of times, there are two ways to count, manual analysis or image recognition (see the above method 1), and automatic statistics based on HTML element scripts to obtain composite elements for different business scenarios. In the game advertising business system, there are a total of 18 pages, and there are 6 elements with a high repetition rate, which are explained below.

[0121] (1) Text selection box, can be used 5 times, such as Figure 3 shown.

[0122] (2) The picture, video and multimedia selection box can be reused 5 times, such as Figure 5As shown, the select imagepicker includes four sub-elements, namely, a picture and text display div501, a search input box 502, a drop-down selection box 503 and a multimedia player 504. The currently selected picture text can be displayed, a search can be entered, all pictures or video covers and related information can be displayed through the drop-down selection box 503, a picture can be clicked to enlarge the picture, a video cover can be clicked to play the video content, and the selected item can be deleted.

[0123] (3) Image enlargement display box, which is reused 4 times. The image player generally consists of a black div with a width of 1000px and a height of 800px. The upper layer is a picture related to the game advertisement; a div for displaying text such as the picture name and pixels; and a list of display data.

[0124] (4) Video player frame, which is reused 4 times. The general form of the video player includes a black div with a width of 1000px and a height of 800px. The upper layer is a video related to the game advertisement; a div for displaying text such as the video name, pixels, and duration; and a list of display data.

[0125] (5) The time range selection box can be used twice. Figure 6 As shown, scheduledate range includes three sub-elements, namely, a start time radio button 601, a start time selector 602, and an end time selector 603. The start time radio button can be clicked to indicate that the start time is the current time; a specific time can also be selected as the start or end time through the start or end time selector.

[0126] (6) The time range selection box with a continuous function can be used twice, such as Figure 7 As shown, ongoingscheduledaterange includes three sub-elements, namely, the ongoing function radio button 701, the setting start and end date radio button 702, and the trigger specific time selection button 703; the remaining elements are the same as the time range selection box, and are not repeated here. You can select the ongoing function button to indicate that the plan is always ongoing, that is, the same game advertisement is continuously played; you can select the specific time button to call up the time range selection box panel and select the specific start time and end time, that is, the same game advertisement is played within a period of time.

[0127] Then analyze from the functional perspective: After analyzing the reused composite elements, the functions of the front-end components generated based on the reused composite elements will be clearer, and then determine whether the multiple composite elements meet the functional similarity conditions. For example, see Figure 8, which is a flow chart of obtaining a composite element list provided in an embodiment of the present application, comprising the following steps:

[0128] S801: Manual analysis: Based on the relevant demand background of the game advertising business system and the usage scenarios of the composite elements, manually analyze the purpose of using the composite elements.

[0129] S802: Obtain a list of functions of a single composite: According to manual analysis of the purpose of use of the composite elements, the functions of the composite elements are obtained, see Table 1 above.

[0130] S803: Summarize and summarize: Then summarize and classify, grouping complex elements with the same functional purpose into one category.

[0131] S804: Obtain a list of repeated composite elements with similar functions: see Table 2 above.

[0132] For example, the select picker and select image picker functions are relatively complex controls that provide option menus. <select>On this basis, the functions of input fuzzy matching, deletion, and multi-select display are added. However, one is to display text content, and the other is to display image thumbnails plus text; at the same time, clicking on the image thumbnail supports viewing the large image or calling up the video player to play the video. Image player and video player both belong to multimedia playback functions, one is used to view image details, and the other is used to display video content. The functional goals of scheduled date range and ongoing scheduled date range are both time display, so these six groups of elements can be classified into three groups based on functional similarity conditions. Select picker and select image picker are a group called text multimedia selection box, image player and video player are a group called multimedia display box; schedule date range and ongoing scheduled date range are a group, which is a planned time range selector.

[0133] Finally, from the perspective of adaptability: adaptability analysis is divided into two levels. The first level is different application scenarios. As mentioned above, the business scenario determines the display form of the composite element. There are elements with the same function but different display forms in different business scenarios. Because of the different display forms, even if the functions are the same, these composite elements cannot be extracted into front-end components. It is necessary to continue to judge whether the same group of composite elements are similar based on the similarity of the scenarios. For example, the multimedia display frames of the image player and video player belong to the table form usage scenario.

[0134] The second level is that different users may correspond to different user identity levels. Due to different usage habits or usage permissions, the same group of elements may also have different presentation forms. It is necessary to determine the hierarchical association between the multiple display states of the elements and the user identity levels. For example, if the owner of the picture and video uses the front-end component composed of the image player and video player, the aggregated result data related to the advertising of the corresponding picture or video will be displayed; if other users use the component, the relevant data will not be displayed.

[0135] Through the adaptability analysis, the same function subset, the first different function subset and the second different function subset corresponding to the three groups of composite elements are obtained. The composite elements required for different scenarios are displayed according to the situation, and the generated front-end components can adapt to a variety of different usage scenarios and have a wider range of applications.

[0136] 2. The generation of reusable front-end components will be explained from the three associations involved in the front-end components.

[0137] First, analyze the relationship between external information and front-end components: there is the influence of external information on front-end components (external-internal association relationship) and the influence of front-end components on external information (internal-internal association relationship), which are expressed through variables passed between parent-child levels. You can refer to the pseudo code described above.

[0138] External-internal association relationship: The front-end component may include a variety of composite elements, and different composite elements correspond to different business scenarios. Different business scenarios correspond to different external information (i.e., attribute information). In other words, the attribute information representing different business scenarios will cause different functions in the front-end component, such as the first attribute information identifies the display form of the first different function subset in the first business scenario, and the second attribute information identifies the display form of the second different function subset in the second business scenario. For example, if the current material category is identified as a picture, the front-end component is displayed as an image player, and if the current material type is identified as a video, the front-end component is displayed as a video player.

[0139] Internal-external association relationship: Generally, functional changes of some composite elements in the front-end component will cause changes in the display form of the front-end component. Therefore, the internal-external association relationship between the target function in the front-end component and the display form of the front-end component is determined, and the front-end component is generated according to the internal-external association relationship, the first attribute information, the second attribute information, the same function subset, the first different function subset, and the second different function subset. For example, the internal and external associations are passed to the front-end component in the form of a function. If there is a button in the image player (composite element) to delete the image (target function), this deletion action needs to be passed to the external parent level, and the deletion logic is executed in the parent level so that the image player no longer displays the deleted image in the display form.

[0140] Then analyze the association between the internal elements of the front-end component: Since the composite element includes multiple basic elements, different basic elements may affect each other. Therefore, the internal association between the first and second sub-elements is determined according to the content change of the first sub-element leading to the content change of the second sub-element. It can be expressed through internal variables and functions, and the pseudo code described above can be referred to. Taking the select picker shown in Figure 3 as an example, when a value in the drop-down selection box 303 is selected, the current text display value of the text display div301 will be changed. Therefore, there is an internal association between the drop-down selection box 303 and the text display div301. When generating the corresponding front-end component, the internal association needs to be considered. The generated front-end component has strong scalability, which is suitable for business scenarios with single functions as well as business scenarios with complex functions.

[0141] Thus, the external-internal correlation, the internal-external correlation, and the internal correlation are analyzed, and finally three groups of front-end components used simultaneously between different businesses are generated: a text multimedia selection box, a multimedia player, and a planned time range selector.

[0142] With respect to the front-end component generation method provided in the above embodiment, the embodiment of the present application also provides a front-end component display method, see FIG9, which is a flow chart of a front-end component display method provided in the embodiment of the present application.

[143] The front-end component display method provided in the present application can be applied to a display device of a front-end component with data processing capability, such as a terminal device.The terminal device may be a smart phone, a desktop computer, a laptop computer, a tablet computer, etc., but is not limited thereto. The terminal device may be directly or indirectly connected to the front-end component generating device through wired or wireless communication, and the present application does not limit this.

[0144] S901: Obtain the user's trigger operation.

[0145] In actual applications, the user will open the application page of the business system through the trigger operation.

[0146] S902: Determine the front-end components involved in rendering the application page and the business scenario of the front-end components in the application page.

[0147] The application page includes at least one business scenario, such as a video playback business scenario, a picture display business scenario, etc. The front-end component required for the application interface opened by the user is determined. The front-end component is generated by the front-end component generation method described in the above embodiment and is applicable to multiple business scenarios. Therefore, it is also necessary to determine the business scenario corresponding to the front-end component in the application page.

[0148] For example, taking the front-end component (multimedia player) composed of an image player and a video player as an example, the multimedia player is required for rendering the application page opened by the user, and the business scenario in the application page is a video playback business scenario.

[0149] S903: Based on the attribute information corresponding to the front-end component and the business scenario, the target element corresponding to the business scenario is displayed on the application page.

[0150] The attribute information corresponding to the business scenario can trigger the function included in the front-end component. Therefore, based on the attribute information corresponding to the front-end component and the business scenario, the target element corresponding to the business scenario is displayed on the application page. The target element is one of the first composite element and the second composite element corresponding to the front-end component.

[0151] For example, the attribute information corresponding to the video playback business scenario is that the type of material required to render the page is video, and the multimedia player in the application page will be displayed as a video player.

[0152] As a possible implementation method, if the front-end component includes a hierarchical association relationship, the terminal device will also obtain the user identity level of the user, such as one or more combinations of user authority, user level or usage habit type. The hierarchical association relationship is used to identify the relationship between the multiple display states included in the target element and the user identity level. Different display states have different function combinations, and the function combination is determined according to the functions in the function set corresponding to the target element. Therefore, based on the attribute information corresponding to the front-end component and the business scenario, the display state corresponding to the user identity level in the target element corresponding to the business scenario can be displayed on the application page.

[0153] For example, continuing to take the multimedia player as an example, the video player has two display states: displaying the aggregated result data related to advertising delivery and not displaying the aggregated result data related to advertising delivery.After the terminal device obtains the user identity level of the user as the material uploader, it can be determined that the user has the authority to view the aggregated result data related to the advertising delivery of the corresponding video according to the hierarchical association relationship, and the video player displays the display state corresponding to the aggregated result data related to the advertising delivery.

[0154] As a possible implementation method, if the front-end component includes an internal association relationship, and the internal association relationship is used to identify that the content change of the first sub-element in the target element causes the content change of the second sub-element in the target element, the terminal device can also obtain the user's trigger operation on the first sub-element, switch the display form of the first sub-element according to the first trigger operation, and switch the display form of the second sub-element according to the internal association relationship.

[0155] For example, taking the target element as the select picker shown in Figure 3 as an example, when the user selects a value (text 1 (IOS)) in the drop-down selection box 303 through the trigger operation, the display form of the drop-down selection box 303 will switch from the unselected state of text 1 (IOS) to the displayed selected state, and according to the internal association relationship, the text display div 301 will also switch to the display form of displaying text 1 (IOS).

[0156] Thus, the front-end component generated by the above-mentioned front-end component generation method will automatically adapt to the current business scenario when it comes into contact with different business scenarios, and display the composite elements required by the current business scenario.

[0157] In order to better understand the front-end component display method provided in the embodiment of the present application, in combination with FIG. 10, the above-mentioned front-end component display process is continued to be introduced with the application scenario shown in FIG. 4.

[0158] Referring to FIG. 10, this figure is a schematic diagram of an application scenario of a front-end component display method provided in the embodiment of the present application. The user clicks on the game advertising delivery business system corresponding to FIG. 4 to open the application page corresponding to the game advertising delivery business system. Determine that the front-end component involved in rendering the application page is a multimedia display frame, and determine the business scenario of the multimedia display frame in the application page. For better understanding, two business scenarios are used as examples for explanation. Business scenario A: video playback business scenario.

[0159] If the business scenario of the multimedia display frame in the application page is a video playback business scenario, the attribute information corresponding to the business scenario is video, obtain the game advertisement video to be played, and display the video player corresponding to the video playback business scenario on the application page.

[0160] Business scenario B: picture display business scenario.

[0161] If the business scenario of the multimedia display box in the application page is a picture display business scenario, the attribute information corresponding to the business scenario is a picture, obtain the game advertisement picture that needs to be displayed, and display the picture display box corresponding to the picture display business scenario on the application page.

[0162] If the user logs in to the game advertising service system, the terminal device can also obtain the user's user identity level. If the user is a material uploader, it can be determined based on the hierarchical association relationship that the user has the authority to view the aggregated result data related to the game advertising of the corresponding picture or video, then the multimedia display frame can also display the aggregated results related to the game advertising, such as 350,000 plays or clicks.

[0163] In view of the front-end component generation method provided in the above embodiment, the embodiment of the present application also provides a front-end component generation device. Refer to Figure 11, which is a schematic diagram of a front-end component generation device provided in an embodiment of the present application, and the device 1100 includes: an acquisition unit 1101, a judgment unit 1102, a determination unit 1103 and a generation unit 1104;

[0164] The acquisition unit 1101 is used to obtain a first function set included in a first composite element for a first business scenario, and to obtain a second function set included in a second composite element for a second business scenario;

[0165] The judgment unit 1102 is used to determine the same function subset, a first different function subset and a second different function subset if the first business scenario and the second business scenario meet the scenario similarity condition, and the first function set and the second function set meet the function similarity condition, the same function subset includes the same functions in the first function set and the second function set, and the first different function subset includes

[0166] the determining unit 1103 is used to determine the first attribute information used to identify the display form of the first different function subset in the first business scenario, and to determine the second attribute information used to identify the display form of the second different function subset in the second business scenario;

[0167] the generating unit 1104 is used to generate a front-end component according to the first attribute information, the second attribute information, the same function subset, the first different function subset and the second different function subset, the front-end component being used to display the first composite element based on the first attribute information in the first business scenario, or to display the second composite element based on the second attribute information in the second business scenario.

[0168] As a possible implementation method, the first composite element includes multiple display states, different display states have different function combinations, and the function combinations are determined according to the functions in the first function set. The device also includes a hierarchical association relationship determination unit, which is used to:

[0169] determine multiple user identity levels, and the user identity levels include at least one of user permissions, user levels or usage habit types; determine the hierarchical association relationship between the multiple display states and the user identity levels;

[0170] the generation unit 1104 is used to:

[0171] generate a front-end component according to the hierarchical association relationship, the first attribute information, the second attribute information, the same function subset, the first different function subset and the second different function subset.

[0172] As a possible implementation method, the first composite element includes a first sub-element and a second sub-element, and the first sub-element and the second sub-element respectively correspond to different functions in the first function set. The device also includes an internal association relationship determination unit, which is used to:

[0173] determine the internal association relationship between the first sub-element and the second sub-element, and the internal association relationship is used to identify that a content change of the first sub-element causes a content change of the second sub-element;

[0174] the generation unit 1104 is used to:

[0175] generate a front-end component according to the internal association relationship, the first attribute information, the second attribute information, the same function subset, the first different function subset and the second different function subset.

[0176] As a possible implementation, the device further includes a sub-element set determination unit, which is used to:

[0177] obtain an element set required for constructing a business system;

[0178] divide the element set into sub-element sets corresponding to different business scenarios based on business scenarios and element usage times, wherein the number of times a composite element in the sub-element set is used to construct the business system is greater than a threshold;

[0179] the acquisition unit 1101 is used to:

[0180] respectively obtain a first composite element for a first business scenario and a second composite element for a second business scenario from the sub-element sets corresponding to different business scenarios;

[0181] determine a first function set included in the first composite element and a second function set included in the second composite element.

[0182] With respect to the front-end component display method provided in the above embodiment, the embodiment of the present application also provides a front-end component display device.Refer to Figure 12, which is a schematic diagram of a front-end component display device provided in an embodiment of the present application, and the device 1200 includes: an acquisition unit 1201, a determination unit 1202 and a display unit 1203;

[0183] The acquisition unit 1201 is used to obtain a trigger operation of the user, and the trigger operation is used to open the application page of the business system;

[0184] The determination unit 1202 is used to determine the front-end component involved in rendering the application page and the business scenario of the front-end component in the application page, and the front-end component is generated by the front-end component generation method described above;

[0185] The display unit 1203 is used to display a target element corresponding to the business scenario on the application page based on the attribute information corresponding to the front-end component and the business scenario, and the target element is one of the first composite element and the second composite element corresponding to the front-end component.

[0186] As a possible implementation method, the front-end component includes a hierarchical association relationship, and the hierarchical association relationship is used to identify the relationship between multiple display states included in the target element and the user identity level, different display states have different functional combinations, and the functional combination is determined according to the functions in the function set corresponding to the target element, and the user identity level includes at least one of user authority, user level or usage habit type;

[0187] The display unit 1203 is used to:

[0188] obtain the user identity level of the user;

[0189] based on the attribute information corresponding to the front-end component and the business scenario, display the display state corresponding to the user identity level in the target element corresponding to the business scenario on the application page.

[0190] As a possible implementation, the front-end component includes an internal association relationship, the internal association relationship is used to identify that the content change of the first sub-element in the target element leads to the content change of the second sub-element in the target element, and the device also includes a first switching unit, which is used to:

[0191] obtain the trigger operation of the user on the first sub-element;

[0192] switch the display form of the first sub-element according to the trigger operation, and switch the display form of the second sub-element according to the internal association relationship.

[0193] As a possible implementation, the front-end component includes an internal association relationship, the internal association relationship is used to identify that the content change of the first sub-element in the target element leads to the content change of the second sub-element in the target element, and the device also includes a second switching unit, which is used to:

[0194] obtain the trigger operation of the user on the first sub-element;

[0195] switch the display form of the first sub-element according to the trigger operation, and switch the display form of the second sub-element according to the internal association relationship.

[0196] It can be seen from the above technical solution that in order to make the generated front-end components applicable to a variety of business scenarios, the basic elements required for building the business system are divided into multiple composite elements based on the business scenarios, and each composite element includes at least one basic element and at least one function. Taking two business scenarios as an example, a first function set included in a first composite element for a first business scenario can be obtained, and a second function set included in a second composite element for a second business scenario can be obtained. If the first business scenario and the second business scenario meet the scenario similarity condition, the first function set and the second function set meet the function similarity condition, the first composite element and the second composite element can be generated as front-end components, and the similarities and differences between the first function set and the second function set are determined to obtain the same function subset, the first different function subset and the second different function subset. Different attribute information will trigger different functions, and different functions will cause the front-end components to be displayed in different forms in different business scenarios. Therefore, the first attribute information used to identify the display form of the first different function subset in the first business scenario is determined, and the second attribute information used to identify the display form of the second different function subset in the second business scenario is determined. The front-end component is generated according to the first attribute information, the second attribute information, the same function subset, the first different function subset, and the second different function subset, so that the front-end component displays the first composite element based on the first attribute information in the first business scenario, or displays the second composite element based on the second attribute information in the second business scenario. Therefore, the business scenario similarity condition and the functional scenario similarity condition are used as the basis for whether multiple composite elements can generate front-end components. The front-end component is generated according to the attribute information and function sets that trigger different display forms, so that the front-end component is applicable to a variety of business scenarios and displays different forms in different business scenarios, further improving the front-end development efficiency and reducing maintenance costs.

[0197] The front-end component generation device or the front-end component display device described above can be a computer device, which can be a server or a terminal device. The front-end component generation device described above can be built into a server, or the front-end component display device described above can be built into a terminal device. The computer device provided by the embodiment of the present application will be introduced from the perspective of hardware entity. Among them, FIG13 shows a schematic diagram of the structure of the server, and FIG14 shows a schematic diagram of the structure of the terminal device.

[0198] Referring to FIG13, FIG13 is a schematic diagram of the structure of a server provided by an embodiment of the present application. The server 1400 can have relatively large differences due to different configurations or performances, and can include one or more central processing units (CPUs) 1422 (for example, one or more processors) and a memory 1432, and one or more storage media 1430 (for example, one or more mass storage devices) storing application programs 1442 or data 1444.Among them, the memory 1432 and the storage medium 1430 can be short-term storage or permanent storage. The program stored in the storage medium 1430 may include one or more modules (not shown in the figure), and each module may include a series of instruction operations on the server. Furthermore, the CPU 1422 can be configured to communicate with the storage medium 1430 and execute a series of instruction operations in the storage medium 1430 on the server 1400.

[0199] The server 1400 may also include one or more power supplies 1426, one or more wired or wireless network interfaces 1450, one or more input and output interfaces 1458, and / or, one or more operating systems 1441, such as Windows ServerTM, Mac OS XTM, UnixTM, LinuxTM, FreeBSDTM, etc.

[0200] The steps performed by the server in the above embodiments may be based on the server structure shown in Figure 13.

[0201] Among them, the CPU 1422 is used to perform the following steps:

[0202] obtain a first function set included in a first composite element for a first business scenario, and obtain a second function set included in a second composite element for a second business scenario;

[0203] if the first business scenario and the second business scenario meet a scenario similarity condition, and the first function set and the second function set meet a function similarity condition, determine an identical function subset, a first different function subset, and a second different function subset, wherein the identical function subset includes identical functions in the first function set and the second function set, the first different function subset includes functions in the first function set except the identical functions, and the second different function subset includes functions in the first function set other than the identical functions. Including functions in the second function set except the same function;

[0204] Determine first attribute information used to identify the display form of the first different function subset in the first business scenario, and determine second attribute information used to identify the display form of the second different function subset in the second business scenario;

[0205] Generate a front-end component according to the first attribute information, the second attribute information, the same function subset, the first different function subset and the second different function subset, the front-end component is used to display the first composite element based on the first attribute information in the first business scenario, or to display the second composite element based on the second attribute information in the second business scenario.

[0206] The CPU 1422 is also used to perform the following steps:

[0207] Obtain a trigger operation of the user, the trigger operation is used to open the application page of the business system;

[0208] Determine the front-end component involved in rendering the application page and the business scenario of the front-end component in the application page, the front-end component is generated based on the aforementioned front-end component generation method;

[0209] Based on the attribute information corresponding to the front-end component and the business scenario, display the target element corresponding to the business scenario on the application page, the target element is one of the first composite element and the second composite element corresponding to the front-end component.

[0210] Optionally, the CPU 1422 can also execute the method steps of any specific implementation of the front-end component generation method or display method in the embodiment of the present application.

[0211] Refer to Figure 14, which is a structural schematic diagram of a terminal device provided in an embodiment of the present application. FIG14 is a block diagram showing a partial structure of a smartphone related to a terminal device provided in an embodiment of the present application, wherein the smartphone includes: a radio frequency (RF) circuit 1510, a memory 1520, an input unit 1530, a display unit 1540, a sensor 1550, an audio circuit 1560, a wireless fidelity (WiFi) module 1570, a processor 1580, and a power supply 1590. A person skilled in the art will appreciate that the smartphone structure shown in FIG14 does not limit the smartphone, and may include more or fewer components than shown, or a combination of certain components, or a different arrangement of components.

[0212] The following is a detailed introduction to the various components of the smartphone in conjunction with FIG14:

[0213] The RF circuit 1510 may be used for receiving and sending signals during the process of sending and receiving information or making calls, in particular, receiving downlink information from a base station and giving it to the processor 1580 for processing; in addition, sending the designed uplink data to the base station. Typically, the RF circuit 1510 includes, but is not limited to, an antenna, at least one amplifier, a transceiver, a coupler, a low noise amplifier (Low Noise Amplifier, LNA for short), a duplexer, etc. In addition, the RF circuit 1510 can also communicate with a network and other devices through wireless communication.The wireless communication can use any communication standard or protocol, including but not limited to Global System of Mobile communication (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), Wideband Code Division Multiple Access (WCDMA), Long Term Evolution (LTE), email, Short Messaging Service (SMS), etc.

[0214] The memory 1520 can be used to store software programs and modules, and the processor 1580 can realize various functional applications and data processing of the smart phone by running the software programs and modules stored in the memory 1520. The memory 1520 can mainly include a program storage area and a data storage area, wherein the program storage area can store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc.; the data storage area can store data created according to the use of the smart phone (such as audio data, a phone book, etc.), etc. In addition, the memory 1520 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage devices.

[0215] The input unit 1530 may be used to receive input digital or character information, and to generate key signal inputs related to user settings and function control of the smart phone. Specifically, the input unit 1530 may include a touch panel 1531 and other input devices 1532. The touch panel 1531, also referred to as a touch screen, can collect user touch operations on or near it (such as operations of users using any suitable objects or accessories such as fingers, styluses, etc. on the touch panel 1531 or near the touch panel 1531), and drive the corresponding connection device according to a pre-set program. Optionally, the touch panel 1531 may include two parts: a touch detection device and a touch controller. Among them, the touch detection device detects the user's touch position, detects the signal brought by the touch operation, and transmits the signal to the touch controller; the touch controller receives the touch information from the touch detection device, converts it into the touch point coordinates, and then sends it to the processor 1580, and can receive and execute the command sent by the processor 1580. In addition, the touch panel 1531 can be implemented in various types such as resistive, capacitive, infrared, and surface acoustic wave. In addition to the touch panel 1531, the input unit 1530 can also include other input devices 1532.Specifically, other input devices 1532 may include, but are not limited to, one or more of a physical keyboard, a function key (such as a volume control key, a switch key, etc.), a trackball, a mouse, a joystick, etc.

[0216] The display unit 1540 may be used to display information input by a user or information provided to a user and various menus of a smart phone. The display unit 1540 may include a display panel 1541, and optionally, the display panel 1541 may be configured in the form of a liquid crystal display (LCD), an organic light-emitting diode (OLED), etc. Further, the touch panel 1531 may cover the display panel 1541, and when the touch panel 1531 detects a touch operation on or near it, it is transmitted to the processor 1580 to determine the type of the touch event, and then the processor 1580 provides corresponding visual output on the display panel 1541 according to the type of the touch event. Although in FIG. 14 , the touch panel 1531 and the display panel 1541 are used as two independent components to realize the input and output functions of the smart phone, in some embodiments, the touch panel 1531 and the display panel 1541 can be integrated to realize the input and output functions of the smart phone.

[0217] The smart phone may also include at least one sensor 1550, such as a light sensor, a motion sensor, and other sensors. Specifically, the light sensor may include an ambient light sensor and a proximity sensor, wherein the ambient light sensor may adjust the brightness of the display panel 1541 according to the brightness of the ambient light, and the proximity sensor may turn off the display panel 1541 and / or the backlight when the smart phone is moved to the ear. As a kind of motion sensor, the accelerometer sensor can detect the magnitude of acceleration in each direction (generally three axes), and can detect the magnitude and direction of gravity when stationary, which can be used for applications that recognize the posture of the smart phone (such as horizontal and vertical screen switching, related games, magnetometer posture calibration), vibration recognition related functions (such as pedometer, tapping), etc.; as for other sensors such as gyroscopes, barometers, hygrometers, thermometers, infrared sensors, etc. that can also be configured in the smart phone, they will not be repeated here.

[0218] The audio circuit 1560, the speaker 1561, and the microphone 1562 can provide an audio interface between the user and the smartphone. The audio circuit 1560 can transmit the received audio data to the speaker 1561 after the electrical signal is converted, and the speaker 1561 converts the electrical signal into a sound signal for output; on the other hand, the microphone 1562 converts the collected sound signal into an electrical signal, which is received by the audio circuit 1560 and converted into audio data, and then the audio data is output to the processor 1580 for processing, and then sent to another smartphone through the RF circuit 1510, or the audio data is output to the memory 1520 for further processing.

[0219] WiFi is a short-range wireless transmission technology. Smartphones can help users send and receive emails, browse web pages, and access streaming media through WiFi module 1570, which provides users with wireless broadband Internet access. Although FIG. 14 shows WiFi module 1570, it is understandable that it is not a necessary component of the smart phone and can be omitted as needed without changing the essence of the invention.

[0220] Processor 1580 is the control center of the smart phone. It uses various interfaces and lines to connect various parts of the entire smart phone. By running or executing software programs and / or modules stored in memory 1520 and calling data stored in memory 1520, it executes various functions of the smart phone and processes data. Optionally, processor 1580 may include one or more processing units; preferably, processor 1580 may integrate an application processor and a modem processor, wherein the application processor mainly processes the operating system, user interface and application programs, and the modem processor mainly processes wireless communications. It is understandable that the above-mentioned modem processor may not be integrated into processor 1580.

[0221] The smartphone also includes a power supply 1590 (such as a battery) for supplying power to each component. Preferably, the power supply can be logically connected to the processor 1580 through a power management system, so that the power management system can realize functions such as managing charging, discharging, and power consumption management.

[0222] Although not shown, the smartphone can also include a camera, a Bluetooth module, etc., which will not be described in detail here.

[0223] In the embodiment of the present application, the memory 1520 included in the smartphone can store program code and transmit the program code to the processor.

[0224] The processor 1580 included in the smartphone can execute the front-end component generation method or display method provided in the above embodiment according to the instructions in the program code.

[0225] The embodiment of the present application also provides a computer-readable storage medium for storing a computer program, and the computer program is used to execute the front-end component generation method or display method provided in the above embodiment.

[0226] The embodiment of the present application also provides a computer program product or a computer program, and the computer program product or the computer program includes computer instructions, and the computer instructions are stored in a computer-readable storage medium. The processor of the computer device reads the computer instruction from the computer-readable storage medium, and the processor executes the computer instruction, so that the computer device executes the front-end component generation method or display method provided in various optional implementations of the above aspects.

[0227] A person skilled in the art can understand that all or part of the steps of the above method embodiment can be completed by hardware related to program instructions, and the above program can be stored in a computer-readable storage medium. When the program is executed, the steps of the above method embodiment are executed; and the above storage medium can be at least one of the following media: read-only memory (English: Read-Only Memory, abbreviated: ROM), RAM, magnetic disk or optical disk and other media that can store program codes.

[0228] It should be noted that the various embodiments in this specification are described in a progressive manner, and the same and similar parts between the various embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device and system embodiments, since they are basically similar to the method embodiments, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiments. The device and system embodiments described above are only schematic, and the units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the scheme of this embodiment. The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any changes or substitutions that can be easily thought of by any technician familiar with the technical field within the technical scope disclosed in the present application should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.< / select>

Claims

1. A front-end component generation method, characterized in that: The method comprises: Obtain a first function set included in a first composite element for a first business scenario, and obtain a second function set included in a second composite element for a second business scenario, wherein each composite element includes at least one basic element, which is a basic element for rendering an application page, and each basic element corresponds to a function; If the first business scenario and the second business scenario meet a scenario similarity condition, and the first function set and the second function set meet a function similarity condition, determining a same function subset, a first different function subset, and a second different function subset; Determine first attribute information for identifying a presentation form of the first different function subset in the first business scenario, and determine second attribute information for identifying a presentation form of the second different function subset in the second business scenario; A front-end component is generated according to the first attribute information, the second attribute information, the same function subset, the first different function subset and the second different function subset, and the front-end component is used to display the first composite element based on the first attribute information in the first business scenario, or to display the second composite element based on the second attribute information in the second business scenario.

2. The method according to claim 1, characterized in that The first composite element includes a plurality of display states, and different display states have different function combinations, and the function combination is determined according to the functions in the first function set. The method further includes: Determining a plurality of user identity levels, the user identity levels comprising at least one of user authority, user level, or usage habit type; Determining a hierarchical association relationship between the plurality of presentation states and the user identity hierarchy; The generating of the front-end component according to the first attribute information, the second attribute information, the same function subset, the first different function subset and the second different function subset includes: A front-end component is generated according to the hierarchical association relationship, the first attribute information, the second attribute information, the same function subset, the first different function subset and the second different function subset.

3. The method according to claim 1, characterized in that The first composite element includes a first sub-element and a second sub-element, the first sub-element and the second sub-element respectively correspond to different functions in the first function set, and the method further includes: Determine an internal association relationship between the first sub-element and the second sub-element, where the internal association relationship is used to identify that a content change of the first sub-element causes a content change of the second sub-element; The generating of the front-end component according to the first attribute information, the second attribute information, the same function subset, the first different function subset and the second different function subset includes: A front-end component is generated according to the internal association relationship, the first attribute information, the second attribute information, the same function subset, the first different function subset and the second different function subset.

4. The method according to any one of claims 1 to 3, characterized in that: The method further comprises: Get the set of elements needed to build a business system; Dividing the element set into sub-element sets corresponding to different business scenarios based on business scenarios and element usage times, wherein the number of times a composite element in the sub-element set is used to construct the business system is greater than a threshold; The obtaining of a first function set included in a first composite element for a first business scenario, and obtaining of a second function set included in a second composite element for a second business scenario, include: Respectively obtaining a first composite element for a first business scenario and a second composite element for a second business scenario from sub-element sets corresponding to different business scenarios; A first function set included in the first composite element and a second function set included in the second composite element are determined.

5. A front-end component display method, characterized in that: The method comprises: Obtaining a trigger operation of a user, where the trigger operation is used to open an application page of a business system; Determine a front-end component involved in rendering the application page and a business scenario of the front-end component in the application page, wherein the front-end component is generated based on the front-end component generation method according to any one of claims 1 to 4; Based on the attribute information corresponding to the front-end component and the business scenario, a target element corresponding to the business scenario is displayed on the application page, and the target element is one of the first composite element and the second composite element corresponding to the front-end component.

6. The method according to claim 5, characterized in that The front-end component includes a hierarchical association relationship, the hierarchical association relationship is used to identify the relationship between the multiple display states included in the target element and the user identity level, different display states have different function combinations, the function combination is determined according to the functions in the function set corresponding to the target element, and the user identity level includes at least one of user authority, user level or usage habit type; The displaying of the target element corresponding to the business scenario on the application page based on the attribute information corresponding to the front-end component and the business scenario includes: Obtaining the user identity level of the user; Based on the attribute information corresponding to the front-end component and the business scenario, a display state corresponding to the user identity level in the target element corresponding to the business scenario is displayed on the application page.

7. The method according to claim 5, characterized in that The front-end component includes an internal association relationship, and the internal association relationship is used to identify that a content change of a first sub-element in the target element causes a content change of a second sub-element in the target element. The method further includes: Acquire a triggering operation of the user on the first sub-element; The display form of the first sub-element is switched according to the trigger operation, and the display form of the second sub-element is switched according to the internal association relationship.

8. A front-end component generating device, characterized in that: The device comprises: an acquisition unit, a judgment unit, a determination unit and a generation unit; The acquisition unit is used to acquire a first function set included in a first composite element for a first business scenario, and acquire a second function set included in a second composite element for a second business scenario, wherein each composite element includes at least one basic element, the basic element is a basic element for rendering an application page, and each basic element corresponds to a function; The judging unit is configured to determine a same function subset, a first different function subset, and a second different function subset if the first business scenario and the second business scenario meet a scenario similarity condition, and the first function set and the second function set meet a function similarity condition; The determining unit is configured to determine first attribute information for identifying a presentation form of the first different function subset in the first business scenario, and to determine second attribute information for identifying a presentation form of the second different function subset in the second business scenario; The generation unit is used to generate a front-end component based on the first attribute information, the second attribute information, the same function subset, the first different function subset and the second different function subset, and the front-end component is used to display the first composite element based on the first attribute information in the first business scenario, or to display the second composite element based on the second attribute information in the second business scenario.

9. The device according to claim 8, characterized in that The first composite element includes a plurality of display states, and different display states have different function combinations, and the function combinations are determined according to the functions in the first function set. The device also includes a hierarchical association relationship determination unit, which is used to: Determine a plurality of user identity levels, wherein the user identity levels include at least one of user authority, user level, or usage habit type; determine a hierarchical association relationship between the plurality of display states and the user identity levels; The generating unit is used for: A front-end component is generated according to the hierarchical association relationship, the first attribute information, the second attribute information, the same function subset, the first different function subset and the second different function subset.

10. The device according to claim 8, characterized in that The first composite element includes a first sub-element and a second sub-element, the first sub-element and the second sub-element respectively correspond to different functions in the first function set, and the device further includes an internal association relationship determination unit, which is used to: Determine an internal association relationship between the first sub-element and the second sub-element, where the internal association relationship is used to identify that a content change of the first sub-element causes a content change of the second sub-element; The generating unit is used for: A front-end component is generated according to the internal association relationship, the first attribute information, the second attribute information, the same function subset, the first different function subset and the second different function subset.

11. A front-end component display device, characterized in that: The device comprises: an acquisition unit, a determination unit and a display unit; The acquisition unit is used to acquire a trigger operation of the user, where the trigger operation is used to open an application page of the business system; The determination unit is used to determine the front-end component involved in rendering the application page and the business scenario of the front-end component in the application page, wherein the front-end component is generated based on the front-end component generation method according to any one of claims 1 to 4; The display unit is used to display a target element corresponding to the business scenario on the application page based on the attribute information corresponding to the front-end component and the business scenario, and the target element is one of the first composite element and the second composite element corresponding to the front-end component.

12. The device according to claim 11, characterized in that The front-end component includes a hierarchical association relationship, the hierarchical association relationship is used to identify the relationship between the multiple display states included in the target element and the user identity level, different display states have different function combinations, the function combination is determined according to the functions in the function set corresponding to the target element, and the user identity level includes at least one of user authority, user level or usage habit type; The display unit is used for: Obtaining the user identity level of the user; Based on the attribute information corresponding to the front-end component and the business scenario, the display state corresponding to the user identity level is displayed in the target element corresponding to the business scenario on the application page.

13. The device according to claim 11, characterized in that The front-end component includes an internal association relationship, and the internal association relationship is used to identify that a content change of the first sub-element in the target element causes a content change of the second sub-element in the target element. The device also includes a first switching unit, which is used to: Acquire a triggering operation of the user on the first sub-element; The display form of the first sub-element is switched according to the trigger operation, and the display form of the second sub-element is switched according to the internal association relationship.

14. A computer device, characterized in that: The device comprises a processor and a memory: The memory is used to store program code and transmit the program code to the processor; The processor is used to execute the method described in any one of claims 1 to 4 according to the instructions in the program code, or to execute the method described in any one of claims 5 to 7.

15. A computer-readable storage medium, characterized in that: The computer-readable storage medium is used to store a computer program, and the computer program is used to execute the method according to any one of claims 1 to 4, or execute the method according to any one of claims 5 to 7.

16. A computer program product, characterized in that The computer program product includes computer instructions, which are stored in a computer-readable storage medium; a processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the method described in any one of claims 1 to 4, or executes the method described in any one of claims 5 to 7.

Images