Information processing method for front-end component and related device

Abstract

The invention provides an information processing method for a front-end component and a related device. The method comprises the following steps: acquiring a code file related to a first front-end component; wherein the first front-end component is a front-end component in a front-end component library, and the first front-end component provides at least one target interface; analyzing the code file, and determining interface information of at least one target interface; wherein the interface information describes information related to at least one target interface in the form of key value pairs, the interface information is used for being presented in a front-end component page, and the front-end component page is used for providing use information of front-end components in a front-end component library. According to the method, the interface information of the front-end component can be updated in real time, the maintenance cost is reduced, the accuracy of the displayed content is improved, and the target interface provided by the front-end component can be displayed in a unified manner.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular, to an information processing method, apparatus, electronic device, computer-readable storage medium, and computer program product for front-end components. Background Art

[0002] In the development of an application (APP), it is divided into back-end development and front-end development. Among them, back-end development is responsible for the logic and data management of the server side to ensure the normal operation of the functions of the application, and front-end development is responsible for the user interface and user interaction design of the client side to ensure that users can interact with the application.

[0003] In front-end development, user interfaces are usually built using front-end components. Among them, front-end components can be understood as the basic units for building user interfaces. By combining different front-end components, complex user interfaces that meet the interaction requirements of the application are built.

[0004] Based on a front-end framework, multiple front-end components providing different functions can be built to form a front-end component library. To facilitate front-end developers to quickly use the front-end components in the front-end component library, usually, a front-end component page is built for the front-end component library to present the content related to the front-end components, such as interface information, in the front-end component page.

[0005] In related technologies, the content presented in the front-end component page needs to be maintained separately. For example, the maintainers of the front-end component library need to manually configure the interface information of each front-end component. However, the above maintenance method is extremely error-prone and it is difficult to update the display content in the front-end component page in a timely manner. Summary of the Invention

[0006] This application provides an information processing method for front-end components. This method can achieve real-time update of the interface information of front-end components, facilitating unified display of the target interfaces provided by front-end components. This application also provides the corresponding apparatus, electronic device, computer-readable storage medium, and computer program product for the above method.

[0007] In a first aspect, this application provides an information processing method for front-end components, and the method includes:

[0008] Obtain a code file related to a first front-end component; wherein, the first front-end component is a front-end component in a front-end component library, and the first front-end component provides at least one target interface;

[0009] Parse the code file to determine the interface information of the at least one target interface;

[0010] Among them, the interface information describes information related to the at least one target interface in the form of key-value pairs, and the interface information is used to be presented in the front-end component page, and the front-end component page is used to provide usage information of the front-end components in the front-end component library.

[0011] In a second aspect, the present application provides an information processing device for front-end components, and the device includes:

[0012] An acquisition module, configured to acquire a code file related to a first front-end component; wherein, the first front-end component is a front-end component in a front-end component library, and the first front-end component provides at least one interface;

[0013] A determination module, configured to parse the code file to determine interface information of the at least one interface;

[0014] Among them, the interface information describes information related to the at least one interface in the form of key-value pairs, and the interface information is used to be presented in the front-end component page, and the front-end component page is used to provide usage information of the front-end components in the front-end component library.

[0015] In a third aspect, the present application provides an electronic device, and the electronic device includes a processor and a memory. The processor and the memory communicate with each other. The processor is configured to execute instructions stored in the memory so that the electronic device executes the information processing method for front-end components as described in the first aspect or any implementation manner of the first aspect.

[0016] In a fourth aspect, the present application provides a computer-readable storage medium, and instructions are stored in the computer-readable storage medium, and the instructions instruct the electronic device to execute the information processing method for front-end components as described in the first aspect or any implementation manner of the first aspect.

[0017] In a fifth aspect, the present application provides a computer program product including instructions, and when it runs on an electronic device, it causes the electronic device to execute the information processing method for front-end components as described in the first aspect or any implementation manner of the first aspect.

[0018] Based on the implementation manners provided in the above aspects of the present application, further combinations can be made to provide more implementation manners.

[0019] It can be seen from the above technical solutions that the present application has the following advantages:

[0020] The present application provides a method for processing information of a front-end component. The method first obtains a code file related to a first front-end component, where the first front-end component is a front-end component in a front-end component library, and the first front-end component provides at least one target interface. Then, the code file is parsed to determine the interface information of at least one target interface, where the interface information describes the information related to at least one target interface in the form of key-value pairs, and the interface information is used to be presented on a front-end component page, and the front-end component page is used to provide usage information of the front-end components in the front-end component library.

[0021] In this method, for the front-end components in the front-end component library, by parsing the code files of the front-end components, the interface information of the target interfaces provided by the front-end components is automatically determined. In scenarios where usage information related to the front-end component library is presented (such as the website of the front-end component library), on the one hand, there is no need to manually maintain the interface information of the front-end components, enabling real-time update of the interface information of the front-end components, reducing the maintenance cost, and improving the accuracy of the presented content. On the other hand, since the interface information is in the form of key-value pairs, it is convenient to uniformly display the target interfaces provided by the front-end components. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the embodiments will be briefly introduced below.

[0023] Figure 1 It is a schematic flowchart of a method for processing information of a front-end component provided by an embodiment of the present application;

[0024] Figure 2 It is a schematic flowchart of a method for processing information of a front-end component provided by an embodiment of the present application;

[0025] Figure 3 It is a schematic diagram of a front-end component page provided by an embodiment of the present application;

[0026] Figure 4 It is a schematic structural diagram of an information processing device for a front-end component provided by an embodiment of the present application;

[0027] Figure 5 It is a schematic structural diagram of an electronic device provided by an embodiment of the present application. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0028] The terms "first" and "second" in the embodiments of the present application are only for descriptive purposes, and cannot be understood as indicating or implying relative importance or implicitly specifying the quantity of the indicated technical features. Thus, the features defined with "first" and "second" may explicitly or implicitly include one or more of such features.

[0029] First, some technical terms and application scenarios involved in the embodiments of the present application are introduced.

[0030] The development of an application (APP) can be divided into back-end development and front-end development. Specifically, back-end development is responsible for the logic and data management of the server side to ensure the normal operation of the functions of the application. Usually, back-end developers use back-end programming languages (such as Python, Java, etc.) and database technologies (such as MySQL, etc.) to build and maintain the back end of the application. Front-end development is responsible for the user interface (UI) and user experience (UX) design of the client side to ensure that users can interact with the application. Usually, front-end developers use front-end programming languages (such as HTML, CSS, JavaScript, etc.) to implement the user interaction logic of the application.

[0031] In front-end development, front-end components are usually used to build the user interface. Among them, front-end components can be understood as the basic units for building the user interface. By combining different front-end components, a complex user interface that meets the interaction requirements of the application can be built.

[0032] In front-end development, as an independent functional module, front-end components can be reused. Usually, front-end components include the following parts: a template for defining the HTML structure of the front-end component, styles for defining the CSS styles of the front-end component, and logic for defining the JavaScript logic of the front-end component. By providing reusable and independent front-end components, the duplication and mutual interference of front-end code are reduced, facilitating the maintenance and update of front-end code.

[0033] Front-end components can be built based on different front-end frameworks. For example, the front-end framework can be the Vue framework. Based on a front-end framework, multiple front-end components providing different functions can be built to form a front-end component library. To facilitate front-end developers to quickly use the front-end components in the front-end component library, usually, a front-end component page is built for the front-end component library so that the content related to the front-end components can be presented on the front-end component page. For example, the front-end component page can present the usage method of the front-end component, application programming interface (API) documentation, parameter description, code examples, etc. in the form of a user guide. Among them, the content related to the interface of the front-end component can also be called interface information.

[0034] In the related art, the content presented in the front-end component page needs to be maintained separately. Specifically, the code files related to the front-end components can be stored in one code repository, and the code files related to the content presented in the front-end component page can be stored in another code repository. The two types of code files are independent of each other and are maintained separately. Taking the interface information of the front-end components presented in the front-end component page as an example, the maintainers of the front-end component library manually configure the interface information of each front-end component by viewing the code files of the front-end components.

[0035] However, the above maintenance method has the following problems: First, the above maintenance method relies on the maintainers to manually configure the interface information, which is extremely error-prone and the update is not timely. For the front-end components that are frequently updated, it is difficult to update the display content of the front-end component page in a timely manner. In addition, it is also difficult to unify the display format of the content presented in the front-end component page.

[0036] In view of this, the present application provides a method for processing information of front-end components. The method first obtains a code file related to a first front-end component, where the first front-end component is a front-end component in a front-end component library, and the first front-end component provides at least one target interface. Then, the code file is parsed to determine the interface information of at least one target interface, where the interface information describes the information related to at least one target interface in the form of key-value pairs, and the interface information is used to be presented in the front-end component page, and the front-end component page is used to provide the usage information of the front-end components in the front-end component library.

[0037] In this method, for the front-end components in the front-end component library, by parsing the code files of the front-end components, the interface information of the target interfaces provided by the front-end components is automatically determined. In the scenario of displaying the usage information related to the front-end component library (such as the website of the front-end component library), on the one hand, there is no need for manual maintenance of the interface information of the front-end components, the interface information of the front-end components can be updated in real time, the maintenance cost is reduced, and the accuracy of the display content is improved. On the other hand, since the interface information is in the form of key-value pairs, it is convenient to uniformly display the target interfaces provided by the front-end components.

[0038] To facilitate understanding of the technical solutions provided by the embodiments of the present application, the following will be described with reference to the accompanying drawings. Refer to Figure 1 the flowchart of a method for processing information of front-end components shown below. The method specifically includes:

[0039] S101: Obtain a code file related to a first front-end component.

[0040] Among them, the first front-end component can be a front-end component in the front-end component library. In the embodiments of the present application, in the front-end component page, relevant information of the front-end components in the front-end component library is presented. That is to say, the first front-end component can be understood as any front-end component with information presentation requirements.

[0041] The embodiments of the present application do not limit the front-end framework of the first front-end component. For example, the first front-end component can be built based on the Vue framework. In this case, the first front-end component can also be called a Vue component.

[0042] The code file related to the first front-end component can be understood as the source code of the first front-end component. In different front-end frameworks, the code file related to the first front-end component can include different files. For example, the code file related to the first front-end component can include a component file and a type definition file. Among them, the component file can include code for describing the component. In the Vue framework, the component file (.vue file) can be understood as a single file component (SFC) including the template, logic, and style of the first front-end component. The type definition file can include code for defining interfaces. In the Vue framework, the type definition file (type.ts file) can be understood as a file for defining TypeScript types (i.e., interfaces), and by exporting the defined interfaces, the interfaces can be used in other code files.

[0043] In the embodiments of the present application, the first front-end component provides at least one target interface. In other words, the target interface can be understood as an interface provided by the first front-end component for external calling and interaction.

[0044] In some embodiments, the target interface can include interfaces of at least one of the following interface types: a target interface for passing data to a sub-front-end component, a target interface for passing a message to a parent front-end component, a target interface for inserting content in a front-end component, and a target interface for allowing a parent front-end component to access interface attributes.

[0045] Among them, interfaces of different interface types can be used to define different types of front-end components. For example, in the Vue framework, the target interface for passing data to a sub-front-end component can be used to define the Props type of the front-end component. The target interface for passing data to a sub-front-end component is used to define the way for the parent front-end component to pass data to the sub-front-end component. By providing the target interface for passing data to a sub-front-end component, data communication between front-end components is realized, enabling the front-end component to receive external data and render the user interface or perform corresponding logical operations based on the received external data.

[0046] The target interface for passing messages to the parent front-end component can be used to define the emit type of the front-end component. The target interface for passing messages to the parent front-end component is used to define the way for the child front-end component to pass messages to the parent front-end component. By providing the target interface for passing messages to the parent front-end component, the behavioral communication between front-end components is realized, and the child front-end component can notify the parent front-end component of the behaviors occurring internally so that the parent front-end component can make corresponding responses.

[0047] The target interface for inserting content into the front-end component can be used to define the slots type of the front-end component. The target interface for inserting content into the front-end component is used to allow the parent front-end component to insert content into specific positions of the child front-end component. By providing the target interface for inserting content into the front-end component, the template of the front-end component becomes more flexible, and the parent front-end component can insert content into the child front-end component according to different requirements, realizing the reuse of the front-end component.

[0048] The target interface for allowing the parent front-end component to access interface properties can be used to define the expose type of the front-end component. The target interface for allowing the parent front-end component to access interface properties is used to allow specific properties or methods to be displayed on the front-end component. By providing the target interface for allowing the parent front-end component to access interface properties, the parent front-end component can access the above specific properties or methods through template references.

[0049] S102: Parse the code file to determine the interface information of at least one target interface.

[0050] In the embodiment of the present application, the interface information of the target interface provided by the first front-end component is automatically determined by parsing the code file. Among them, the interface information is used to be presented in the front-end component page, and the front-end component page is used to provide the usage information of the front-end components in the front-end component library.

[0051] That is to say, by providing the front-end component page, when developers use the front-end components in the front-end component library, they can quickly understand the usage information of the front-end components in the front-end component library by viewing the content displayed on the front-end component page. Since when developing the user interface or user interaction by using the front-end components in the front-end component library, it is usually necessary to use the interfaces provided by the front-end components, the content displayed on the front-end component page includes the interface information.

[0052] In the embodiments of the present application, the interface information describes the information related to at least one target interface in the form of key-value pairs. Among them, a key-value pair consists of a key and a value. There is a mapping relationship between the key and the value in a key-value pair. The key represents the index of the element, and the value represents the numerical value of the element. By storing the interface information in the form of key-value pairs, only the display template of the front-end component page needs to be configured, and then the interface information is filled into the display template, so that the interface information can be presented in a unified format on the front-end component page without other adjustments. At the same time, it is also easier for developers to understand the interface information.

[0053] The key-value pairs in the interface information can also have a nested relationship, that is, the value corresponding to the key of a certain element can include other key-value pairs. Through the hierarchical interface information, complex interface information can be clearly represented. For example, it represents multiple interface attributes under a target interface, which is convenient for presenting the hierarchical relationship between interface information on the front-end component page.

[0054] The embodiments of the present application do not limit the format of the interface information. For example, the interface information can be a lightweight data exchange format (javascript object notation, JSON). Since the JSON format is compatible with multiple programming languages and platform devices, the interface information in JSON format has good generality.

[0055] In some possible implementation manners, the process of parsing the code file can be completed by a code parsing tool. For example, parsing rules (such as field names related to interface information, etc.) and output format rules (such as key-value pair format) are pre-configured in the code parsing tool. The code file related to the first front-end component is input into the code parsing tool, and the interface information of the target interface output by the code parsing tool is received.

[0056] In some embodiments, considering that the target interface can have different interface types, therefore, on the front-end component page, the display can be performed separately according to the interface types. Specifically, determine the interface types of at least one target interface, classify the interface information of at least one target interface according to the interface types of at least one target interface, and determine the interface information corresponding to each interface type, so as to present the interface information corresponding to each interface type on the front-end component page.

[0057] The embodiments of this application do not limit the method for determining the interface type of the target interface. For example, the front-end component library can stipulate the method for introducing interfaces of a certain interface type. In specific implementation, in the component file of the first front-end component, for the target interface used to define the props type, the defineProps method can be used to introduce the target interface. In this way, by identifying the "defineProps" code in the component file of the first front-end component, the interface type of the target interface can be determined to be the props type.

[0058] By classifying the interface information based on the interface type, in the front-end component page, the interface information can be presented category by category according to the interface type. In this way, when developers need to use an interface of a certain interface type, they can directly view it correspondingly without having to perform operations such as searching and finding, which increases the intuitiveness of the front-end component page and improves the efficiency of developers using the front-end component library.

[0059] In some other embodiments, since the interface information of the target interface is in the form of key-value pairs, the interface information of the target interface is convenient for splitting and combining, allowing maintenance personnel to perform customized configuration on the content displayed in the front-end component page. Specifically, a selection operation for the interface information of at least one target interface is received to present the target key-value pair indicated by the selection operation in the front-end component page, where the selection operation is used to select the target key-value pair from multiple key-value pairs included in the interface information.

[0060] That is to say, the maintenance personnel can select the target key-value pair that needs to be displayed in the front-end component page from multiple key-value pairs representing the interface information of the target interface based on the actual display requirements. In this way, it supports the maintenance personnel to flexibly select the content displayed in the front-end component page and achieve customized display.

[0061] In this method, for the front-end components in the front-end component library, the interface information of the target interfaces provided by the front-end components is automatically determined by parsing the code files of the front-end components. In the scenario of displaying usage information related to the front-end component library (such as the website of the front-end component library), on the one hand, there is no need for manual maintenance of the interface information of the front-end components, which realizes real-time update of the interface information of the front-end components, reduces the maintenance cost, and improves the accuracy of the displayed content. On the other hand, since the interface information is in the form of key-value pairs, it is convenient to uniformly display the target interfaces provided by the front-end components.

[0062] The foregoing introduced the information processing method for front-end components provided by this application. Next, specific interface information will be described separately.

[0063] See Figure 2The flowchart of an information processing method for front - end components is shown. In the embodiments of the present application, the interface information of at least one target interface may include at least one of the following: the interface definition information of at least one target interface, the default value information of the interface attributes of at least one target interface, and the code content for defining at least one target interface.

[0064] First, taking the interface information of the target interface including the interface definition information of the target interface as an example, the process of determining the interface information of at least one interface is introduced.

[0065] Specifically, parse the type definition file to determine the interface definition information of multiple candidate interfaces appearing in the type definition file, and parse the component file to determine the interface identifier of the target interface appearing in the component file. Match the interface definition information with the interface identifier of the target interface, and determine the interface definition information that hits the interface identifier in the interface definition information as the interface information of at least one target interface.

[0066] Among them, the interface definition information describes the information related to multiple candidate interfaces in the form of key - value pairs, and the interface definition information can be understood as the information used to define the interface in the type definition file.

[0067] It can be understood that in the type definition file of the first front - end component, all interfaces related to the first front - end component are defined. However, in the component file of the first front - end component, it is not necessarily the case that all the interfaces defined in the type definition file are introduced. Therefore, match the candidate interfaces defined in the type definition file with the target interfaces introduced in the component file to determine the target interfaces that appear in both the type definition file and the component file, and then determine the interface definition information of the target interfaces.

[0068] In some possible implementation manners, as shown in Figure 2 the type definition file may include code content and annotation information for explaining the interface or interface attributes, and the annotation information is written in the target annotation format. In this case, the interface definition information may include the information parsed from the code content and the information parsed from the annotation information.

[0069] Specifically, parse the code content of the type definition file to determine at least one of the following: the interface identifier of the candidate interface, the native type of the candidate interface in the programming language, the field name of the interface attributes of the candidate interface, and the field type value of the interface attributes of the candidate interface.

[0070] Among them, the interface identifier of the candidate interface can be the name of the candidate interface. Taking the Vue framework as an example, the interface identifier of the candidate interface can be the TypeScript type name, and the native type of the candidate interface in the programming language can be the TypeScript type.

[0071] Parse the annotation information of the type definition file to determine at least one of the following: the first annotation information for describing the function of the interface or interface attribute, the second annotation information for describing the interface parameters, the third annotation information for describing the interface return value, and the fourth annotation information for describing whether the interface allows two-way binding.

[0072] Generally, the code file related to the first front-end component does not include the code content for describing the interface function, interface parameters, interface return value, and whether the interface allows two-way binding. Therefore, in the embodiments of the present application, by adding annotation information to the type definition file, the above content is supplemented. Since the annotation information is written in the target annotation format, when parsing the type definition file, only the parsing rule for indicating the parsing of the annotation information based on the target annotation format needs to be configured in the code parsing tool, and the above content can be automatically extracted from the type definition file to enrich the content of the interface information.

[0073] Next, taking the interface information of the target interface including the default value information of the interface attributes of the target interface as an example, the process of determining the interface information of at least one interface is introduced.

[0074] Specifically, parse the code content in the component file that represents the default value of the interface parameter to determine the field names and corresponding default values of the interface attributes of at least one target interface, and generate the interface information of at least one target interface according to the field names and corresponding default values of the interface attributes.

[0075] Since the component file includes the code content for indicating the default value of the interface attribute, by parsing the code content in the component file that represents the default value of the interface parameter, the field names of the interface attributes are extracted, and the default values of the interface attributes are extracted. Using the field name as the key and the default value as the value, a key-value pair of the default value information of the interface attribute is formed. In this way, when developers use the target interface, they can directly view the default values of the interface attributes in the target interface on the front-end component page, realizing rapid configuration.

[0076] Finally, taking the interface information of the target interface including the code content for defining at least one target interface as an example, the process of determining the interface information of at least one interface is introduced.

[0077] Specifically, determine the interface identifier of at least one target interface. For each target interface among the at least one target interface, perform the following steps: Parse the type definition file to determine the code content for defining the target interface, and based on the interface identifier of the target interface and the code content for defining the target interface, determine the interface information of the target interface.

[0078] Considering that developers often need to know how a target interface is defined when using it, by parsing the type definition file, determine the code content for defining the target interface. Use the interface identifier as the key and the code content for defining the target interface as the value to form key-value pairs of the code content for defining at least one target interface. In this way, when developers use the target interface, they do not need to manually search for the code content in the type definition file and can directly view how the target interface is defined on the front-end component page, achieving quick usage.

[0079] For ease of understanding, the following uses a specific example to illustrate the overall process of information processing for front-end components provided in this application.

[0080] In some embodiments, the target annotation format of the annotation information can be as follows:

[0081]

[0082]

[0083] That is, write the annotation information for describing the interface function in the way of "@cn", write the annotation information for describing the interface parameters in the way of "@param", write the annotation information for describing the interface return value in the way of "@return", and write the annotation information for describing whether the interface allows two-way binding in the way of "@vModel".

[0084] In this case, the type definition file of the first front-end component may include the code content and annotation content for defining the target interfaces of the props type, emits type, slots type, and expose type:

[0085]

[0086]

[0087] Correspondingly, the component file of the first front-end component may include the code content for introducing the target interfaces of the props type, emits type, slots type, and expose type:

[0088]

[0089] In some embodiments, the component file of the first front-end component may include the following content:

[0090]

[0091]

[0092] By parsing the component file, determine the interface identifiers of the target interfaces that appear in the component file: IOcTestComProps, IOcTestComEmits, IOcTestComSlots, and IOcTestComExpose.

[0093] The type definition file of the first front-end component may include the following content:

[0094]

[0095]

[0096] By parsing the type definition file, the interface definition information of multiple candidate interfaces that appear in the type definition file is determined as follows:

[0097]

[0098]

[0099] The above interface definition information is written in JSON format, including the interface identifier of the candidate interface ("type": "interface"), the native type of the candidate interface in the programming language ("name": "IOcCascaderSlots"), the field name of the interface property of the candidate interface (for example, "name": "exhibitionHeader"), the field type value of the interface property of the candidate interface (for example, "typeValue": "exhibitionHeader():unknown;"), the first annotation information for describing the interface function (for example, "@cn": "Panel selection mode, covering the content of the selected list header"), and the second annotation information for describing the interface parameters (for example, "@param": []). Since the above type definition file does not include the annotation information for describing the interface return value and the annotation information for describing whether the interface allows two-way binding, the interface definition information does not include the third annotation information and the fourth annotation information.

[0100] In some embodiments, the code content for characterizing the default value of the interface parameter in the component file of the first front-end component may include the following content:

[0101]

[0102]

[0103] By parsing the code content in the component file that represents the default values of interface parameters, interface information including the field names and corresponding default values of each interface attribute of at least one target interface is determined as follows:

[0104]

[0105]

[0106] The interface information of the above target interface is written in JSON format. For example, for "infoMsg": "undefined", the field name of the interface attribute is "infoMsg" and the default value is "undefined".

[0107] In some embodiments, the code content in the type definition file of the first front-end component that represents the default values of interface parameters may include the following content:

[0108] export type TOcButtonSize = "xs" | "sm" | "md" | "lg" | "xl";

[0109] export type TOcButtonVariant = "dashed" | "fill" | "text" | "link" | "block" | Array<"fill" | "text" | "link" | "dashed" | "block">;

[0110] export type TOcButtonColorScheme = "default" | "primary" | "danger" | "warning" | "success";

[0111] export type TOcButtonColorType = "default" | "inherit";

[0112] export type TOcButtonShape = "rect" | "circle" | "square" | "round";

[0113] By parsing the code content in the type definition file that represents the default values of interface parameters, interface information including the code content for defining the target interface is determined as follows:

[0114]

[0115]

[0116] The interface information of the above target interface is written in JSON format. For example, for TOcButtonSize: 'export type TOcButtonSize = "xs" | "sm" | "md" | "lg" | "xl";\n', the interface identifier of the target interface is "TOcButtonSize", and the code content used to define the target interface is 'export type TOcButtonSize = "xs" | "sm" | "md" | "lg" | "xl";\n'.

[0117] In some embodiments, the interface information obtained by integrating the above parsing code file is formed into the final interface information described in key-value pairs, as follows:

[0118]

[0119]

[0120]

[0121] The above interface information is classified according to the interface type, so that the interface information of the target interface includes the interface information of the props type, emits type, slots type, and expose type of the first front-end component respectively. In the interface information, it can specifically include the interface identifier of the target interface (i.e., the TypeScript type value, such as "name": "IOcButtonProps"), the field name of the interface property (such as "name": "checked"), the comment information used to describe the function of the interface property (such as "cn": "whether the button is selected"), the field type value of the interface property (such as "typeValue": "boolean"), the default value of the interface property (such as "defaultValue": "false"), the comment information used to describe the interface parameters (such as "params": []), the comment information used to describe the interface return value (such as "return": ""), and the fourth comment information used to describe whether the interface allows two-way binding (such as "vModel": false).

[0122] In some embodiments, based on the interface information of the target interface, the interface information is displayed on the front-end component page. See Figure 3A schematic diagram of a front - end component page is shown. In the front - end component page 300, the interface information of the target interface of the first front - end component is presented.

[0123] Specifically, the front - end component page 300 classifies and presents the interface information according to the interface type. For the target interface of the props type, it presents the field name of the interface attribute, the comment information for describing the function of the interface attribute, the default value of the interface attribute, and the field type value of the interface attribute. For the target interfaces of the emits type and the slots type, it presents the field name of the interface attribute, the comment information for describing the function of the interface attribute, and the field type value of the interface attribute. Moreover, the front - end component page 300 also presents the code content for defining the target interface of the first front - end component.

[0124] As described above in conjunction with Figures 1 to 3 the information - processing method for front - end components provided by the embodiments of the present application has been introduced in detail. Next, the devices and equipment provided by the embodiments of the present application will be introduced with reference to the accompanying drawings.

[0125] See Figure 4 the structural schematic diagram of the information - processing device for front - end components shown. The device 40 includes:

[0126] An acquisition module 401, configured to acquire a code file related to the first front - end component; wherein, the first front - end component is a front - end component in a front - end component library, and the first front - end component provides at least one interface;

[0127] A determination module 402, configured to parse the code file to determine the interface information of the at least one interface;

[0128] wherein, the interface information describes the information related to the at least one interface in the form of key - value pairs, and the interface information is used to be presented in a front - end component page, and the front - end component page is used to provide usage information of the front - end components in the front - end component library.

[0129] In some possible implementation manners, the interface information of the at least one target interface includes at least one of the following: the interface definition information of the at least one target interface, the default - value information of the interface attributes of the at least one target interface, and the code content for defining the at least one target interface.

[0130] In some possible implementation manners, the code file includes a component file and a type - definition file. The component file includes code for describing a component, and the type - definition file includes code for defining an interface; the determination module 402 is specifically configured to:

[0131] Parse the type definition file to determine the interface definition information of multiple candidate interfaces appearing in the type definition file, and parse the component file to determine the interface identifier of the target interface in the component file; the interface definition information describes the information related to the multiple candidate interfaces in the form of key-value pairs;

[0132] Match the interface definition information with the interface identifier of the target interface, and determine the interface definition information that hits the interface identifier in the interface definition information as the interface information of the at least one target interface.

[0133] In some possible implementation manners, the type definition file includes code content and annotation information for explaining an interface or interface attributes, and the annotation information is written in a target annotation format; specifically, the determining module 402 is configured to:

[0134] Parse the code content of the type definition file to determine at least one of the following: the interface identifier of the candidate interface, the native type of the candidate interface in the programming language, the field name of the interface attributes of the candidate interface, and the field type value of the interface attributes of the candidate interface; and

[0135] Parse the annotation information of the type definition file to determine at least one of the following: the first annotation information for describing the function of the interface or interface attributes, the second annotation information for describing the interface parameters, the third annotation information for describing the interface return value, and the fourth annotation information for describing whether the interface allows two-way binding.

[0136] In some possible implementation manners, the code file includes a component file; specifically, the determining module 402 is configured to:

[0137] Parse the code content for characterizing the default values of the interface parameters in the component file to determine the field names and corresponding default values of the respective interface attributes of the at least one target interface;

[0138] Generate the interface information of the at least one target interface according to the field names and corresponding default values of the respective interface attributes.

[0139] In some possible implementation manners, the code file includes a type definition file; specifically, the determining module 402 is configured to:

[0140] Determine the interface identifier of the at least one target interface;

[0141] For each of the at least one target interface, perform the following steps: Parse the type definition file to determine the code content for defining the target interface; Based on the interface identifier of the target interface and the code content for defining the target interface, determine the interface information of the target interface.

[0142] In some possible implementation manners, the target interface includes an interface of at least one of the following interface types: a target interface for passing data to a sub-front-end component, a target interface for passing a message to a parent front-end component, a target interface for inserting content in a front-end component, and a target interface for allowing a parent front-end component to access interface attributes.

[0143] In some possible implementation manners, the at least one target interface includes interfaces of multiple interface types, and the determining module 402 is further configured to:

[0144] Determine the interface types of the at least one target interface;

[0145] Classify the interface information of the at least one target interface according to the interface types of the at least one target interface, and determine the interface information corresponding to each interface type, so as to present the interface information corresponding to each interface type on the front-end component page.

[0146] In some possible implementation manners, the determining module 402 is further configured to:

[0147] Receive a selection operation on the interface information of the at least one target interface, so as to present the target key-value pair indicated by the selection operation on the front-end component page; wherein, the selection operation is used to select the target key-value pair from multiple key-value pairs included in the interface information.

[0148] The information processing device 40 for a front-end component according to an embodiment of the present application may correspondingly execute the method described in the embodiment of the present application, and the above and other operations and / or functions of each module / unit of the information processing device 40 for a front-end component are respectively for implementing Figure 1 The corresponding processes of the respective methods in the illustrated embodiments, and for the sake of brevity, will not be described in detail herein.

[0149] An embodiment of the present application further provides an electronic device. The electronic device is specifically configured to implement the functions of the information processing device 40 for a front-end component in the embodiment as Figure 4 illustrated.

[0150] Figure 5 A structural schematic diagram of an electronic device 500 is provided, as Figure 5As shown, the electronic device 500 includes a bus 501, a processor 502, a communication interface 503, and a memory 504. The processor 502, the memory 504, and the communication interface 503 communicate with each other via the bus 501.

[0151] The bus 501 can be a peripheral component interconnect (PCI) bus, an extended industry standard architecture (EISA) bus, or the like. The bus can be divided into an address bus, a data bus, a control bus, etc. For the sake of simplicity of representation, Figure 5 it is represented by only one thick line in the figure, but this does not mean that there is only one bus or one type of bus.

[0152] The processor 502 can be any one or more of a central processing unit (CPU), a graphics processing unit (GPU), a microprocessor (MP), or a digital signal processor (DSP).

[0153] The communication interface 503 is used for external communication. For example, the communication interface 503 can be used for communication with a terminal.

[0154] The memory 504 can include volatile memory, such as random access memory (RAM). The memory 504 can also include non-volatile memory, such as read-only memory (ROM), flash memory, a hard disk drive (HDD), or a solid state drive (SSD).

[0155] The memory 504 stores executable code, and the processor 502 executes the executable code to perform the aforementioned information processing method for the front-end components.

[0156] Specifically, in the case of implementing Figure 4 the embodiments shown, and Figure 4 when each module or unit of the information processing device 40 for the front-end components described in the embodiments is implemented by software, execute Figure 4The software or program code required for the functions of each module / unit in [the device] can be partially or fully stored in the memory 504. The processor 502 executes the program code corresponding to each unit stored in the memory 504 to execute the information processing method for the front-end component described above.

[0157] An embodiment of the present application also provides a computer-readable storage medium. The computer-readable storage medium can be any available medium that a computing device can store or a data storage device such as a data center that contains one or more available media. The available medium can be a magnetic medium (such as a floppy disk, hard disk, magnetic tape), an optical medium (such as a DVD), or a semiconductor medium (such as a solid-state drive), etc. The computer-readable storage medium includes instructions that direct the computing device to execute the information processing method for the front-end component applied to the information processing device 40 for the front-end component described above.

[0158] An embodiment of the present application also provides a computer program product, which includes one or more computer instructions. When the computer instructions are loaded and executed on a computing device, the processes or functions according to the embodiments of the present application are fully or partially generated.

[0159] The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from a website, computer, or data center to another website, computer, or data center by wire (such as coaxial cable, optical fiber, digital subscriber line (DSL)) or wirelessly (such as infrared, wireless, microwave, etc.).

[0160] When the computer program product is executed by a computer, the computer executes any one of the information processing methods for the front-end component described above. The computer program product can be a software installation package. In the case where any one of the information processing methods for the front-end component described above needs to be used, the computer program product can be downloaded and executed on the computer.

[0161] The flowcharts and block diagrams in the accompanying drawings illustrate the possible architectures, functions, and operations of systems, methods, and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagram may represent a module, a segment of a program, or a part of code that contains one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks may occur in a different order than that marked in the accompanying drawings. For example, two consecutive blocks shown may actually be executed substantially in parallel, and they may sometimes be executed in the reverse order, depending on the functions involved. It should also be noted that each block in the block diagram and / or flowchart, as well as combinations of blocks in the block diagram and / or flowchart, can be implemented by a dedicated hardware-based system that performs the specified functions or operations, or by a combination of dedicated hardware and computer instructions.

[0162] The units involved in the embodiments described in the present application can be implemented in software or in hardware. Among them, the name of the unit / module does not, in some cases, constitute a limitation on the unit itself.

[0163] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that can be used include: Field Programmable Gate Arrays (FPGA), Application Specific Integrated Circuits (ASIC), Application Specific Standard Products (ASSP), Systems on Chip (SOC), Complex Programmable Logic Devices (CPLD), and so on.

[0164] In the context of the embodiments of the present application, a machine-readable medium can be a tangible medium that can contain or store a program for use by or in connection with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer disk, a hard disk, a Random Access Memory (RAM), a Read-Only Memory (ROM), an Erasable Programmable Read-Only Memory (EPROM or Flash Memory), an optical fiber, a portable Compact Disc Read-Only Memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0165] It should be noted that the embodiments in this specification are described in a progressive manner. Each embodiment focuses on the differences from other embodiments. For the same or similar parts among the embodiments, reference can be made to each other. For the systems or devices disclosed in the embodiments, since they correspond to the methods disclosed in the embodiments, the description is relatively simple. For related parts, reference can be made to the description in the method part.

[0166] It should be understood that in this application, "at least one (item)" means one or more, and "a plurality" means two or more. "And / or" is used to describe the association relationship of associated objects, indicating that three relationships can exist. For example, "A and / or B" can mean: only A exists, only B exists, and both A and B exist at the same time. Among them, A and B can be singular or plural. The character " / " generally means that the associated objects before and after are in an "or" relationship. "At least one (one) of the following" or its similar expressions refer to any combination of these items, including any combination of single item (one) or plural items (ones). For example, at least one (one) of a, b, or c can mean: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, c can be single or multiple.

[0167] It should also be noted that in this article, relational terms such as first and second are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variant thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements not only includes those elements, but also includes other elements not expressly listed, or also includes elements inherent to such process, method, article or device. Without further limitation, an element defined by the statement "including a..." does not exclude the existence of additional identical elements in the process, method, article or device including the said element.

[0168] The steps of the methods or algorithms described in combination with the embodiments disclosed in this article can be directly implemented by hardware, software modules executed by a processor, or a combination of both. The software module can be placed in a random access memory (RAM), internal memory, read-only memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, register, hard disk, removable disk, CD-ROM, or any other form of storage medium well-known in the technical field.

[0169] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein can be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but rather to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. An information processing method for front-end components, characterized in that, The method includes: Obtaining a code file related to a first front-end component; wherein, the first front-end component is a front-end component in a front-end component library, and the first front-end component provides at least one target interface; Parsing the code file to determine interface information of the at least one target interface; Wherein, the interface information describes information related to the at least one target interface in the form of key-value pairs, and the interface information is used to be presented in a front-end component page, and the front-end component page is used to provide usage information of the front-end components in the front-end component library.

2. The method according to claim 1, characterized in that, The interface information of the at least one target interface includes at least one of the following: interface definition information of the at least one target interface, default value information of interface attributes of the at least one target interface, and code content for defining the at least one target interface.

3. The method according to claim 1, wherein The code file includes a component file and a type definition file, the component file includes code for describing a component, and the type definition file includes code for defining an interface; The parsing the code file to determine interface information of the at least one target interface includes: Parsing the type definition file to determine interface definition information of multiple candidate interfaces appearing in the type definition file, and parsing the component file to determine an interface identifier of a target interface appearing in the component file; the interface definition information describes information related to the multiple candidate interfaces in the form of key-value pairs; Matching the interface definition information with the interface identifier of the target interface, and determining the interface definition information that hits the interface identifier in the interface definition information as the interface information of the at least one target interface.

4. The method according to claim 3, characterized in that, The type definition file includes code content and annotation information for explaining an interface or interface attributes, and the annotation information is written in a target annotation format; The parsing the type definition file to determine interface definition information of multiple candidate interfaces appearing in the type definition file includes: Parsing the code content of the type definition file to determine at least one of the following: an interface identifier of a candidate interface, a native type of the candidate interface in a programming language, a field name of an interface attribute of the candidate interface, and a field type value of the interface attribute of the candidate interface; and Parsing the annotation information of the type definition file to determine at least one of the following: first annotation information for describing the function of an interface or interface attributes, second annotation information for describing interface parameters, third annotation information for describing interface return values, and fourth annotation information for describing whether an interface allows two-way binding.

5. The method according to claim 1, characterized in that The code file includes a component file; the parsing the code file to determine interface information of the at least one target interface includes: Parsing the code content for characterizing default values of interface parameters in the component file to determine field names and corresponding default values of each interface attribute of the at least one target interface; Generating interface information of the at least one target interface according to the field names and corresponding default values of each interface attribute.

6. The method according to claim 1, wherein The code file includes a type definition file; parsing the code file to determine interface information of the at least one target interface includes: Determining an interface identifier of the at least one target interface; For each target interface among the at least one target interface, perform the following steps: parse the type definition file to determine code content for defining this target interface; determine interface information of this target interface according to the interface identifier of this target interface and the code content for defining this target interface.

7. The method according to claim 1, characterized in that, The target interface includes interfaces of at least one of the following interface types: a target interface for passing data to a sub-front-end component, a target interface for passing a message to a parent front-end component, a target interface for inserting content in a front-end component, and a target interface for allowing a parent front-end component to access interface attributes.

8. The method according to any one of claims 1 to 7, characterized in that, The at least one target interface includes interfaces of multiple interface types. After parsing the code file to determine interface information of the at least one target interface, the method further includes: Determining the interface type of the at least one target interface; Classifying the interface information of the at least one target interface according to the interface type of the at least one target interface to determine interface information corresponding to each interface type, so as to present the interface information corresponding to each interface type on a front-end component page.

9. The method according to any one of claims 1 to 7, characterized in that After parsing the code file to determine interface information of the at least one target interface, the method further includes: Receiving a selection operation on the interface information of the at least one target interface to present a target key-value pair indicated by the selection operation on the front-end component page; wherein, the selection operation is used to select the target key-value pair from multiple key-value pairs included in the interface information.

10. An information processing device for front-end components, characterized in that, The apparatus includes: An acquisition module, configured to acquire a code file related to a first front-end component; wherein, the first front-end component is a front-end component in a front-end component library, and the first front-end component provides at least one interface; A determination module, configured to parse the code file to determine interface information of the at least one interface; Wherein, the interface information describes information related to the at least one interface in the form of key-value pairs, and the interface information is used to be presented on a front-end component page, and the front-end component page is used to provide usage information of the front-end components in the front-end component library.

11. An electronic device, characterized in that, The electronic device includes a processor and a memory; The processor is configured to execute instructions stored in the memory, so that the electronic device executes the method according to any one of claims 1 to 9.

12. A computer-readable storage medium, characterized in that, Including instructions, the instructions instructing the electronic device to execute the method according to any one of claims 1 to 9.

13. A computer program product, characterized in that, The computer program product includes computer-readable instructions for implementing the method according to any one of claims 1 to 9.

Images