CN117311850A - Processing method, device, equipment and storage medium of front end frame assembly - Google Patents
Processing method, device, equipment and storage medium of front end frame assembly Download PDFInfo
- Publication number
- CN117311850A CN117311850A CN202311339540.8A CN202311339540A CN117311850A CN 117311850 A CN117311850 A CN 117311850A CN 202311339540 A CN202311339540 A CN 202311339540A CN 117311850 A CN117311850 A CN 117311850A
- Authority
- CN
- China
- Prior art keywords
- file
- code
- codes
- filter
- target component
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000003672 processing method Methods 0.000 title abstract description 10
- 238000000034 method Methods 0.000 claims abstract description 45
- 238000010276 construction Methods 0.000 claims abstract description 20
- 230000006870 function Effects 0.000 claims description 184
- 230000014509 gene expression Effects 0.000 claims description 47
- 238000012545 processing Methods 0.000 claims description 42
- 238000006243 chemical reaction Methods 0.000 claims description 13
- 238000004590 computer program Methods 0.000 claims description 13
- 238000003491 array Methods 0.000 claims description 10
- 238000001914 filtration Methods 0.000 claims description 8
- 238000011161 development Methods 0.000 abstract description 15
- 230000008569 process Effects 0.000 description 16
- 238000010586 diagram Methods 0.000 description 7
- 238000009877 rendering Methods 0.000 description 5
- 238000004891 communication Methods 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 230000009286 beneficial effect Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 230000009466 transformation Effects 0.000 description 2
- 230000000712 assembly Effects 0.000 description 1
- 238000000429 assembly Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/44—Encoding
- G06F8/447—Target code generation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44568—Immediately runnable code
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
The embodiment of the invention discloses a processing method, a device, equipment and a storage medium of a front end frame assembly, wherein the method mainly comprises the following steps: acquiring a file in a single file component format from an original file of a front-end framework project by utilizing a hook function of a front-end construction tool plug-in to obtain an initial target component file; identifying pre-written filter code from the content of the initial target component file; converting the filter code into a function call code, and replacing the filter code of the corresponding initial target component file with the function call code to obtain the target component file; and converting the target component file into executable code using the front-end build tool plug-in. The embodiment of the invention can improve the development efficiency of the developer when developing the front end framework.
Description
Technical Field
The present invention relates to the field of computer technologies, and in particular, to a method, an apparatus, a device, and a storage medium for processing a front end frame assembly.
Background
The filter can improve the readability of codes, and simultaneously can conveniently and rapidly format and process data, thereby being beneficial to improving the development efficiency of the front end framework. However, some front-end frameworks such as vue in the prior art cannot realize the filter function, and the filter code contained in the front-end framework cannot be successfully converted into executable code, so that the development efficiency is lower due to the influence of the code with poor readability and the lower data processing speed in the development process of the front-end framework.
Disclosure of Invention
The embodiment of the invention provides a processing method, a processing device, processing equipment and a storage medium of a front end frame assembly, which can improve the development efficiency of a developer during front end frame development.
In a first aspect, an embodiment of the present invention provides a method for processing a front end frame assembly, including:
acquiring a file in a single file component format from an original file of a front-end framework project by utilizing a hook function of a front-end construction tool plug-in to obtain an initial target component file;
identifying pre-written filter codes from the content of the initial target component file;
converting the filter code into a function call code, and replacing the filter code of the corresponding initial target component file with the function call code to obtain a target component file; and
the target component file is converted into executable code using the front end build tool plug-in.
In a second aspect, an embodiment of the present invention provides a processing apparatus of a front end frame assembly, including: the initial target assembly file acquisition module is used for identifying a single file assembly from a front-end frame project by utilizing a hook function of a front-end construction tool plug-in;
The initial target component file acquisition module is used for acquiring a file in a single file component format from an original file of a front-end frame project by utilizing a hook function of a front-end construction tool plug-in to obtain an initial target component file;
a filter code identification module for identifying a pre-written filter code from the content of the initial target component file;
the target single file component acquisition module is used for converting the filter codes into function call codes and replacing the corresponding filter codes of the initial target component files with the function call codes to obtain target component files; and
and the conversion module is used for converting the target component file into executable codes by utilizing the front-end construction tool plugin.
In a third aspect, an embodiment of the present invention further provides an electronic device, including a memory, a processor, and a computer program stored in the memory and capable of running on the processor, where the processor executes the program to implement a method for processing a front end frame assembly according to any one of the embodiments of the present invention.
In a fourth aspect, embodiments of the present invention further provide a computer readable storage medium having stored thereon a computer program which, when executed by a processor, implements a method for processing a front end frame assembly according to any of the embodiments of the present invention.
According to the processing method, the processing device, the processing equipment and the storage medium of the front end frame component, the filter code is obtained by identifying the target component file which is in the form of a single file component in the original file of the front end frame project, the target component file is obtained by converting the filter code into the function call code and then replacing the original code, and then the target component file is converted into the executable code, so that the filter function can be used in the front end frame, the readability of the code is improved when the front end frame project is developed, the data formatting and the data processing can be conveniently and rapidly carried out, the front development efficiency can be improved, the front end page rendering burden can be reduced when the front end page rendering is operated, and the front end performance is improved.
Drawings
In order to more clearly illustrate the technical solutions of the present invention, the drawings that are needed in the embodiments will be briefly described below, it being understood that the following drawings only illustrate some embodiments of the present invention and should not be considered as limiting the scope, and that other related drawings can be obtained according to these drawings without inventive effort for a person skilled in the art.
FIG. 1 is a schematic flow chart of a method for processing a front end frame assembly according to an embodiment of the present invention;
FIG. 2 is another flow chart of a method of processing a front end frame assembly according to an embodiment of the present invention;
FIG. 3 is another flow chart of a method of processing a front end frame assembly according to an embodiment of the present invention;
FIG. 4 is another flow chart of a method of processing a front end frame assembly according to an embodiment of the present invention;
FIG. 5 is a schematic view of a processing apparatus for a front end frame assembly according to an embodiment of the present invention;
fig. 6 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.
Detailed Description
Vue is a popular JavaScript script programming language front-end framework that focuses on building user interfaces. Vue is popular with its simplicity, ease of learning, flexibility, and high performance, and has become one of the preferred frameworks for developers. Vue has many characteristics, including: responsive data binding: the Vue adopts a responsive data binding mode, so that synchronous update of data and views is realized; and (3) modular development: vue favors componentized development so that developers can split UIs into independent, reusable components; template grammar: the template grammar of the Vue is simple and visual, is easy to learn and use, and can quickly construct a user interface; single file component: the Vue supports a single file component, so that templates, styles and logic of the component can be packaged in one file, and management and multiplexing are facilitated; ecological system: the Vue has rich ecological systems and can meet the requirements of developers in different scenes. Filters can be used in the single file component of vue, and the filter function can improve code reusability and readability, and can conveniently and quickly format and process data. However, the single file component of vue cannot realize the filter function, and the filter code contained in the front-end framework project cannot be successfully converted into executable code, so that the development efficiency is lower due to the code with poor readability and lower data processing speed in the development process of the front-end framework vue by a developer.
According to the processing method, the processing device, the processing equipment and the storage medium for the front end frame assembly, the filter codes are obtained through identification from the target assembly files with single file assemblies in the original files of the vue front end frame assembly items, the filter codes are converted into the function call codes and then replace the original codes, the target assembly files are further obtained, and then the target assembly files are converted into the executable codes, so that the filter functions can be used in the front end frame vue3, the readability of the codes can be improved when the vue front end frame assembly items are developed, meanwhile, the data formatting and the data processing can be conveniently and rapidly carried out, the front development efficiency can be improved, the front end page rendering burden can be reduced during operation, and the front end performance can be improved.
The invention is described in further detail below with reference to the drawings and examples. It is to be understood that the specific embodiments described herein are merely illustrative of the invention and are not limiting thereof. It should be further noted that, for convenience of description, only some, but not all of the structures related to the present invention are shown in the drawings.
Fig. 1 is a schematic flow chart of a processing method of a front end frame assembly according to an embodiment of the present invention, where the method may be performed by a processing device of the front end frame assembly according to an embodiment of the present invention, and the device may be implemented in software and/or hardware. In a specific embodiment, the apparatus may be integrated in an electronic device, such as a computer, a server, etc. The following embodiments will be described taking the integration of the device in an electronic apparatus as an example. Referring to fig. 1, the method may specifically include the steps of:
And step 101, acquiring a file in a single file component format from an original file of a front-end framework project by utilizing a hook function of a front-end construction tool plug-in, and obtaining an initial target component file. The subsequent identification of filter code from the initial target component file can be facilitated.
Specifically, the front end frame item may be vue item.
Specifically, the front-end building tool may be a Vite tool. The Vite is a next generation front end development and construction tool, is a construction tool for developers of script programming languages JavaScript and TypeScript, and can help the front end developers to develop applications more quickly by providing an experience of quick construction, compilation and deployment.
Specifically, the original file of the front end framework project may be a project file obtained after the developer completes the code writing of the front end framework project, and before the conversion operation of the front end framework project into the executable code is performed by the front end construction tool plug-in.
Specifically, after the front end framework item completes code writing, for example, completing code writing of vue item 3 to obtain vue item original file, it is necessary to use a front end construction tool to perform packaging construction to obtain an executable program. Specifically, the method comprises the following steps: 1. analyzing a code file path by utilizing a vite plug-in; 2. acquiring code file contents based on the parsed code file path by utilizing a vite plug-in; 3. identifying a file format based on a file path suffix by using the vite plug-in, and calling all the vite plug-ins containing file content processing to process the file content into a browser executable code; 4. after the code file is processed, all the processed code file contents are aggregated into a program. The conversion operation of the executable code is step 3.
In an alternative embodiment of the present invention, the hook function of the front end build tool insert comprises: the hook function is converted.
Specifically, the above-described transformation hook function is a transform function.
Specifically, in converting the target component file into executable code using the vite plug-in tool, a transform function of the front-end build tool plug-in is used. Therefore, the mode that the execution priority of executing the scheme of the invention is highest can be configured in the plug-in configuration parameters of the vite plug-in, so that the scheme of the invention is ensured to be executed first, and other transformation functions are prevented from modifying the single file component codes in the original file.
Optionally, the process of obtaining the file in the format of the single file component from the original file of the front end framework item by using the hook function of the front end construction tool plug-in to obtain the initial target component file includes:
and analyzing the path of the original file of the front-end frame project by using the conversion hook function, and carrying out regular matching on the file path parameters of the original file for analyzing the front-end frame project to obtain the file path parameters of the initial target component file.
Specifically, a regular expression "/\ vue $/" can be used for judging whether the file path parameter of each original file is the path parameter of a single file component, if so, the corresponding file is obtained to obtain the initial target component file, and if not, the execution is jumped out.
Specifically, the single file component file may be identified from the file path parameters of all the original files in other manners.
And acquiring the content of the initial target component file according to the file path parameters of the initial target component file by using the conversion hook function.
Step 102, identifying pre-written filter code from the content of the initial target component file. The method can be used for converting the filter codes into function call codes and replacing the original filter codes in the initial target component to obtain the target component file.
Specifically, the filter code may be pre-written in a template code block of the initial target component file.
Optionally, the filter code is pre-written in the double-bracket interpolation code and/or the binding instruction expression code of the template code block.
Specifically, the template code block is a template block, and the binding instruction expression code is a v-bind expression code.
Specifically, the filter code may also be pre-written in other vue framework code, such as v-for code, v-if code, v-show code, and the like.
Optionally, identifying pre-written filter code from the content of the initial target component file includes: matching the content of the initial target component file to obtain a template code block code; obtaining all double-bracket interpolation codes and/or binding instruction expression codes in the template code block codes; and matching the filter codes from all the double-bracket interpolation codes and/or the binding instruction expression codes.
Optionally, the matching of the template code block codes from the content of the initial target component file includes: and carrying out regular matching on the content of the initial target component file to obtain a template code block code.
Specifically, a regular expression may be used for the content of the initial target component file:
"/< template > ([ \s ] + </template > \s = < script)/" and then matches the template code block code, i.e., the code contained in the template block.
Optionally, the matching of the filter code from all the double-bracket interpolation codes and/or the binding instruction expression codes includes: and performing regular matching on all the double-bracket interpolation codes to obtain filter codes, and/or performing regular matching on all the binding instruction expression codes to obtain filter codes.
Specifically, a regular expression may be used for the double-bracket interpolation code in the template code block code: "/{ { \s ([ a-zA-Z_ $ ] [ a-zA-Z0-9_ $ ]) \s ((.
Specifically, a regular expression may be used for binding instruction expression code in template code block code: "/(.
And step 103, converting the filter code into a function call code, and replacing the filter code of the corresponding initial target component file with the function call code to obtain the target component file. All front end framework project codes comprising target component files capable of realizing the filter function can be smoothly converted into executable codes.
In an alternative embodiment of the present invention, the process of converting filter code into function call code includes: the filter source variable in each set of filter codes is set to the initial target code string.
Specifically, each set of filter codes is a set of double-bracket interpolation codes or filter codes contained in each set of binding instruction expression codes.
Specifically, as shown in fig. 4, for example, the filter source variable "count" in the filter code "{ count|add|mul ('121') }" may be set as the initial code string.
Optionally, the process of converting the filter code into the function call code includes:
and separating and emptying the filter function strings in the filter codes according to the coding format of the filter codes to obtain a plurality of available filter function arrays.
Specifically, the regular expression "/\s\s/" is used for dividing the filter function string, then the filter () function is used for removing the empty string, then the map () function is used for traversing the rest filter function arrays, and the filter () function is called for removing the blank in the filter function arrays containing the blank to obtain the available filter function arrays.
Specifically, as shown in fig. 4, for example, for the filter function string "|add|mul ('121') |" the regular expression "/\s/", dividing it into three filter function arrays, "add", "x", and "mul ('121')x"; the empty strings are removed by using a filter () function, then the map () function is used to traverse the "add" and the "mul ('121'), and the filter () function is called to remove the blank spaces in the blank space-containing" mul ('121') ", so as to obtain an available filter function array" add "and" mul ('121') ".
Optionally, the process of converting the filter code into the function call code includes:
adding a prefix and a suffix to the initial value of the target code string according to the ordering of the available filter function arrays in the filter function string, and then adding the initial value of the target code string to the position immediately behind the function name of the first available filter function array to obtain an updated target code string corresponding to the first available filter function array; adding prefixes and suffixes to the updated object code strings corresponding to the last available filter function array, and then adding the updated object code strings to the back of the function name of the next available filter function array until the next available filter function array is the last filter function array, so as to obtain a final object code string; and determining the final object code string as a function call code.
Alternatively, the filter function array includes a function name or includes a function name and a parameter list, and the filter function array may be traversed by using a forEach () function, and the function name part and the parameter list part may be attempted to be divided from each filter function array by using a regular expression "/call split () function pair.
Optionally, for the filter function array only including the function names, the prefix "(" and suffix ")" is added to the update target code string corresponding to the last available filter function array, and then the update target code string is added to the immediately following function names of the next available filter function array. And adding a prefix (sum suffix) to the updating target code string corresponding to the last available filter function array for the filter function array comprising the function names and the parameter list, and adding the prefix to the before the parameter list after the function names of the next available filter function array.
As shown in fig. 4, the filter function array is traversed by the forEach () function, and the filter function array "mul ('121')" is divided into a function name "mul" and a parameter list two parts '"121')" using the regular expression "/" (call split () function. For the filter function array "add" without parameter list, adding prefix "(" and suffix ")" to the initial target code string, and then adding the prefix "(" and suffix ")" to the function name "add" to obtain an updated target code string "add (count)"; for the filter function array "mul ('121')" with parameter list, prefix "(" and suffix ")," after "mul" is added, before "'121')", the last updated object code string mul (add (count), '121')) is obtained.
Step 104, the front-end build tool plug-in is utilized to convert the target component file into executable code.
Specifically, all files of other front end framework items may be converted into executable code at the time of converting the target component file.
Step 104, on the basis of steps 101-103, identifies and obtains a filter code from a target component file with a single file component format in an original file of a front end frame project, converts the filter code into a function call code, replaces the original code, and further obtains a target component file, and then converts the target component file into an executable code, so that a filter function can be used in the front end frame, the readability of the code is improved when the front end frame project is developed, meanwhile, data formatting and data processing can be conveniently and rapidly carried out, the front development efficiency can be improved, the front end page rendering burden can be reduced during operation, and the front end performance is improved.
The method of processing the front end frame assembly in another embodiment is further described below. In an embodiment of the present invention, the hook function of the front-end build tool plug-in includes: the hook function is loaded. The embodiment of the present invention is shown in fig. 2, that is, step 101 in fig. 1 includes:
Step 1011, loading the original file of the front end frame item by using the loading hook function, and performing regular matching on the file path parameters of the original file for loading the front end frame item to obtain the file path parameters of the initial target component file.
Specifically, in converting the target component file into executable code using the vite plug-in tool, a transform function of the front-end build tool plug-in is used. The front end is utilized to construct a loading hook function of the tool plug-in, namely a load loading function, so that the scheme of the invention can be ensured not to be influenced by a transform function, and the transform function is prevented from modifying single file component codes in an original file.
Step 1012, the file module in the running environment is utilized to read the content of the initial target component file according to the file path parameters of the initial target component file.
Specifically, the above-mentioned running environment is JavaScript running environment node.js. The single file component content can be read vue based on the file path using the fs (file) module readFileSync () function in node.
The embodiment of the invention can ensure that the scheme of the invention is not influenced by a transform function, prevent the transform function from modifying the single file component codes in the original file, further ensure that all filter codes in the original file are converted into function call codes, and ensure that all files of the front end framework can be smoothly converted into executable codes.
Further describing the processing of the front end frame assembly in another embodiment, as shown in fig. 3, step 103 of fig. 1 may include the steps of:
and 1031, replacing filter codes in the corresponding double-bracket interpolation codes and/or filter codes in the corresponding binding instruction expression codes by using function call codes, and correspondingly obtaining the replaced double-bracket interpolation codes and/or the replaced binding instruction expression codes.
Specifically, the replacing process can be performed by using a replacing function replacing () function, and particularly, when the filter codes in the double-bracket interpolation codes are matched, a character string replacing () function is called to match all the filtering source variables and the filtering function strings; and after converting the filter codes in the double-bracket interpolation codes into function call codes, adding a prefix { { and suffix } } } -to each function call code in the corresponding replace () function and returning to finish the replacement of the filter codes by the function call codes in the double-bracket interpolation codes.
When the filter codes in the instruction expression codes are matched, a character string replace () function is called, and all attribute names of the v-bind expressions, the quotation marks of the v-bind expressions, the filtering source variables and the filtering function strings are matched. And after replacing the filter codes in the instruction expression codes with function call codes, adding a used quotation mark of a prefix v-bind expression and a used quotation mark of a suffix v-bind expression to each function call code in the corresponding replace () function, then adding a prefix=, finally adding an attribute name of the prefix v-bind expression and returning, and completing the replacement of the filter codes by the function call codes in the instruction expression codes.
And step 1032, replacing the corresponding original double-bracket interpolation codes and/or the corresponding original binding instruction expression codes in the template code block codes by using the replaced double-bracket interpolation codes and/or the replaced binding instruction expression codes, and correspondingly obtaining the replaced template code block codes.
And 1033, replacing the original template code block codes in the content of the corresponding initial target component file by using the replaced template code block codes to obtain the target component file.
Specifically, the replacing process can be performed by using a replacing function replacing () function, specifically, when the template code module codes are matched, the replacing () function of the character string is called to match the codes contained in the template block, and after the replacement of the double-bracket interpolation code and/or the replacement of the binding instruction expression code after the replacement is completed, the prefix < template > and the suffix </template > are added to the template code block codes in the corresponding replacing () function and returned, so that the replacement of the original template code block codes by the template code block codes after the replacement is completed.
The embodiment of the invention can be beneficial to integrally simplifying the processing process and improving the processing efficiency of the front end frame assembly.
Fig. 5 is a block diagram of a processing apparatus for a front end frame assembly according to an embodiment of the present invention, where the apparatus is adapted to perform a processing method for a front end frame assembly according to an embodiment of the present invention. As shown in fig. 5, the apparatus may specifically include:
the initial target component file obtaining module 501 is configured to obtain a file with a format of a single file component from an original file of a front end frame item by using a hook function of a front end construction tool plug-in, so as to obtain an initial target component file, and can facilitate the subsequent identification of a filter code from the initial target component file.
Optionally, the hook function of the front end building tool insert includes: the loading hook function, where the initial target component file obtaining module 501 may be specifically configured to load an original file of a front end frame item by using the loading hook function, and perform regular matching on file path parameters of the original file used for loading the front end frame item to obtain file path parameters of the initial target component file; and reading the content of the initial target component file according to the file path parameters of the initial target component file by using a file module in the running environment.
Optionally, the hook function of the front end building tool insert includes: the conversion hook function, the initial target component file obtaining module 501 may be specifically configured to analyze a path of an original file of a front end frame item by using the conversion hook function, and perform regular matching on file path parameters of the original file for analyzing the front end frame item to obtain file path parameters of an initial target component file; and
And acquiring the content of the initial target component file according to the file path parameters of the initial target component file by using the conversion hook function.
The filter code identification module 502 is configured to identify a pre-written filter code from the content of the initial target component file. The method can be used for converting the filter codes into function call codes and replacing the original filter codes in the initial target component to obtain the target component file.
Optionally, the filter code is pre-written in double-bracket interpolation code and/or binding instruction expression code of the template code block of the initial target component file.
Optionally, the filter code identifying module 502 may be specifically configured to obtain a template code block code by matching from the content of the initial target component file; obtaining all double-bracket interpolation codes and/or binding instruction expression codes in the template code block codes; and matching the filter codes from all the double-bracket interpolation codes and/or the binding instruction expression codes.
Optionally, the filter code identifying module 502 may be specifically configured to perform regular matching on the content of the initial target component file to obtain a template code block code.
Optionally, the above-mentioned filter code identification module 502 can be specifically configured to perform regular matching on all the double-bracket interpolation codes to obtain a filter code, and/or perform regular matching on all the binding instruction expression codes to obtain a filter code.
The target single file component obtaining module 503 is configured to convert the filter code into a function call code, and replace the filter code of the corresponding initial target component file with the function call code, so as to obtain the target component file. All front end framework project codes comprising target component files capable of realizing the filter function can be smoothly converted into executable codes.
Alternatively, the target single file component obtaining module 503 may be specifically configured to set the filtering source variable in each set of filtering codes as an initial target code string; separating and emptying filter function strings in the filter codes according to the coding format of the filter codes to obtain a plurality of available filter function arrays; adding a prefix and a suffix to the initial value of the target code string according to the ordering of the available filter function arrays in the filter function string, and then adding the initial value of the target code string to the position immediately behind the function name of the first available filter function array to obtain an updated target code string corresponding to the first available filter function array; adding prefixes and suffixes to the updated object code strings corresponding to the last available filter function array, and then adding the updated object code strings to the back of the function name of the next available filter function array until the next available filter function array is the last filter function array, so as to obtain a final object code string; and determining the final object code string as a function call code.
Optionally, the target single file component obtaining module 503 may be specifically configured to replace a filter code in the corresponding double-curly brace interpolation code and/or a filter code in the corresponding binding instruction expression code with a function call code replacement, so as to correspondingly obtain a replaced double-curly brace interpolation code and/or a replaced binding instruction expression code; replacing corresponding original double-curly brace interpolation codes and/or corresponding original binding instruction expression codes in the template code block codes by using the replaced double-curly brace interpolation codes and/or the replaced binding instruction expression codes, and correspondingly obtaining replaced template code block codes; and replacing the original template code block codes in the content of the corresponding initial target component file by using the replaced template code block codes to obtain the target component file.
A conversion module 504 for converting the target component file into executable code using the front-end build tool plugin. In combination with steps 501-503, a filter code is obtained by identifying a target component file with a single file component in a format in an original file of a front end frame project, and is converted into a function call code to replace the original code, so that the target component file is further obtained, and then the target component file is converted into an executable code, so that a filter function can be used in the front end frame, the readability of the code is improved when the front end frame project is developed, meanwhile, data formatting and data processing can be conveniently and rapidly performed, the front development efficiency can be improved, the front end page rendering burden can be reduced during operation, and the front end performance is improved.
It will be apparent to those skilled in the art that, for convenience and brevity of description, only the above-described division of the functional modules is illustrated, and in practical application, the above-described functional allocation may be performed by different functional modules according to needs, i.e. the internal structure of the apparatus is divided into different functional modules to perform all or part of the functions described above. The specific working process of the functional module described above may refer to the corresponding process in the foregoing method embodiment, and will not be described herein.
The embodiment of the invention also provides electronic equipment, which comprises a memory, a processor and a computer program stored in the memory and capable of running on the processor, wherein the processing method of the front end frame assembly provided by any embodiment is realized when the processor executes the program.
The embodiment of the invention also provides a computer readable medium, on which a computer program is stored, the program, when executed by a processor, implementing the processing method of the front end frame assembly provided by any of the above embodiments.
Referring now to FIG. 6, there is illustrated a schematic diagram of a computer system 600 suitable for use in implementing an electronic device of an embodiment of the present invention. The electronic device shown in fig. 6 is only an example and should not be construed as limiting the functionality and scope of use of the embodiments of the invention.
As shown in fig. 6, the computer system 600 includes a Central Processing Unit (CPU) 601, which can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 602 or a program loaded from a storage section 608 into a Random Access Memory (RAM) 603. In the RAM 603, various programs and data required for the operation of the system 600 are also stored. The CPU 601, ROM 602, and RAM 603 are connected to each other through a bus 604. An input/output (I/O) interface 605 is also connected to bus 604.
The following components are connected to the I/O interface 605: an input portion 606 including a keyboard, mouse, etc.; an output portion 607 including a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, a speaker, and the like; a storage section 608 including a hard disk and the like; and a communication section 609 including a network interface card such as a LAN card, a modem, or the like. The communication section 609 performs communication processing via a network such as the internet. The drive 610 is also connected to the I/O interface 605 as needed. Removable media 611 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is installed as needed on drive 610 so that a computer program read therefrom is installed as needed into storage section 608.
In particular, according to embodiments of the present disclosure, the processes described above with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method shown in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication portion 609, and/or installed from the removable medium 611. The above-described functions defined in the system of the present invention are performed when the computer program is executed by a Central Processing Unit (CPU) 601.
The computer readable medium shown in the present invention may be a computer readable signal medium or a computer readable storage medium, or any combination of the two. The computer readable storage medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples of the computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, 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. In the context of this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present invention, however, the computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, with the computer-readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
The flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The modules and/or units involved in the embodiments of the present invention may be implemented in software, or may be implemented in hardware. The described modules and/or units may also be provided in a processor, e.g., may be described as: a processor includes an initial target component file acquisition module, a filter code identification module, a target single file component acquisition module, and a conversion module. The names of these modules do not constitute a limitation on the module itself in some cases.
As another aspect, the present invention also provides a computer-readable medium that may be contained in the apparatus described in the above embodiments; or may be present alone without being fitted into the device. The computer-readable medium carries one or more programs which, when executed by one of the devices, cause the device to implement: acquiring a file in a single file component format from an original file of a front-end framework project by utilizing a hook function of a front-end construction tool plug-in to obtain an initial target component file; identifying pre-written filter code from the content of the initial target component file; converting the filter code into a function call code, and replacing the filter code of the corresponding initial target component file with the function call code to obtain the target component file; and converting the target component file into executable code using the front-end build tool plug-in.
The above embodiments do not limit the scope of the present invention. It will be apparent to those skilled in the art that various modifications, combinations, sub-combinations and alternatives can occur depending upon design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the scope of the present invention.
Claims (10)
1. A method of processing a front end frame assembly, comprising:
acquiring a file in a single file component format from an original file of a front-end framework project by utilizing a hook function of a front-end construction tool plug-in to obtain an initial target component file;
identifying pre-written filter codes from the content of the initial target component file;
converting the filter code into a function call code, and replacing the filter code of the corresponding initial target component file with the function call code to obtain a target component file; and
the target component file is converted into executable code using the front end build tool plug-in.
2. The method of processing a front end frame assembly of claim 1,
the hook function of the front end build tool plug-in includes: loading a hook function;
the method for obtaining the file in the format of the single file component from the original file of the front end frame project by utilizing the hook function of the front end construction tool plug-in to obtain the initial target component file comprises the following steps:
loading the original file of the front end frame project by using the loading hook function, and carrying out regular matching on file path parameters of the original file for loading the front end frame project to obtain file path parameters of the initial target component file; and
And reading the content of the initial target component file according to the file path parameters of the initial target component file by using a file module in the running environment.
3. The method of processing a front end frame assembly of claim 1,
the hook function of the front end build tool plug-in includes: converting a hook function;
the method for obtaining the file in the format of the single file component from the original file of the front end frame project by utilizing the hook function of the front end construction tool plug-in to obtain the initial target component file comprises the following steps:
analyzing the path of the original file of the front end frame project by using the conversion hook function, and carrying out regular matching on file path parameters of the original file for analyzing the front end frame project to obtain file path parameters of an initial target component file; and
and acquiring the content of the initial target component file according to the file path parameters of the initial target component file by using the conversion hook function.
4. The method of processing a front end frame assembly of claim 1,
the filter code is pre-written in double-bracket interpolation codes and/or binding instruction expression codes of a template code block of the initial target component file;
The identifying pre-written filter code from the content of the initial target component file includes:
matching the content of the initial target component file to obtain a template code block code;
acquiring all the double-bracket interpolation codes and/or binding instruction expression codes in the template code block codes; and
and matching all the double-bracket interpolation codes and/or binding instruction expression codes to obtain the filter codes.
5. The method of processing a front end frame assembly of claim 4,
the template code block codes obtained by matching from the content of the initial target component file comprise the following steps: performing regular matching on the content of the initial target component file to obtain the template code block code;
the filter code is obtained by matching all the double-bracket interpolation codes and/or binding instruction expression codes, and the filter code comprises the following components: and performing regular matching on all the double-curly-brace interpolation codes to obtain the filter codes, and/or performing regular matching on all the binding instruction expression codes to obtain the filter codes.
6. The method of processing a front end framework component of claim 1, wherein said converting the filter code into function call code comprises:
Setting a filtering source variable in each group of the filtering codes as an initial target code string;
separating and emptying filter function strings in the filter codes according to the coding format of the filter codes to obtain a plurality of available filter function arrays;
adding a prefix and a suffix to the initial value of the target code string according to the ordering of the available filter function arrays in the filter function string, and then adding the initial value of the target code string to the position immediately behind the function name of the first available filter function array to obtain an updated target code string corresponding to the first available filter function array; adding prefixes and suffixes to the updated object code strings corresponding to the last available filter function array, and then adding the updated object code strings to the back of the function name of the next available filter function array until the next available filter function array is the last filter function array, so as to obtain a final object code string; and
and determining the final target code string as the function call code.
7. The method for processing the front end framework component according to claim 4, wherein the converting the filter code into a function call code and replacing the filter code of the corresponding initial target component file with the function call code, to obtain a target component file, includes:
Replacing filter codes in the corresponding double-curly bracket interpolation codes and/or filter codes in the corresponding binding instruction expression codes by using the function call codes, and correspondingly obtaining replaced double-curly bracket interpolation codes and/or replaced binding instruction expression codes;
replacing the corresponding original double-curly brace interpolation code and/or the corresponding original binding instruction expression code in the template code block code by using the replaced double-curly brace interpolation code and/or the replaced binding instruction expression code, and correspondingly obtaining a replaced template code block code; and
and replacing the original template code block codes in the content of the corresponding initial target component file by using the replaced template code block codes to obtain the target component file.
8. A front end frame assembly processing apparatus, comprising:
the initial target component file acquisition module is used for acquiring a file in a single file component format from an original file of a front-end frame project by utilizing a hook function of a front-end construction tool plug-in to obtain an initial target component file;
a filter code identification module for identifying a pre-written filter code from the content of the initial target component file;
The target single file component acquisition module is used for converting the filter codes into function call codes and replacing the corresponding filter codes of the initial target component files with the function call codes to obtain target component files; and
and the conversion module is used for converting the target component file into executable codes by utilizing the front-end construction tool plugin.
9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements a method of processing a front end frame assembly according to any one of claims 1 to 7 when the program is executed by the processor.
10. A computer readable storage medium, on which a computer program is stored, characterized in that the program, when being executed by a processor, implements a method of processing a front end frame assembly according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311339540.8A CN117311850A (en) | 2023-10-16 | 2023-10-16 | Processing method, device, equipment and storage medium of front end frame assembly |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311339540.8A CN117311850A (en) | 2023-10-16 | 2023-10-16 | Processing method, device, equipment and storage medium of front end frame assembly |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117311850A true CN117311850A (en) | 2023-12-29 |
Family
ID=89286402
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311339540.8A Pending CN117311850A (en) | 2023-10-16 | 2023-10-16 | Processing method, device, equipment and storage medium of front end frame assembly |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117311850A (en) |
-
2023
- 2023-10-16 CN CN202311339540.8A patent/CN117311850A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110968325B (en) | Applet conversion method and device | |
| CN110502227B (en) | Code complement method and device, storage medium and electronic equipment | |
| CN107402746B (en) | Method and device for automatically generating code file | |
| CN112394942B (en) | Distributed software development compiling method and software development platform based on cloud computing | |
| CN106547527B (en) | JavaScript file construction method and device | |
| US8806452B2 (en) | Transformation of computer programs and eliminating errors | |
| CN110262783B (en) | Interface generation method and device and terminal equipment | |
| CN110244941B (en) | Task development method and device, electronic equipment and computer readable storage medium | |
| CN113051285A (en) | SQL statement conversion method, system, equipment and storage medium | |
| CN111427583A (en) | Component compiling method and device, electronic equipment and computer readable storage medium | |
| CN109947431B (en) | Code generation method, device, equipment and storage medium | |
| CN110109671B (en) | Webpack label size and style conversion method and device | |
| CN107729001B (en) | Expression processing method and device | |
| CN114706616A (en) | Applet construction method and device | |
| CN113568605B (en) | Method, device and system for configuring defined route | |
| CN109947711B (en) | Automatic multi-language file management method in IOS project development process | |
| CN112631604B (en) | Front-end frame implementation method and device | |
| CN117008920A (en) | Engine system, request processing method and device, computer equipment and storage medium | |
| CN111158665A (en) | Code generation method and device, electronic equipment and storage medium | |
| CN111124541A (en) | Configuration file generation method, device, equipment and medium | |
| CN117311850A (en) | Processing method, device, equipment and storage medium of front end frame assembly | |
| CN115951890A (en) | Method, system and device for code conversion between different front-end frames | |
| CN116107543A (en) | Project changing method and device based on VUE engineering code project | |
| CN114625413A (en) | Routing data generation method, device, equipment and storage medium | |
| CN111273913B (en) | Method and device for outputting application program interface data represented by specifications |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |