CN113391809A - Static resource file processing method and device, electronic equipment and storage medium - Google Patents
Static resource file processing method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN113391809A CN113391809A CN202110687971.8A CN202110687971A CN113391809A CN 113391809 A CN113391809 A CN 113391809A CN 202110687971 A CN202110687971 A CN 202110687971A CN 113391809 A CN113391809 A CN 113391809A
- Authority
- CN
- China
- Prior art keywords
- source code
- file
- static resource
- code file
- resource file
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
The application provides a static resource file processing method, a static resource file processing device, electronic equipment and a storage medium, wherein the method comprises the following steps: acquiring a first static resource file; the first static resource file comprises a source code file of the main application and a source code file of at least one sub application; converting each source code file according to the conversion rule of each source code file in the first static resource file to obtain a first processing result of the first static resource file; the first processing result comprises a syntax tree corresponding to each source code file or a Css rule corresponding to each source code file; and loading a first processing result of the first static resource file according to at least one plug-in corresponding to each source code file. Based on the static resource file processing method provided by the application, the readability of the source code file of the static resource file can be improved.
Description
Technical Field
The embodiment of the application relates to the technical field of micro front ends, in particular to a static resource file processing method and device, electronic equipment and a computer storage medium.
Background
The Micro-Frontends (Micro-Frontends) split a single web (world Wide web) frontend application into a plurality of sub-applications (subpapplication), and each split sub-application can be independently operated and deployed, so that the problem that a project is too large and difficult to maintain is solved. The micro front end is divided into a main application and a sub-application, the main application is the main application, and when the styles of Js (JavaScript) variables and Cascading Style Sheets (Css) of the main application and each sub-application are not in conflict, static resource files of the sub-applications can be loaded into the main application to be rendered.
In practical applications, as the project becomes more complex, the Js variable and the Css pattern of the main application and each sub-application inevitably conflict. Meanwhile, the number of the source codes in the static resource file is more and more, so that the readability of the source code file of the static resource file is poor, and the modification of conflicting variables or styles in the static resource file of the main application and the sub application by developers is not facilitated. However, in the related art, the micro front-end solution includes the open source framework single-spa, qaankun, and there is no solution for readability of static resource files of the main application and the sub-applications. Therefore, how to improve the readability of the source code file of the static resource file becomes an important problem to be solved urgently.
Disclosure of Invention
The embodiment of the application provides a static resource file processing method and device, electronic equipment and a computer storage medium, which can improve the readability of a source code file of a static resource file.
The method for processing the static resource file provided by the embodiment of the application comprises the following steps:
acquiring a first static resource file; the first static resource file comprises a source code file of a main application and a source code file of at least one sub application;
converting each source code file according to a conversion rule of each source code file in the first static resource file to obtain a first processing result of the first static resource file; the first processing result comprises a syntax tree corresponding to each source code file or a Css rule corresponding to each source code file;
and loading a first processing result of the first static resource file according to at least one plug-in corresponding to each source code file.
In one implementation, the method further comprises: receiving modification result information of the user on the grammar tree and/or the Css rule to obtain a second processing result of the first static resource file; the second processing result includes the modification result information.
In an implementation manner, the converting each source code file according to the conversion rule of each source code file in the first static resource file to obtain a first processing result of the first static resource file includes:
acquiring a configuration item of each source code file;
when the configuration item of a first source code file indicates to convert the first source code file, converting the first source code file according to a conversion rule of the first source code file to obtain a first processing result of the first static resource file; the first source code file is any one of the first static resource files.
In one implementation, the method further comprises:
and determining the conversion rule of each source code file according to the file type of each source code file.
In one implementation, the determining a conversion rule of each source code file according to the file type of each source code file includes:
when the file type of any source code file is a cascading style sheet type, determining a conversion rule of the any source code file as a Css rule for converting a character string of the source code file;
and when the file type of any source code file is a JavaScript type, determining a conversion rule of any source code file to convert the character string of the source code file into a syntax tree.
In one implementation, the method further comprises:
and determining at least one plug-in corresponding to each source code file according to the file type of each source code file.
In one implementation, the method further comprises:
converting a second processing result of the first static resource file to obtain a second static resource file; the second static resource file and the first static resource file have the same data type.
An embodiment of the present application provides a static resource file processing apparatus, including:
the acquisition module is used for acquiring a first static resource file; the first static resource file comprises a source code file of a main application and a source code file of at least one sub application;
the processing module is used for converting each source code file according to the conversion rule of each source code file in the first static resource file to obtain a first processing result of the first static resource file; the first processing result comprises a syntax tree corresponding to each source code file or a Css rule corresponding to each source code file;
and the plug-in module is used for loading the first processing result of the first static resource file according to at least one plug-in corresponding to each source code file.
In an implementation manner, the static resource file processing apparatus further includes a receiving module, where the receiving module is configured to receive modification result information of the syntax tree and/or the Css rule from a user, and obtain a second processing result of the first static resource file; the second processing result includes the modification result information.
In an implementation manner, the processing module is configured to convert each source code file according to a conversion rule of each source code file in the first static resource file to obtain a first processing result of the first static resource file, and includes:
acquiring a configuration item of each source code file;
when the configuration item of a first source code file indicates to convert the first source code file, converting the first source code file according to a conversion rule of the first source code file to obtain a first processing result of the first static resource file; the first source code file is any one of the first static resource files.
In one implementation, the processing module is further configured to:
and determining the conversion rule of each source code file according to the file type of each source code file.
In one implementation, the processing module, configured to determine a conversion rule of each source code file according to a file type of each source code file, includes:
when the file type of any source code file is a cascading style sheet type, determining a conversion rule of the any source code file as a Css rule for converting a character string of the source code file;
and when the file type of any source code file is a JavaScript type, determining a conversion rule of any source code file to convert the character string of the source code file into a syntax tree.
In one implementation, the plug-in module is further configured to:
and determining at least one plug-in corresponding to each source code file according to the file type of each source code file.
In one implementation, the plug-in module is further configured to:
converting a second processing result of the first static resource file to obtain a second static resource file; the second static resource file and the first static resource file have the same data type.
An embodiment of the present application provides an electronic device, where the electronic device includes a memory, a processor, and a computer program stored in the memory and capable of running on the processor, and when the processor executes the computer program, the static resource file processing method provided by one or more of the foregoing technical solutions is implemented.
The embodiment of the application provides a computer storage medium, wherein a computer program is stored in the computer storage medium; the computer program can implement the static resource file processing method provided by one or more of the above technical solutions after being executed.
Based on the static resource file processing method provided by the application, each source code file is converted according to the conversion rule of each source code file to obtain a first processing result of the first static resource file, wherein the first processing result of the first static resource file comprises a syntax tree corresponding to each source code file or a style rule corresponding to each source code file; loading a first processing result of the first static resource file according to at least one plug-in corresponding to each source code file; because the syntax tree can present a tree-shaped data structure of the source code file of the static resource file in the memory of the computer, and the style rule can visually reflect the style defined for the main application/the sub-application in the code, the readability of the source code file of the static resource file can be improved, and developers can flexibly modify the variables or styles with conflicts in the static resource files of the main application and the sub-application.
It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the application.
Drawings
Fig. 1 is an application scenario diagram of a static resource file processing method according to an embodiment of the present application;
fig. 2 is a schematic flowchart of a static resource file processing method according to an embodiment of the present application;
fig. 3 is a network structure diagram of a static resource file processing method according to an embodiment of the present application;
fig. 4 is a schematic diagram of a static resource file processing apparatus according to an embodiment of the present application;
fig. 5 is a schematic structural diagram of an electronic device according to an embodiment of the present application.
Detailed Description
The present application will be described in further detail below with reference to the accompanying drawings and examples. It should be understood that the examples provided herein are merely illustrative of the present application and are not intended to limit the present application. In addition, the following examples are provided as partial examples for implementing the present application, not all examples for implementing the present application, and the technical solutions described in the examples of the present application may be implemented in any combination without conflict.
Microservices are a variant of the software development technology-Service Oriented Architecture (SOA) architectural style. The micro front end is a structure similar to micro service, Web application is converted into a plurality of small front end applications from single application, and each front end application can run independently, be developed independently and be deployed independently. When the micro front end is running on the browser side, the micro front end may include a main application and at least one sub application. Each sub-application corresponds to a menu item in the main application.
Fig. 1 shows an application scenario diagram of a static resource processing method according to an embodiment of the present application. Referring to fig. 1, the micro front-end includes a main application and N sub-applications, wherein the N sub-applications include sub-application 1, sub-application 2, sub-application 3, …, sub-application i, …, sub-application N; the sub application i represents the ith sub application. In fig. 1, menu item 1 corresponds to sub application 1, menu item 2 corresponds to sub application 2, and menu item 3 corresponds to sub application 3.
It should be understood that the main application may also be referred to as a base or a base application, and the sub-applications may also be referred to as micro-applications, which are not limited in the embodiments of the present application.
Here, the micro application is a front-end architecture design, on the basis of a single-page network application mode, a large single-page application is split into multiple micro applications with single and definite functions, each micro application depends on one or more back-end micro services to support application functions provided by the micro application, and the micro application can be independently developed, independently deployed and integrated.
In an example, the micro front end may monitor a click operation of a user on any menu item, and display a page of the sub application corresponding to the menu item at the micro front end, for example, after the user clicks the menu item 1, the page corresponding to the sub application is rendered at the micro front end, and the page of the sub application 1 corresponding to the menu item 1 is loaded, at this time, the user may use a service provided by the sub application 1. The loading mode of the sub-application can be realized based on various front-end application frameworks, for example, front-end frameworks such as Umi, React, Vue, and Angular.
Umi is an extensible enterprise-level front-end application framework. Umi are route-based, supporting a variety of functional extensions and service requirements. React is a JavaScript library used to build a user interface. React may pass multiple types of parameters, such as declaration code, rendering an Interface (UI, User Interface). JavaScript is a widely used scripting language for clients. Vue is a set of progressive frameworks for building user interfaces. Angular is a development platform, integrates declarative templates, dependency injection and end-to-end tools, and can easily construct Web (network) application.
In practical applications, as projects become more complex, unpredictable conflicts must exist between main application and sub-application Js variables, Css patterns. When the Js variables and the Css styles of the main application and the sub application conflict, the static resource file of the sub application is required to be modified, however, the static resource file of the sub application depends on a third party, and when the static resource file is modified, the development efficiency of the micro front end is affected.
In the embodiment of the present application, the static resource processing method may be applied to a plug-in system, and the plug-in system may run in a host application. And transmitting the processing result of the static resource file, the resource address and the plugin configuration information as parameters into a file loader of the plugin in the main application through a getStaticSource function provided by the plugin system, and loading the processing result of the static file.
Fig. 2 shows a schematic flowchart of a static resource file processing method provided in an embodiment of the present application. Referring to fig. 2, the static resource file processing method provided in the embodiment of the present application may include the following steps:
step A201: acquiring a first static resource file; the first static resource file includes a source code file of the primary application and a source code file of the at least one child application.
Here, the static resource file refers to a file that can be parsed and executed without change, and the static resource file may be stored in the web server. The source code file may be a string file corresponding to the static resource file. A Web server is a computer program that resides on a server side.
In an example, the file type of the static resource file may include any of: css static resource file, Js static resource file.
Wherein Js is the abbreviation of Javascript, and Javascript is a script language of web pages. Css is a cascading style sheet for a computer Language that represents hypertext Markup Language (HTML) structure styles.
Illustratively, for a Css source code file, the source code file is a Css string corresponding to the Css source code file; for the Js source code file, the source code file is a Js character string corresponding to the Js source code file.
Step A202: converting each source code file according to a conversion rule of each source code file in the first static resource file to obtain a first processing result of the first static resource file; the first processing result includes a syntax tree corresponding to each source code file or a Css rule corresponding to each source code file.
Here, the correspondence relationship between the conversion rule and the file type of the source code file may be established in advance, and the conversion rule of the source code file may be determined according to the file type of the source code file. Further, the codes in the source code file are converted according to the conversion rule of the source code file, so that a first processing result of the first static resource file can be obtained.
In the example, the Js string in the source code file and the Css string in the source code file correspond to two different conversion rules. The conversion rule of the source code file will be described in detail below.
In an example, for a Js source code file, when the source code file is a Js string, the conversion rule is to convert the Js string to a syntax tree. For the Css source code file, when the source code file is a Css string, the conversion rule is to convert the Css string into a Css rule.
In the example, the Syntax Tree is an Abstract Syntax Tree (AST), the AST Syntax Tree is an Abstract representation of Syntax structures, the Syntax structures of the programming language are represented in the form of a Tree, and each node in the Syntax Tree represents a structure in the source code.
It should be appreciated that when the Css static resource file is too large, the developer cannot effectively modify certain rules. When the Js static resource file is too large, a developer cannot effectively modify certain nodes in the syntax tree.
In an example, the Css rule to which the source code file corresponds can be defined as cssrales, where each value in cssrales corresponds to a Css rule. For the Css source code file, after the Css character string is converted into the Css rule, a developer can modify a certain Css rule in the cssrales separately.
Here, the CSS rule refers to a pair of a property (property) and a value in the CSS, the property (property) being a style property desired to be set, each property having a value, for example, "property: value ".
Step A203: and loading a first processing result of the first static resource file according to at least one plug-in corresponding to each source code file.
Here, a plug-in may be understood as an object that conforms to a specific rule, in which a function is provided for processing a static resource file, and the function of the plug-in may be customized by a developer.
It should be understood that a plug-in is a program that follows a certain specification of application program interface, and can run under a platform specified by the program to call a function library or data provided by the platform. In this application, the plug-in may be provided by a plug-in system running on the host application.
In an example, a corresponding relation between a file type of a source code file and an plugin type of at least one plugin is established in advance, and at least one plugin corresponding to each source code file is determined according to the corresponding relation between the file type of the source code file and the plugin type of the at least one plugin.
Here, the plug-in type may be a Css-type plug-in (cssplus), or a Js-type plug-in (jsplus).
In an example, at least one plug-in corresponding to a file type of a source code file is called in sequence, a static resource file is used as a parameter and is transmitted to a file loader (loader) in the plug-in, and a first processing result of a first static resource file is loaded by the file loader (loader).
In an example, at least one plug-in corresponding to a file type of the source code file is defined in the plug-in list. The plug-in list comprises a Css plug-in list (cssplus), and/or a Js plug-in list (jsplus). A Css plug-in list (cssplus) includes at least one Css-type plug-in; the Js plug-in list (JsPlugins) includes at least one Js type plug-in.
In an example, for a Css source code file, a Css plug-in list corresponding to the Css source code file is obtained, each plug-in the Css plug-in list is called in a circulating mode, a cssresults value, a resource address and plug-in configuration information corresponding to the Css source code file are used as parameters, the parameters are transmitted to a file loader of each plug-in the Css plug-in list, and a first processing result of a first static resource file is loaded by the file loader.
In an example, for a Js source code file, a Js plug-in list corresponding to the Js source code file is obtained, each plug-in the Js plug-in list is called circularly, an AST syntax tree, a static resource address and plug-in configuration information corresponding to the Js source code file are used as parameters, the AST syntax tree, the static resource address and the plug-in configuration information are transmitted to a file loader (loader) of each plug-in the Js plug-in list, and a first processing result of a first static resource file is loaded by the file loader.
Based on the static resource file processing method, each source code file is converted according to the conversion rule of each source code file to obtain a first processing result of the first static resource file, wherein the first processing result of the first static resource file comprises a syntax tree corresponding to each source code file or a style rule corresponding to each source code file; loading a first processing result of the first static resource file according to at least one plug-in corresponding to each source code file; because the syntax tree can present a tree-shaped data structure of the source code file of the static resource file in the memory of the computer, and the style rule can visually reflect the style defined for the main application/the sub-application in the code, the readability of the source code file of the static resource file can be improved, and therefore developers can flexibly modify the variables or styles with conflicts in the static resource files of the main application and the sub-application.
In practical applications, the steps a201 to a204 may be implemented by a Processor, and the Processor may be at least one of an Application Specific Integrated Circuit (ASIC), a Digital Signal Processor (DSP), a Digital Signal Processing Device (DSPD), a Programmable Logic Device (PLD), a Field Programmable Gate Array (FPGA), a Central Processing Unit (CPU), a controller, a microcontroller, and a microprocessor.
In an implementation manner, the static resource file processing method further includes: receiving modification result information of a user on the grammar tree and/or the style rule to obtain a second processing result of the first static resource file; the second processing result includes modification result information.
Here, the second processing result of the first static resource file may include modification result information of the syntax tree and/or the style rule by the user.
In an example, a first processing result of a first static resource file is loaded based on at least one plug-in corresponding to each source code file, and when the first static resource is a Js static resource, a user can modify a certain node in a syntax tree and return the modified syntax tree to a plug-in system.
Correspondingly, the plug-in system receives the modified syntax tree, converts the syntax tree into a Js character string by adopting the basic to obtain a second processing result of the first static resource file, and returns the second processing result of the first static resource file to the main application. Here, the able is a compiler of JavaScript syntax.
In an example, a first processing result of a first static resource file is loaded based on at least one plug-in corresponding to each source code file, and when the first static resource is a Css static resource, a user may modify a certain style rule in the Css rules and return the modified Css rules to the plug-in system.
Correspondingly, the plug-in system receives the modified Css rule, converts the modified Css rule into a Css character string, obtains a second processing result of the first static resource file, and returns the second processing result of the first static resource file to the main application.
In the embodiment of the application, when the modification result information of the user on the grammar tree and/or the style rule is received to obtain the second processing result of the first static resource file, the conflict problem existing in the static resource files of the main application and the sub application can be solved.
In an implementation manner, in step a202, the converting each source code file according to the conversion rule of each source code file in the first static resource file to obtain a first processing result of the first static resource file includes:
acquiring a configuration item of each source code file;
when the configuration item of a first source code file indicates to convert the first source code file, converting the first source code file according to a conversion rule of the first source code file to obtain a first processing result of the first static resource file; the first source code file is any one of the first static resource files.
Here, the configuration item of the source code file may be used to indicate whether to file-convert the source code file.
In an example, the configuration items of the source code file include useCssRules and useAST, wherein the configuration item useCssRules is used for deciding whether to convert the cs string into the cs rule, and the configuration item useAST is used for deciding whether to convert the Js string into the AST syntax tree.
In an example, for a Js source code file, the value of a configuration item useAST is judged, and when the value of the configuration item useAST of the Js source code file is true, a barrel is used to convert Js character strings of the Js static resource file into an AST syntax tree. Accordingly, the developer can make targeted modifications to certain nodes in the syntax tree.
In an example, for a Js source code file, a value of a configuration item useAST is obtained, and when the Js source code file does not configure the useAST, or the value of the configuration item useAST of the Js source code file is false, a Js character string of the Js source code file is not converted.
In an example, for a Css source code file, a value of a configuration item useCssRules is obtained, and when the value of the configuration item useCssRules of the Css source code file is true, a Css string is converted into a Css rule. Accordingly, the developer may make targeted modifications to certain style rules in the Css rules.
In an example, for a Css source code file, a value of a configuration item useCssRules is obtained, and when the Css source code file does not configure useCssRules, or the value of the configuration item useCssRules of the Css source code file is false, a Css character string of the Css source code file is not converted.
In an example, when a Css string is converted into a Css rule, a null style tag is created, the Css string is assigned to the textContent attribute of the style tag, the style tag is inserted into the body element, and a Css rule list is obtained through the cssresults attribute of the style tag.
Here, an element, a tag, refers to each node in the DOM structure tree. the textContent attribute represents the script and the self-contained variable of the style tag, the content of the tag can be changed by setting the textContent variable, and the form of the style tag is as follows: style.
In an implementation manner, in the static resource processing method, the method may further include the following steps: and determining the conversion rule of each source code file according to the file type of each source code file.
In an example, when the suffix of the static resource file is "Js" or "Jsx", the static resource file is determined to be a JavaScript script file. When the suffix name of the static resource file is "sass", "sscs", or "Css", it is determined that the static resource file is a style file.
That is, the file type of the static resource file is determined according to the suffix name of the static resource file.
In an example, the main application is provided with a plug-in system, and the plug-in system can acquire the static resource files of the main application and the sub-application. Here, the static resource file of the main application may include a JavaScript script file, and/or a Css style file; the static resource files of the sub-applications may include JavaScript script files, and/or Css style files.
In an example, according to the file type of each source code file, the conversion rules of the JavaScript script file and the Css style file are distinguished, and different conversion rules are adopted for the JavaScript script file and the Css style file.
In one implementation, the determining a conversion rule of each source code file according to the file type of each source code file includes:
and when the file type of any source code file is the cascading style sheet type, determining the conversion rule of any source code file as the Css rule for converting the character string of the source code file.
In an example, when the file type of the static resource file is the Css type, for the Css source code file, the conversion rule of the source code file is to convert the Css string into the Css rule. Further, whether the Css character string needs to be converted into the Css rule is judged according to a configuration item useCssRules of the Css static resource file.
In one implementation, the determining a conversion rule of each source code file according to the file type of each source code file includes:
and when the file type of any source code file is a JavaScript type, determining a conversion rule of any source code file to convert the character string of the source code file into a syntax tree.
In an example, when the file type of the static resource file is a Js type, for a Js source code file, the conversion rule of the source code file is to convert a Js string into a syntax tree. Further, whether the Js character string needs to be converted into the syntax tree is judged according to a configuration item useAST of the Js static resource file.
It should be understood that the Js static resource file belongs to a confusingly packaged file, and a developer cannot effectively modify the content of the Js static resource file without converting the Js character string of the Js static resource file into a syntax tree.
In an implementation manner, in the static resource processing method, the method may further include the following steps: and determining at least one plug-in corresponding to each source code file according to the file type of each source code file.
In an example, a plug-in may be defined by the following parameters: plug-in name (name), plug-in configuration information (options), file loader (loader).
Here, the parameter of the file loader (loader) may include any one of: static resource files, resource addresses, and plug-in configuration information.
In an example, before processing a static resource file, plug-in information may be configured through a setConfig function of a plug-in system micro plug, and the setConfig function accepts an object as a parameter to be transmitted into a file loader (loader).
In an example, defining a plug-in list corresponding to the Css source code file can be implemented by:
the microPlugin is the name of the plug-in system, setConfig is used for configuring plug-in information, and the getStaticSource function can be used for acquiring the file content and the resource address of the static resource file.
In an example, static resource files, resource addresses, and plug-in configuration information are passed as parameters to a file loader (loader) in the host application through a getStaticSource function provided by a plug-in system (microplug).
In an example, the data types of the Css static resource file and the Js static resource file in a file loader (loader) of the incoming plug-in are in the form of character strings.
In an example, defining a plug-in list corresponding to the Js source code file can be implemented by:
in an example, in the plug-in system microplug-in, the cssplus attribute and the jsplus attribute are respectively used for configuring a plug-in list corresponding to the Css source code file and a plug-in list corresponding to the Js source code file. At least one plugin can be included in the plugin list, each plugin corresponding to a different plugin name (name).
In an implementation manner, in the static resource processing method, the method may further include the following steps:
converting a second processing result of the first static resource file to obtain a second static resource file; the second static resource file and the first static resource file have the same data type.
In an example, after a syntax tree corresponding to a static resource file or a style rule corresponding to the static resource file is modified in a file loader (loader), a syntax tree corresponding to the static resource file or a style rule modification result corresponding to the static resource file is returned to the plug-in system.
In an example, the plug-in system converts a modification result of a syntax tree corresponding to the static resource file into a character string to obtain a second static resource file. Or the plug-in system converts the modification result of the style rule corresponding to the static resource file into a character string to obtain a second static resource file. Further, the plug-in system returns the second static resource file to the host application.
For example, after a file loader (loader) loads a style rule corresponding to a source code file, modification result information of a Css rule corresponding to the source code file by a user is received, the modification result of the Css rule corresponding to the source code file is returned to the plug-in system,
further, the plug-in system obtains a modification result of the Css rule corresponding to the source code file, converts the modification result of the Css rule corresponding to the source code file into a Css character string, obtains a second static resource file, and returns the second static resource file to the main application.
For example, after a file loader (loader) loads a syntax tree corresponding to a source code file, a modification result of the syntax tree corresponding to the source code file by a user is received, and the modification result of the syntax tree corresponding to the source code file is returned to the plug-in system.
Further, the plug-in system obtains a modification result of the syntax tree corresponding to the source code file, converts the modification result of the syntax tree corresponding to the source code file into a Js character string to obtain a second static resource file, and returns the second static resource file to the main application.
In an example, in the second static resource file, the data types of the Css static resource file and the Js static resource file may be a character string type.
Fig. 3 is a network architecture diagram illustrating a static resource file processing method according to an embodiment of the present application. Referring to fig. 3, the static resource handling method may be applied to a plug-in system, which may run on a host application. The first static resource file can be loaded in the main application and comprises a source code file of the main application and a source code file of at least one sub-application, the first static resource file is transmitted into the plug-in system, and the main application is endowed with a function of processing the first static resource file in the plug-in system.
In an example, the plug-in system may determine, according to the configuration item of the source code file, whether to convert the Css string into the Css rule or whether to convert the Js string into the syntax tree, to obtain a first processing result of the first static resource file, where the first processing result includes the syntax tree corresponding to each source code file or the cascading style sheet Css rule corresponding to each source code file.
And further, loading a first processing result of the first static resource file according to at least one plug-in corresponding to each source code file. Accordingly, a developer can modify any node in the syntax tree or any Css rule at the plug-in system interface.
In an example, the main application obtains modification result information of a user on a syntax tree and/or a Css rule to obtain a second processing result of the first static resource file, and converts the second processing result of the first static resource file to obtain a second static resource file. Rendering the sub-application in the main application according to the second static resource file. Therefore, the problem of Js variable and Css style conflict between the main application and each sub-application during micro-front-end rendering is solved.
It should be understood that a plug-in system may orchestrate how individual plug-ins perform. The plug-in system is pure and cannot affect the static resource files. When the developer does not set the plug-in the plug-in system, the static resource files of the plug-in system and the plug-in system are consistent.
Based on the same technical concept as the foregoing embodiment, referring to fig. 4, the static resource file processing apparatus provided in the embodiment of the present application may include:
an obtaining module 401, configured to obtain a first static resource file; the first static resource file comprises a source code file of a main application and a source code file of at least one sub application;
a processing module 402, configured to convert each source code file in the first static resource file according to a conversion rule of each source code file to obtain a first processing result of the first static resource file; the first processing result comprises a syntax tree corresponding to each source code file or a cascading style sheet Css rule corresponding to each source code file;
a plug-in module 403, configured to load a first processing result of the first static resource file according to at least one plug-in corresponding to each source code file.
In an implementation manner, the static resource file processing apparatus further includes a receiving module 404, where the receiving module 404 is configured to receive modification result information of the syntax tree and/or the style rule from a user, and obtain a second processing result of the first static resource file; the second processing result includes the modification result information.
In an implementation manner, the processing module 402 is configured to convert each source code file in the first static resource file according to a conversion rule of each source code file to obtain a first processing result of the first static resource file, and includes:
acquiring a configuration item of each source code file;
when the configuration item of a first source code file indicates to convert the first source code file, converting the first source code file according to a conversion rule of the first source code file to obtain a first processing result of the first static resource file; the first source code file is any one of the first static resource files.
In one implementation, the processing module 402 is further configured to:
and determining the conversion rule of each source code file according to the file type of each source code file.
In one implementation, the processing module 402 is configured to determine a conversion rule of each source code file according to the file type of each source code file, and includes:
when the file type of any source code file is a cascading style sheet type, determining a conversion rule of any source code file as a conversion rule for converting a character string of the source code file into a style rule;
and when the file type of any source code file is a JavaScript type, determining a conversion rule of any source code file to convert the character string of the source code file into a syntax tree.
In one implementation, the plug-in module 403 is further configured to:
and determining at least one plug-in corresponding to each source code file according to the file type of each source code file.
In one implementation, the plug-in module 403 is further configured to:
converting a second processing result of the first static resource file to obtain a second static resource file;
the second static resource file and the first static resource file have the same data type.
In practical applications, the obtaining module 401, the processing module 402, the plug-in module 403, and the receiving module 404 may all be implemented by a processor of an electronic device, where the processor may be at least one of an ASIC, a DSP, a DSPD, a PLD, an FPGA, a CPU, a controller, a microcontroller, and a microprocessor, and the embodiment of the present application is not limited thereto.
In some embodiments, functions of or modules included in the apparatus provided in the embodiments of the present application may be used to execute the method described in the above method embodiments, and specific implementation thereof may refer to the description of the above method embodiments, and for brevity, will not be described again here.
Based on the same technical concept as the foregoing embodiment, referring to fig. 5, an electronic device 500 provided in an embodiment of the present application may include: memory 510 and processor 520; wherein the content of the first and second substances,
a memory 510 for storing computer programs and data;
the processor 520 is configured to execute the computer program stored in the memory to implement any one of the static resource file processing methods in the foregoing embodiments.
In practical applications, the memory 510 may be a volatile memory (volatile memory), such as RAM; or a non-volatile memory (non-volatile memory), illustratively a ROM, a flash memory, a Hard Disk Drive (HDD) or a Solid-State Drive (SSD); or a combination of the above types of memories. The memory 510 may provide instructions and data to the processor 520.
The foregoing descriptions of the various embodiments are intended to highlight different aspects of the various embodiments, which have the same or similar aspects, and thus, for brevity, detailed descriptions thereof are omitted
The methods disclosed in the method embodiments provided by the present application can be combined arbitrarily without conflict to obtain new method embodiments.
Features disclosed in various product embodiments provided by the application can be combined arbitrarily to obtain new product embodiments without conflict.
The features disclosed in the various method or apparatus embodiments provided herein may be combined in any combination to arrive at new method or apparatus embodiments without conflict.
In the several embodiments provided in the present application, it should be understood that the disclosed apparatus and method may be implemented in other ways. The above-described device embodiments are merely illustrative, and for example, the division of the unit is only one logical function division, and there may be other division ways in actual implementation, such as: multiple units or components may be combined, or may be integrated into another system, or some features may be omitted, or not implemented. In addition, the coupling, direct coupling or communication between the components shown or discussed may be through some interfaces, and the indirect coupling or communication between the devices or units may be electrical, mechanical or other forms.
The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of grid units; some or all of the units can be selected according to actual conditions to achieve the purpose of the scheme of the embodiment.
In addition, all functional units in the embodiments of the present application may be integrated into one processing module, or each unit may be separately regarded as one unit, or two or more units may be integrated into one unit; the integrated unit can be realized in a form of hardware, or in a form of hardware plus a software functional unit.
Those of ordinary skill in the art will understand that: all or part of the steps for implementing the method embodiments may be implemented by hardware related to program instructions, and the program may be stored in a computer readable storage medium, and when executed, the program performs the steps including the method embodiments.
The above description is only for the specific embodiments of the present application, but the scope of the present application is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present application, and shall be covered by the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.
Claims (10)
1. A static resource file processing method is characterized by comprising the following steps:
acquiring a first static resource file; the first static resource file comprises a source code file of a main application and a source code file of at least one sub application;
converting each source code file according to a conversion rule of each source code file in the first static resource file to obtain a first processing result of the first static resource file; the first processing result comprises a syntax tree corresponding to each source code file or a cascading style sheet Css rule corresponding to each source code file;
and loading a first processing result of the first static resource file according to at least one plug-in corresponding to each source code file.
2. The method of claim 1, further comprising:
and receiving modification result information of the user on the grammar tree and/or the Css rule to obtain a second processing result of the first static resource file.
3. The method according to claim 1, wherein the converting each source code file in the first static resource file according to the conversion rule of each source code file to obtain the first processing result of the first static resource file comprises:
acquiring a configuration item of each source code file;
when the configuration item of a first source code file indicates to convert the first source code file, converting the first source code file according to a conversion rule of the first source code file to obtain a first processing result of the first static resource file; the first source code file is any one of the first static resource files.
4. The method of claim 1, further comprising:
and determining the conversion rule of each source code file according to the file type of each source code file.
5. The method of claim 4, wherein determining the transformation rules for each source code file according to the file type of each source code file comprises:
when the file type of any source code file is a cascading style sheet type, determining a conversion rule of the any source code file as a Css rule for converting a character string of the source code file;
and when the file type of any source code file is a JavaScript type, determining a conversion rule of any source code file to convert the character string of the source code file into a syntax tree.
6. The method of claim 1, further comprising:
and determining at least one plug-in corresponding to each source code file according to the file type of each source code file.
7. The method of claim 2, further comprising:
converting a second processing result of the first static resource file to obtain a second static resource file; the second static resource file and the first static resource file have the same data type.
8. A static resource handling apparatus, comprising:
the acquisition module is used for acquiring a first static resource file; the first static resource file comprises a source code file of a main application and a source code file of at least one sub application;
the processing module is used for converting each source code file according to the conversion rule of each source code file in the first static resource file to obtain a first processing result of the first static resource file; the first processing result comprises a syntax tree corresponding to each source code file or a Css rule corresponding to each source code file;
and the plug-in module is used for loading the first processing result of the first static resource file according to at least one plug-in corresponding to each source code file.
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 the static resource file processing method of any one of claims 1 to 7 when executing the program.
10. A computer storage medium storing a computer program; characterized in that said computer program is capable of implementing the static resource file processing method of any of claims 1 to 7 when executed.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110687971.8A CN113391809A (en) | 2021-06-21 | 2021-06-21 | Static resource file processing method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110687971.8A CN113391809A (en) | 2021-06-21 | 2021-06-21 | Static resource file processing method and device, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113391809A true CN113391809A (en) | 2021-09-14 |
Family
ID=77623470
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110687971.8A Pending CN113391809A (en) | 2021-06-21 | 2021-06-21 | Static resource file processing method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113391809A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114968460A (en) * | 2022-05-27 | 2022-08-30 | 金蝶软件（中国）有限公司 | Page switching method and related equipment |
-
2021
- 2021-06-21 CN CN202110687971.8A patent/CN113391809A/en active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114968460A (en) * | 2022-05-27 | 2022-08-30 | 金蝶软件（中国）有限公司 | Page switching method and related equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9785452B2 (en) | Framework for dependency management and automatic file load in a network environment | |
| WO2004029798A2 (en) | Platform independent rendering of a user interface | |
| CN108920496B (en) | Rendering method and device | |
| CN109145235B (en) | Method and device for analyzing webpage and electronic equipment | |
| CN112685035A (en) | Project development method and device, computer-readable storage medium and electronic device | |
| EP3640817A1 (en) | System and method to convert a webpage built on a legacy framework to a webpage compatible with a target framework | |
| CN113885849B (en) | Application development method and device based on industrial internet platform and terminal equipment | |
| CN104679500B (en) | Method and device for realizing automatic generation of entity class | |
| CN112114890A (en) | Method, device and equipment for processing small program and storage medium | |
| CN109144567A (en) | Cross-platform webpage rendering method, device, server and storage medium | |
| CN110764775A (en) | Application program integration method and device, storage medium and server | |
| CN112799663A (en) | Page display method and device, computer readable storage medium and electronic equipment | |
| CN110727429B (en) | Front-end page generation method, device and equipment | |
| CN112087370A (en) | Method, system, electronic device and computer-readable storage medium for issuing GitHub Issues | |
| CN113391809A (en) | Static resource file processing method and device, electronic equipment and storage medium | |
| CN111309332A (en) | File content on-demand loading method and device, electronic equipment and storage medium | |
| CN114816475A (en) | Method, device, equipment and medium for updating embedded operating system | |
| CN114816418A (en) | Method, device, equipment and medium for building embedded operating system | |
| CN111880785A (en) | Program code conversion method and device and electronic equipment | |
| CN111399842A (en) | Code compiling method and device | |
| CN112988136B (en) | User interface editing method and device | |
| CN113821224B (en) | Method, system, equipment and storage medium for replacing environment variables | |
| Bui | Web components: concept and implementation | |
| CN114579137B (en) | Page rendering method and device, computer equipment and storage medium | |
| CN113722538B (en) | Interface dynamic rendering method and device |
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 |