Code file format conversion method and device, server, medium and product
By using TypeScript format class code files, the problem of increased code volume caused by non-mainstream frameworks in older projects was solved, enabling efficient page function development.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- CHINA UNITED NETWORK COMM GRP CO LTD
- Filing Date
- 2024-12-11
- Publication Date
- 2026-06-19
Smart Images
Figure CN122240100A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of front-end technology, and in particular to a method, apparatus, server, medium and product for converting code file formats. Background Technology
[0002] In the process of front-end development, when dealing with the secondary development of old projects, it is necessary to implement new page functions without breaking the original code.
[0003] Currently, existing technologies utilize the frameworks used in older projects to develop new page features. However, when the framework used in an older project is not a mainstream framework, the amount of code involved increases, leading to increased development time and difficulty, thus impacting development efficiency. Summary of the Invention
[0004] The code file format conversion method, apparatus, server, medium, and product provided in this application are intended to improve development efficiency.
[0005] In a first aspect, embodiments of this application provide a method for converting the format of a code file, comprising: obtaining page functional requirement data of a target project; creating a TypeScript format class code file, wherein the class code file includes a Document Object Model (DOM) element creation function, a child element setting function, and an attribute setting function; generating a TypeScript format page functional code file based on the page functional requirement data; wherein the page functional code file includes a page rendering method; calling the page rendering method when instantiating the TypeScript format page functional code file; and calling the DOM element creation function based on the parameters in the page rendering method; wherein the parameters in the page rendering method include tag name parameters, child element list parameters, and attribute mapping pairs. The code snippet describes a process involving several steps: First, it calls a DOM element creation function to create a DOM element of the type corresponding to the tag name parameter, thus obtaining DOM element data. Second, it calls a child element setting function based on the DOM element data and the child element list parameter to obtain child element data. Third, it calls an attribute setting function based on the DOM element data and the attribute mapping object parameter to obtain attribute data. Fourth, it packages TypeScript format class code files and TypeScript format page function code files according to a pre-set configuration file, converting them into a file with a preset code format. Finally, it deploys this file to the target project, enabling the target project to render its page functions based on the DOM element data, child element data, and attribute data, thus displaying the page functionality.
[0006] In one possible implementation, based on the DOM element data and the child element list parameter, a child element setting function is called to obtain the child element data, including: determining whether the child element list parameter is empty; if not empty, traversing each child element in the child element list parameter; and obtaining the data of each child element according to its type to obtain the child element data.
[0007] In one possible implementation, the method further includes: if any child element is of type array, then the child element setting function is called repeatedly to obtain the child element data of any child element.
[0008] In one possible implementation, the property setting function is called based on the DOM element data and the property mapping object parameters to obtain the property data, including: determining whether the property mapping object is empty; if it is not empty, traversing all keys in the property mapping object; and obtaining the property data corresponding to each key according to the type of each key to obtain all property data.
[0009] In one possible implementation, the pre-configured configuration file includes: a code plugin, an input file path, an output file format, and an output file path; correspondingly, the method further includes: creating a blank configuration file; performing the following steps in the blank configuration file to complete the configuration file setup and obtain the configuration file; importing the code plugin; setting the path of the TypeScript format page function code file as the input file path; setting the preset code format as the output file format; and setting the path of the file with the preset code format as the output file path.
[0010] Secondly, embodiments of this application provide a code file format conversion apparatus, comprising:
[0011] The acquisition module is used to acquire page functionality requirements data for the target project.
[0012] The first creation module is used to create a TypeScript format class code file, which includes functions for creating DOM elements, setting child elements, and setting attributes.
[0013] The generation module is used to generate TypeScript format page function code files based on page function requirement data; the page function code files include page rendering methods;
[0014] The first calling module is used to call the page rendering method when instantiating the TypeScript format page function code file;
[0015] The second calling module is used to call the DOM element creation function based on the parameters in the page rendering method; the parameters in the page rendering method include tag name parameters, child element list parameters, and attribute mapping object parameters;
[0016] The second creation module is used to create DOM elements of the type corresponding to the tag name parameter by calling the DOM element creation function, so as to obtain DOM element data;
[0017] The third calling module is used to call the child element setting function and obtain the child element data based on the DOM element data and the child element list parameters;
[0018] The fourth calling module is used to call the property setting function and obtain the property data based on the DOM element data and the property mapping object parameters;
[0019] The packaging module is used to package TypeScript format class code files and TypeScript format page function code files according to a pre-set configuration file, so as to convert them into a file with a preset code format;
[0020] The deployment module is used to deploy files with a preset code format to the target project. This allows the target project to render the page functionality based on DOM element data, child element data, and attribute data, thus displaying the page's features.
[0021] In one possible implementation, the third calling module is used to determine whether the sub-element list parameter is empty; if it is not empty, it iterates through each sub-element in the sub-element list parameter; and obtains the data of each sub-element according to the type of each sub-element to obtain the sub-element data.
[0022] Thirdly, embodiments of this application provide a server, including: a memory and a processor;
[0023] The memory stores computer-executed instructions;
[0024] The processor executes computer execution instructions stored in the memory, causing the processor to perform the first aspect and / or various possible implementations of the first aspect as described above.
[0025] Fourthly, embodiments of this application provide a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, are used to implement the first aspect and / or various possible implementations of the first aspect.
[0026] Fifthly, embodiments of this application provide a computer program product, including a computer program that, when executed by a processor, implements the first aspect and / or various possible implementations of the first aspect.
[0027] The code file format conversion method, apparatus, server, medium, and product provided in this application create TypeScript format class code files and TypeScript format page function code files. The page function code files are processed using DOM element creation functions, child element setting functions, and attribute setting functions in the class code files to obtain DOM element data, child element data, and attribute data. The TypeScript format class code files and page function code files are converted into files of a preset code format according to a configuration file. The files in the preset code format are deployed to a target project, and the target project displays page functions based on the DOM element data, child element data, and attribute data. By using TypeScript format class code files and TypeScript format page function code files, page functions can be implemented with a small amount of code, reducing development time and difficulty, thereby improving development efficiency. Attached Figure Description
[0028] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.
[0029] Figure 1 This is a schematic diagram of the server structure provided in an embodiment of this application;
[0030] Figure 2 A flowchart illustrating the code file format conversion method provided in this application embodiment;
[0031] Figure 3 A schematic diagram of the structure of the code file format conversion device provided in the embodiments of this application;
[0032] Figure 4 This is a schematic diagram of the hardware structure of the server provided in an embodiment of this application.
[0033] The accompanying drawings illustrate specific embodiments of this application, which will be described in more detail below. These drawings and descriptions are not intended to limit the scope of the concept in any way, but rather to illustrate the concept of this application to those skilled in the art through reference to particular embodiments. Detailed Implementation
[0034] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.
[0035] Figure 1 This is a schematic diagram of the server structure provided in the embodiments of this application, such as... Figure 1 As shown, the server provided in this embodiment includes: a receiving device 101, a processor 102, and a display device 103.
[0036] It is understood that the structures illustrated in the embodiments of this application do not constitute a specific limitation on the method. In other feasible embodiments of this application, the above architecture may include more or fewer components than illustrated, or combine some components, or split some components, or arrange different components, which can be determined according to the actual application scenario and is not limited here. Figure 1 The components shown can be implemented in hardware, software, or a combination of both.
[0037] In the specific implementation process, the receiving device 101 can be an input / output interface or a communication interface, which can obtain the page function requirement data of the target project.
[0038] The processor 102 can process the page function requirement data of the target project to obtain a file with a preset code format and deploy it to the target project.
[0039] The display device 103 can be used to render the page functions of the target project and display the page functions.
[0040] It should be understood that the aforementioned processor can be implemented by reading instructions from memory and executing those instructions, or it can be implemented through chip circuitry.
[0041] Furthermore, the network architecture and business scenarios described in the embodiments of this application are for the purpose of more clearly illustrating the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions provided in the embodiments of this application. As those skilled in the art will know, with the evolution of network architecture and the emergence of new business scenarios, the technical solutions provided in the embodiments of this application are also applicable to similar technical problems.
[0042] In front-end development, when addressing the secondary development of legacy projects, it's necessary to add new page functionalities without disrupting the original code. Currently, existing technologies utilize the frameworks used in the legacy projects to develop these new functionalities. However, when the frameworks used in the legacy projects are not currently mainstream, the amount of code involved increases, leading to increased development time and complexity, thus impacting development efficiency.
[0043] To address the aforementioned technical problems, this application proposes the following technical concept: Considering that when the framework used in an older project is not a current mainstream framework, the amount of code involved increases, leading to increased development time and difficulty, thus affecting development efficiency. The inventors conceived of using a current mainstream framework to develop new page functions. This involves processing the code, packaging it into a pre-defined code file, and then deploying it to the target project to complete secondary development. Specifically, TypeScript class code files and TypeScript page function code files are created. The page function code file is processed using DOM element creation functions, child element setting functions, and attribute setting functions in the class code file to obtain DOM element data, child element data, and attribute data. The TypeScript class code file and page function code file are converted into a file in the pre-defined code format according to a configuration file. The pre-defined code file is then deployed to the target project, where the target project displays page functions based on the DOM element data, child element data, and attribute data. By using TypeScript class code files and TypeScript page function code files, page functions can be implemented with a small amount of code, reducing development time and difficulty, thereby improving development efficiency.
[0044] The technical solution of this application and how the technical solution of this application solves the above-mentioned technical problems are described in detail below with specific embodiments. These specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described again in some embodiments. The embodiments of this application will now be described with reference to the accompanying drawings.
[0045] Figure 2 A flowchart illustrating the code file format conversion method provided in this application embodiment is shown below. Figure 2 As shown, the method includes:
[0046] S201: Obtain the page functional requirements data for the target project.
[0047] Among them, the page functional requirements data are the new functional requirements proposed by users for the page.
[0048] For example, the functional requirement is to add a page text box, enter content in the page text box, and pop up the corresponding input value when the button is clicked.
[0049] S202: Create a TypeScript class file containing functions for creating DOM elements, setting child elements, and setting attributes.
[0050] For example, the TypeScript format class code file is a View class written in imitation of Vue, used to store various properties, multiple methods and constructors in the page.
[0051] Optionally, various attributes include a reference to the root element, an object that stores references, an object that stores view references, an array that stores subviews, an object that stores custom events, view properties, the name of the view, and view options.
[0052] Optionally, multiple methods include methods for updating the DOM structure, methods for rendering the page, methods for triggering custom events, and methods for destroying the view.
[0053] Optionally, updating the DOM structure involves calling the DOM element creation function to invoke the child element setter and attribute setter functions.
[0054] Optionally, the constructor is used to configure view options. The constructor updates the DOM by calling methods that update the DOM structure.
[0055] Optionally, the page rendering method can be overridden in subclasses to customize the specific page structure; the view destruction method is used to clear properties and events, and recursively calls the destruction methods of subviews.
[0056] S203: Generate a TypeScript-formatted page function code file based on the page function requirement data; the page function code file includes page rendering methods.
[0057] In this embodiment, the page function code file in TypeScript format is written using JSX syntax.
[0058] In this embodiment, the classes in the TypeScript format page functionality code file inherit from the classes in the TypeScript format class code file. That is, the classes in the TypeScript format page functionality code file are subclasses of the classes in the TypeScript format class code file. The TypeScript format page functionality code file can override the page rendering methods.
[0059] S204: Call the page rendering method when instantiating a TypeScript formatted page function code file.
[0060] In this embodiment, when instantiating the TypeScript format page function code file, the constructor of the TypeScript format class code file is called to perform some initialization operations, such as calling the update DOM structure method, and calling the page rendering method in the TypeScript format page function code file through the update DOM structure method.
[0061] S205: Call the DOM element creation function based on the parameters in the page rendering method; the parameters in the page rendering method include the tag name parameter, the child element list parameter, and the attribute mapping object parameter.
[0062] S206: Create a DOM element of the type corresponding to the tag name parameter by calling the DOM element creation function, and obtain the DOM element data.
[0063] S207: Based on the DOM element data and the child element list parameter, call the child element setting function to obtain the child element data.
[0064] Specifically, it checks if the child element list parameter is empty; if it is not empty, it iterates through each child element in the child element list parameter; and based on the type of each child element, it retrieves the data of each child element to obtain the child element data.
[0065] In this embodiment, four objects are created in the child element setting function: a view for storing references, a child view, a storage reference, and a custom event.
[0066] Optionally, the child element can be of type string, array, view object, or object created by a DOM element creation function.
[0067] Specifically, if any child element is of type array, the child element setting function is called repeatedly to obtain the child element data of any child element.
[0068] In this embodiment, if the child element is of type string, it is added as a text node to its parent element. If the child element is of type array, representing a list of nested child elements, the child element setting function is called repeatedly to process the nested child element list, adding the references, stored references, custom events, and child views from the returned result to the corresponding object, and adding the list of child views from the returned result to the child view array. If the child element is of type view object, it is added as a child view to the child view array. If the view object has a name attribute, it is a named view, which is added to the view object with a stored reference, the reference name being the corresponding name attribute value, and the root element of the view reference is added to the parent element. If the child element is of type object created through a DOM element creation function, the object's stored reference view, child views, stored reference, and custom events are added to the corresponding object, and the object's DOM element data is added to the parent element.
[0069] In this embodiment, there are four objects: the view that stores references, the child view, the data stored in the storage reference and the custom event, and the data added to the parent element as the child element data.
[0070] S208: Based on the DOM element data and the attribute mapping object parameters, call the attribute setting function to obtain the attribute data.
[0071] Specifically, determine if the attribute mapping object is empty; if not, iterate through all keys in the attribute mapping object; based on the type of each key, obtain the attribute data corresponding to each key to get all attribute data.
[0072] In this embodiment, the attribute mapping object is expressed in the form of key-value pairs of attribute name and attribute value.
[0073] In this embodiment, two objects are created in the property setting function: one for storing references and one for custom events.
[0074] Optionally, the key type includes: ref, style, xgClass, format conforming to the event, format conforming to a custom event, and innerHTML.
[0075] In this embodiment, if the key type is `ref`, the DOM element data is stored in a storage reference object, with the reference name being the attribute value corresponding to `ref`. If the key type is `style`, the value corresponding to `style` is added to the DOM element data to set the element's inline style. If the key type is `xgClass`, the attribute value corresponding to `xgClass` is added to the DOM element data to set the element's class name. If the key type conforms to an event format, the event is added to the DOM element data using the `addEventListener` method, and a callback function is passed in. If the key type conforms to a custom event format, the element is processed and stored in a custom event object, with the corresponding callback function as the value. If the key type does not belong to any of the above, the attribute name and attribute value of the attribute mapping object are directly added to the DOM element data.
[0076] In this embodiment, there are two objects: the data stored in the storage reference and the data stored in the custom event, and the data added to the DOM element data is attribute data.
[0077] S209: Based on the pre-set configuration file, package the TypeScript format class code files and TypeScript format page function code files to convert them into a file with a preset code format.
[0078] In this embodiment, the configuration file is pre-configured.
[0079] In this embodiment, the default code format is JavaScript.
[0080] Alternatively, the Rollup packaging tool can be used for packaging.
[0081] S210: Deploy a file with a preset code format to the target project, so that the target project can render the page functions of the target project based on DOM element data, child element data and attribute data, and display the page functions.
[0082] In summary, the process involves creating TypeScript class code files and TypeScript page functionality code files. The class code files utilize DOM element creation functions, child element setting functions, and attribute setting functions to process the page functionality code files, obtaining DOM element data, child element data, and attribute data. Based on the configuration file, both the TypeScript class code files and page functionality code files are converted into files with a preset code format. These converted files are then deployed to the target project, where the target project uses the DOM element data, child element data, and attribute data to display the page functionality. By using TypeScript class code files and TypeScript page functionality code files, page functionality can be implemented with minimal code, reducing development time and complexity, thereby improving development efficiency.
[0083] Based on the above embodiments, this embodiment describes the contents of the configuration file in detail as follows:
[0084] S301: Create a blank configuration file.
[0085] In this embodiment, a blank configuration file is created and pakeage.json is initialized. Rollup.js is installed.
[0086] In this embodiment, the pre-configured configuration file includes: code plugin, input file path, output file format, and output file path.
[0087] S302: Perform the following steps in a blank configuration file to complete the configuration file setup and obtain the configuration file.
[0088] S3021: Import code plugin.
[0089] In this embodiment, three plugins are imported: rollup-plugin-typescript, rollup-plugin-babel, and rollup-plugin-jsx.
[0090] Among them, rollup-plugin-typescript is used to process TypeScript files, converting TypeScript code into JavaScript; rollup-plugin-typescript is used to transpile using Babel, converting modern JavaScript syntax into JavaScript code compatible with the target environment; and rollup-plugin-jsx is used to process JSX files, converting code written in JSX syntax into JavaScript code.
[0091] S3022: Set the path of the TypeScript format page function code file to the input file path.
[0092] In this embodiment, the input file path specifies the entry path of the packaged file, indicating that the packaging process starts from this file.
[0093] S3023: Set the preset code format to the output file format.
[0094] In this embodiment, the output file format specifies the format of the output file.
[0095] S3024: Set the path of the file with the preset code format to the output file path.
[0096] In this embodiment, the output file path specifies the path to the output file.
[0097] Optionally, the configuration file may also include a global variable name to specify a name for the output file.
[0098] Optionally, the configuration file may also include the plugins to be used, including TypeScript, JSX, and Babel.
[0099] In summary, Rollup is used for front-end code bundling, integrating plugins such as rollup-plugin-typescript, rollup-plugin-babel, and rollup-plugin-jsx to process code files. The final output is bundled into a JavaScript file, independent of environment and framework, achieving front-end code optimization and compression, thereby improving page loading speed and runtime performance.
[0100] Figure 3 This is a schematic diagram of the structure of the code file format conversion device provided in the embodiments of this application, such as... Figure 3 As shown, the code file format conversion device provided in this embodiment includes: an acquisition module 301, a first creation module 302, a generation module 303, a first calling module 304, a second calling module 305, a second creation module 306, a third calling module 307, a fourth calling module 308, a packaging module 309, and a deployment module 310.
[0101] Module 301 is used to obtain the page function requirements data of the target project;
[0102] The first creation module 302 is used to create a TypeScript format class code file, which includes DOM element creation functions, child element setting functions, and attribute setting functions.
[0103] The generation module 303 is used to generate a TypeScript format page function code file based on the page function requirement data; the page function code file includes page rendering methods.
[0104] The first calling module 304 is used to call the page rendering method when instantiating a TypeScript format page function code file;
[0105] The second calling module 305 is used to call the DOM element creation function according to the parameters in the page rendering method; the parameters in the page rendering method include the tag name parameter, the child element list parameter, and the attribute mapping object parameter.
[0106] The second creation module 306 is used to create DOM elements of the type corresponding to the tag name parameter by calling the DOM element creation function, so as to obtain DOM element data;
[0107] The third calling module 307 is used to call the child element setting function to obtain the child element data based on the DOM element data and the child element list parameter;
[0108] The fourth calling module 308 is used to call the property setting function and obtain the property data based on the DOM element data and the property mapping object parameters;
[0109] The packaging module 309 is used to package TypeScript format class code files and TypeScript format page function code files according to the pre-set configuration file, so as to convert them into a file with a preset code format;
[0110] The deployment module 310 is used to deploy files with a preset code format to the target project, so that the target project can render the page functions of the target project based on DOM element data, child element data and attribute data, and display the page functions.
[0111] In one possible implementation, the third calling module 307 is specifically used to: determine whether the sub-element list parameter is empty; if it is not empty, traverse each sub-element in the sub-element list parameter; and obtain the data of each sub-element according to its type to obtain the sub-element data.
[0112] In one possible implementation, the code file format conversion device further includes: a loop calling module, used to repeatedly call the sub-element setting function to obtain the sub-element data of any sub-element if the type of any sub-element is an array type.
[0113] In one possible implementation, the fourth calling module 308 is specifically used to: determine whether the attribute mapping object is empty; if it is not empty, traverse all keys in the attribute mapping object; and obtain the attribute data corresponding to each key according to the type of each key, so as to obtain all attribute data.
[0114] In one possible implementation, the pre-set configuration file includes: a code plugin, an input file path, an output file format, and an output file path; correspondingly, the code file format conversion device further includes: a configuration module for creating a blank configuration file; performing the following steps in the blank configuration file to complete the configuration file setup and obtain the configuration file; importing the code plugin; setting the path of the TypeScript format page function code file as the input file path; setting the preset code format as the output file format; and setting the path of the file with the preset code format as the output file path.
[0115] The code file format conversion device provided in this embodiment can execute the method provided in the above method embodiment. Its implementation principle and technical effect are similar, and will not be described in detail here.
[0116] Figure 4 This is a schematic diagram of the hardware structure of the server provided in an embodiment of this application. Figure 4 As shown, the server provided in this embodiment includes at least one processor 401 and a memory 402. Optionally, the server also includes a communication component 403. The processor 401, memory 402, and communication component 403 are connected via a bus 404.
[0117] In a specific implementation, at least one processor 401 executes computer execution instructions stored in memory 402, causing at least one processor 401 to perform the above-described method.
[0118] The specific implementation process of processor 401 can be found in the above method embodiments, and its implementation principle and technical effect are similar. It will not be repeated here.
[0119] In the above embodiments, it should be understood that the processor can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), etc. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the method disclosed in this invention can be directly implemented by a hardware processor, or implemented by a combination of hardware and software modules within the processor.
[0120] The memory may include random access memory (RAM) and may also include non-volatile memory (NVM), such as at least one disk storage device.
[0121] The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. Buses can be categorized as address buses, data buses, control buses, etc. For ease of illustration, the buses shown in the accompanying drawings are not limited to a single bus or a single type of bus.
[0122] This application also provides a computer program product, including a computer program that, when executed by a processor, implements the above-described method.
[0123] This application also provides a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, implement the above-described method.
[0124] The aforementioned readable storage medium can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk. The readable storage medium can be any available medium accessible to a general-purpose or special-purpose computer.
[0125] An exemplary readable storage medium is coupled to a processor, enabling the processor to read information from and write information to the readable storage medium. Of course, the readable storage medium can also be a component of the processor. The processor and the readable storage medium can reside in an Application Specific Integrated Circuit (ASIC). Alternatively, the processor and the readable storage medium can exist as discrete components in the device.
[0126] The division of units is merely a logical functional division; in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be indirect coupling or communication connection through some interfaces, devices, or units, and may be electrical, mechanical, or other forms.
[0127] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.
[0128] In addition, the functional units in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.
[0129] If a function is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this invention, or the part that contributes to the prior art, or a part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.
[0130] Those skilled in the art will understand that all or part of the steps of the above-described method embodiments can be implemented by hardware related to program instructions. The aforementioned program can be stored in a computer-readable storage medium. When executed, the program performs the steps of the above-described method embodiments; and the aforementioned storage medium includes various media capable of storing program code, such as ROM, RAM, magnetic disks, or optical disks.
[0131] Finally, it should be noted that other embodiments of the invention will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This invention is intended to cover any variations, uses, or adaptations of the invention that follow the general principles of the invention and include common knowledge or customary techniques in the art not disclosed herein, and is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of the invention is limited only by the appended claims.
Claims
1. A method for converting the format of a code file, characterized in that, Applied to servers, including: Obtain the page functionality requirements data for the target project; Create a TypeScript class code file, which includes functions for creating Document Object Model (DOM) elements, setting child elements, and setting attributes. Based on the page functional requirements data, a TypeScript format page functional code file is generated; wherein the page functional code file includes page rendering methods; When the TypeScript formatted page function code file is instantiated, the page rendering method is called; The DOM element creation function is called according to the parameters in the page rendering method; wherein the parameters in the page rendering method include tag name parameters, child element list parameters, and attribute mapping object parameters; By calling the DOM element creation function, a DOM element of the type corresponding to the tag name parameter is created to obtain DOM element data; Based on the DOM element data and the child element list parameters, call the child element setting function to obtain the child element data; Based on the DOM element data and the attribute mapping object parameters, the attribute setting function is called to obtain the attribute data; According to the pre-set configuration file, the TypeScript format class code file and the TypeScript format page function code file are packaged and converted into a file with a preset code format. The file with the preset code format is deployed to the target project, so that the target project renders the page functions of the target project according to the DOM element data, the child element data and the attribute data, and displays the page functions.
2. The method according to claim 1, characterized in that, The step of calling the child element setting function to obtain child element data based on the DOM element data and the child element list parameters includes: Determine if the sub-element list parameter is empty; If not empty, then iterate through each child element in the child element list parameter; Based on the type of each sub-element, obtain the data of each sub-element to obtain the sub-element data.
3. The method according to claim 2, characterized in that, Also includes: If any child element is of type array, the child element setting function is called repeatedly to obtain the child element data of that child element.
4. The method according to claim 1, characterized in that, The step of calling the attribute setting function to obtain attribute data based on the DOM element data and the attribute mapping object parameters includes: Determine whether the attribute mapping object is empty; If not empty, then iterate through all keys in the property mapping object; Based on the type of each key, retrieve the attribute data corresponding to each key to obtain all attribute data.
5. The method according to any one of claims 1-4, characterized in that, The pre-configured configuration file includes: code plugin, input file path, output file format, and output file path; Accordingly, the method also includes: Create a blank configuration file; Perform the following steps in the blank configuration file to complete the configuration file settings and obtain the configuration file: Import code plugin; Set the path of the TypeScript format page function code file to the input file path; Set the preset code format to the output file format; Set the path of the file with the preset code format to the output file path.
6. A code file format conversion device, characterized in that, Applied to servers, including: The acquisition module is used to acquire page functionality requirements data for the target project. The first creation module is used to create a TypeScript format class code file, which includes DOM element creation functions, child element setting functions, and attribute setting functions. The generation module is used to generate a TypeScript format page function code file based on the page function requirement data; wherein the page function code file includes page rendering methods; The first calling module is used to call the page rendering method when the TypeScript format page function code file is instantiated; The second calling module is used to call the DOM element creation function according to the parameters in the page rendering method; wherein the parameters in the page rendering method include tag name parameters, child element list parameters, and attribute mapping object parameters; The second creation module is used to create a DOM element of the type corresponding to the tag name parameter by calling the DOM element creation function, so as to obtain DOM element data; The third calling module is used to call the child element setting function to obtain the child element data based on the DOM element data and the child element list parameters; The fourth calling module is used to call the attribute setting function to obtain attribute data based on the DOM element data and the attribute mapping object parameters; The packaging module is used to package the TypeScript format class code files and TypeScript format page function code files according to the pre-set configuration file, so as to convert them into a file with a preset code format; The deployment module is used to deploy the file with the preset code format to the target project, so that the target project renders the page functions of the target project according to the DOM element data, the child element data and the attribute data, and displays the page functions.
7. The apparatus according to claim 6, characterized in that, The third calling module is used to determine whether the sub-element list parameter is empty; if it is not empty, it iterates through each sub-element in the sub-element list parameter; and obtains the data of each sub-element according to its type to obtain the sub-element data.
8. A server, characterized in that, include: Memory, processor; The memory stores computer-executed instructions; The processor executes computer execution instructions stored in the memory, causing the processor to perform the method as described in any one of claims 1-5.
9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when executed by a processor, are used to implement the method as described in any one of claims 1-5.
10. A computer program product, characterized in that, Includes a computer program that, when executed by a processor, implements the method described in any one of claims 1-5.