CN116048781A - Application management method, device, equipment and storage medium - Google Patents
Application management method, device, equipment and storage medium Download PDFInfo
- Publication number
- CN116048781A CN116048781A CN202211564754.0A CN202211564754A CN116048781A CN 116048781 A CN116048781 A CN 116048781A CN 202211564754 A CN202211564754 A CN 202211564754A CN 116048781 A CN116048781 A CN 116048781A
- Authority
- CN
- China
- Prior art keywords
- target
- application
- sub
- file
- initialized
- 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
- 238000007726 management method Methods 0.000 title claims abstract description 37
- 238000000034 method Methods 0.000 claims abstract description 96
- 238000012544 monitoring process Methods 0.000 claims abstract description 29
- 238000009877 rendering Methods 0.000 claims abstract description 24
- 230000006870 function Effects 0.000 claims description 19
- 238000004590 computer program Methods 0.000 claims description 16
- 238000004891 communication Methods 0.000 claims description 13
- 230000001419 dependent effect Effects 0.000 claims description 13
- 238000013515 script Methods 0.000 claims description 12
- 244000035744 Hura crepitans Species 0.000 claims description 10
- 238000004458 analytical method Methods 0.000 claims description 6
- 238000011161 development Methods 0.000 abstract description 11
- 238000012545 processing Methods 0.000 abstract description 8
- 238000010586 diagram Methods 0.000 description 7
- 238000002955 isolation Methods 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 4
- 230000000694 effects Effects 0.000 description 2
- 239000000284 extract Substances 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
Images
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/46—Multiprogramming arrangements
- G06F9/50—Allocation of resources, e.g. of the central processing unit [CPU]
- G06F9/5005—Allocation of resources, e.g. of the central processing unit [CPU] to service a request
- G06F9/5027—Allocation of resources, e.g. of the central processing unit [CPU] to service a request the resource being a machine, e.g. CPUs, Servers, Terminals
- G06F9/505—Allocation of resources, e.g. of the central processing unit [CPU] to service a request the resource being a machine, e.g. CPUs, Servers, Terminals considering the load
-
- 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/44505—Configuring for program initiating, e.g. using registry, configuration files
-
- 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
Abstract
The application discloses an application management method, an application management device and a storage medium, which relate to the technical field of computers and comprise the following steps: monitoring the route changes of all sub-applications to obtain changed route information; matching a target sub-application based on the changed routing information, and executing preset initialization operation on the target sub-application to obtain an initialized sub-application; registering the initialized sub-application to a target framework so as to acquire a target file of the initialized sub-application through the target framework; and sending the target file to a browser so that the browser can analyze the target file to obtain target dependence, and rendering the corresponding initialized sub-application after the target dependence is successfully downloaded. According to the method and the device, the target file of the sub-application is sent to the browser through the target framework, so that the sub-application is rendered by the browser, the load is reduced, the development process is simplified, and the processing efficiency is improved.
Description
Technical Field
The present invention relates to the field of computer technologies, and in particular, to an application management method, apparatus, device, and storage medium.
Background
Micro-front-ends (Micro-Frontends) is an architecture similar to Micro services that applies the Micro services concept to the browser side, i.e., converting a Web application from a single monolithic application to multiple small front-end applications aggregated into one application. Each front-end application can also be independently operated, independently developed and independently deployed. In the current front-end field, single Page Application (SPA) is one of the very popular project forms, and as time goes on and application functions are enriched, single page application becomes no longer single but is more and more huge and difficult to maintain, and the single page application is often changed to move the whole body, so that the development cost is also higher and higher. The micro front end is used for splitting and decoupling the huge applications, and each part can be independently maintained and deployed, so that the efficiency is improved. In the existing tms project, a large number of repeatedly tedious and unnecessary old codes exist, so that a program developer is inconvenient, meanwhile, related old technologies and dependency packages are also bad for users, the existing project cannot be completely replaced in one step in a large project, and more risks and cost are increased for the project.
Disclosure of Invention
In view of the above, the present invention aims to provide an application management method, an application management device, an application management apparatus, and a storage medium, which can reduce load, simplify development process, and improve processing efficiency. The specific scheme is as follows:
in a first aspect, the present application discloses an application management method, including:
monitoring the route changes of all sub-applications to obtain changed route information;
matching a target sub-application based on the changed routing information, and executing preset initialization operation on the target sub-application to obtain an initialized sub-application;
registering the initialized sub-application to a target framework so as to acquire a target file of the initialized sub-application through the target framework;
and sending the target file to a browser so that the browser can analyze the target file to obtain target dependence, and rendering the corresponding initialized sub-application after the target dependence is successfully downloaded.
Optionally, the registering the initialized sub-application to a target framework to obtain, by using the target framework, a target file of the initialized sub-application includes:
registering the initialized sub-application to the target framework by using an APIregistterwicroApps method provided by the target framework;
Or, calling a register application method provided by single-spa through the target framework to register the initialized sub-application to the target framework;
and acquiring the html file of the initialized sub-application through a preset file acquisition interface of the target framework.
Optionally, the obtaining, through a preset file obtaining interface of the target framework, the html file of the initialized sub-application includes:
generating a file acquisition request for acquiring the html file of the initialized sub-application;
and sending the file acquisition request to a file storage address of the initialized sub-application so as to acquire the corresponding html file through the preset file acquisition interface of the target frame.
Optionally, the sending the target file to a browser, so that the browser parses the target file to obtain a target dependency, including:
sending the html file to a browser so that the browser can parse the html file through a preset html parser to obtain the target dependence; the target dependencies include js dependencies and css dependencies.
Optionally, the sending the target file to a browser, so that after the browser parses the target file to obtain the target dependency, the method further includes:
Acquiring target parameters corresponding to the target file stored in the plug-in file; the target parameters comprise url parameters and opt parameters;
if the opt parameter is a function, replacing a default dependent downloading method by using the function to obtain a modified downloading method, and downloading the target dependent by using the modified downloading method;
if the opt parameter is an object, judging whether cache information corresponding to the target dependency exists in the browser;
if the cache information corresponding to the target dependency does not exist, downloading the target dependency through the default dependency downloading method;
correspondingly, the rendering the corresponding initialized sub-application after the target dependent download is successful includes:
after downloading the target dependency through the default dependency downloading method, converting the target dependency into a corresponding target character string;
analyzing the html file through a preset analysis method, and storing the obtained external script and the external style into the corresponding target character string;
downloading the external connection style, and replacing corresponding style information in the html file by using the external connection style to obtain a replaced html file;
Rendering the corresponding initialized sub-application based on the replaced html file.
Optionally, the performing a preset initialization operation on the target sub-application to obtain an initialized sub-application includes:
calling a loadApp method to load the resources of the target sub-application, and initializing the configuration of the target sub-application to obtain an initialized sub-application;
when the main application starts to initialize and load, generating a render sandbox corresponding to the initialized sub-application; and determining the original application before accessing the target frame as the main application, and determining the existing application after accessing the target frame as the sub-application.
Optionally, after the matching the target sub-application based on the changed routing information, the method further includes:
creating a globalState object containing a communication variable and a preset method set through the target framework; the preset method set comprises a setGlobalState method for modifying the variable value and an onGlobalStateChange method for monitoring the variable change;
initializing the globalState object in the main application to obtain an initialized globalState object;
and transmitting the initialized globalState object to the target sub-application through a preset channel, so that the target sub-application obtains a preset monitoring statement by analyzing the initialized globalState object, and monitors global state change information through the preset monitoring statement.
In a second aspect, the present application discloses an application management apparatus, including:
the route monitoring module is used for monitoring route changes of all sub-applications to obtain changed route information;
the sub-application initializing module is used for matching a target sub-application based on the changed routing information and executing preset initializing operation on the target sub-application to obtain an initialized sub-application;
the file acquisition module is used for registering the initialized sub-application to a target framework so as to acquire a target file of the initialized sub-application through the target framework;
and the sub-application rendering module is used for sending the target file to a browser so that the browser can analyze the target file to obtain target dependence, and rendering the initialized sub-application corresponding to the target dependence after the target dependence is successfully downloaded.
In a third aspect, the present application discloses an electronic device comprising:
a memory for storing a computer program;
a processor for executing the computer program to implement the steps of the application management method as disclosed above.
In a fourth aspect, the present application discloses a computer-readable storage medium for storing a computer program; wherein the computer program, when executed by a processor, implements an application management method as disclosed previously.
It can be seen that the present application provides an application management method, including: monitoring the route changes of all sub-applications to obtain changed route information; matching a target sub-application based on the changed routing information, and executing preset initialization operation on the target sub-application to obtain an initialized sub-application; registering the initialized sub-application to a target framework so as to acquire a target file of the initialized sub-application through the target framework; and sending the target file to a browser so that the browser can analyze the target file to obtain target dependence, and rendering the corresponding initialized sub-application after the target dependence is successfully downloaded. Therefore, the target sub-application is determined through the change of the route, the target sub-application is registered to the target framework, the target framework acquires the target file of the sub-application through the interface of the target framework and sends the target file to the browser, the browser judges the target sub-application corresponding to the current target file through the received route information in the target file, and renders the sub-application based on the target file, so that the load is reduced, the development process is simplified, and the processing efficiency is improved.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings that are required to be used in the embodiments or the description of the prior art will be briefly described below, and it is obvious that the drawings in the following description are only embodiments of the present invention, and that other drawings can be obtained according to the provided drawings without inventive effort for a person skilled in the art.
FIG. 1 is a flow chart of an application management method disclosed in the present application;
FIG. 2 is a flowchart of a specific application management method disclosed in the present application;
FIG. 3 is a diagram of a snoop global state change code disclosed herein;
FIG. 4 is a schematic diagram of a document entry configuration code disclosed herein;
FIG. 5 is a flowchart of a specific application management method disclosed herein;
FIG. 6 is a schematic diagram of a download mode determination code disclosed in the present application;
FIG. 7 is a flowchart of a cache determination disclosed herein;
FIG. 8 is a schematic diagram of an application management device provided in the present application;
fig. 9 is a block diagram of an electronic device provided in the present application.
Detailed Description
The following description of the embodiments of the present invention will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present invention, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
Currently, in the existing tms project, a large number of repeatedly tedious and unnecessary old codes exist, which brings a lot of inconvenience to program developers, meanwhile, related old technologies and dependency packages bring bad experiences to users, and the existing project cannot be completely replaced in one step in a large project, so that more risks and cost are added to the project. Therefore, the application management method can reduce load, simplify development flow and improve processing efficiency.
The embodiment of the invention discloses an application management method, which is shown in fig. 1 and comprises the following steps:
step S11: and monitoring the route changes of all the sub-applications to obtain changed route information.
In this embodiment, the route changes of all the sub-applications are monitored to obtain the changed route information. It can be understood that the target framework connects the main application and the sub-applications, and the main application can obtain the routing information of each sub-application through the target framework, and when the main application monitors that the managed sub-application has the routing change, the main application obtains the routing information after the change.
It can be understood that the target frame is a qiankun frame, the application of qiankun can make incremental upgrade on the premise of not affecting the original front-end old system, the requirement of a user is met, in a system with huge codes, qankun can be used for accessing and updating the original old system by using an updated and better technical frame, qankun can share various component libraries, related components are loaded according to the requirement, and related loads are reduced. The implementation principle of Qiankun is implemented by the following four aspects: monitoring route change; matching sub-applications; loading a sub-application; rendering the sub-application.
It should be noted that, before listening to all sub-applications for route changes, qiankun is encapsulated once, and the qiankun application is encapsulated as npm plug-in, so the above npm plug-in is directly used as the target framework in this scheme.
Step S12: and matching the target sub-application based on the changed routing information, and executing preset initialization operation on the target sub-application to obtain the initialized sub-application.
In this embodiment, after the route changes of all the sub-applications are monitored to obtain changed route information, the target sub-applications are matched based on the changed route information, and a preset initialization operation is performed on the target sub-applications to obtain initialized sub-applications. It will be appreciated that prior to registering a target sub-application (e.g., registering the target sub-application by a single-spa provided registration method called internally by the qiankun), the qiankun calls an internal loadApp method to load the resources of the sub-application, initializing the configuration of the sub-application.
S13: registering the initialized sub-application to a target framework so as to acquire a target file of the initialized sub-application through the target framework.
In this embodiment, the target sub-application is matched based on the changed routing information, and a preset initialization operation is performed on the target sub-application, so that after the initialized sub-application is obtained, the initialized sub-application is registered to a target framework, so that a target file of the initialized sub-application is obtained through the target framework. Specifically, registering the initialized sub-application to the target framework (e.g., qiankun framework) by using an apices method provided by the target framework; or, calling a register application method provided by single-spa through the target framework to register the initialized sub-application to the target framework; and acquiring the html file of the initialized sub-application through a preset file acquisition interface of the target framework. It can be understood that a file acquisition request for acquiring the html file of the initialized sub-application is generated; and sending the file acquisition request to a file storage address of the initialized sub-application so as to acquire the corresponding html file through the preset file acquisition interface of the target frame.
Step S14: and sending the target file to a browser so that the browser can analyze the target file to obtain target dependence, and rendering the corresponding initialized sub-application after the target dependence is successfully downloaded.
In this embodiment, the initialized sub-application is registered to a target framework, so that after the target framework obtains a target file of the initialized sub-application, the target file is sent to a browser, so that the browser parses the target dependency from the target file, and renders the initialized sub-application corresponding to the target dependency after the target dependency is successfully downloaded. It can be understood that the target framework obtains the corresponding target file, namely the html file, from the file storage address of the sub-application through an interface allowing the html file to pass through, then sends the html file from the target framework to the browser through the interface, and the browser extracts relevant js and css dependencies from the file through an html parser to obtain the target dependency, and renders the corresponding initialized sub-application after the target dependency is downloaded successfully.
It can be understood that qiankun is packaged and enhanced on the basis of single-spa, so that the micro front end is more convenient to use, the main idea of using qiankun is to use an original project as a base of a system, a new technical framework is used as a sub-application of the original project, the sub-application can be independently developed, tested and deployed, and then the base switches the sub-application according to a route. The scheme loads different applications into a page by virtue of the capability provided by the qiankun and ensures that the applications cannot interfere with each other, so that the qiankun becomes a more complete micro-front-end runtime container.
The method and the device solve the problems of communication, resource sharing and the like of the multi-technology stack in the unified module, simplify the development flow, enable the development of different sub-applications to become independent, namely, the module boundary is clear and dependent and definite, solve the pollution problem of js and css between different applications, ensure the accuracy of integration between the sub-applications, and enable the interactive operation between the sub-applications to be more boundary.
It can be seen that the present application provides an application management method, including: monitoring the route changes of all sub-applications to obtain changed route information; matching a target sub-application based on the changed routing information, and executing preset initialization operation on the target sub-application to obtain an initialized sub-application; registering the initialized sub-application to a target framework so as to acquire a target file of the initialized sub-application through the target framework; and sending the target file to a browser so that the browser can analyze the target file to obtain target dependence, and rendering the corresponding initialized sub-application after the target dependence is successfully downloaded. Therefore, the target sub-application is determined through the change of the route, the target sub-application is registered to the target framework, the target framework acquires the target file of the sub-application through the interface of the target framework and sends the target file to the browser, the browser judges the target sub-application corresponding to the current target file through the received route information in the target file, and renders the sub-application based on the target file, so that the load is reduced, the development process is simplified, and the processing efficiency is improved.
Referring to fig. 2, an embodiment of the present invention discloses an application management method, and compared with the previous embodiment, the present embodiment further describes and optimizes a technical solution.
Step S21: and monitoring the route changes of all the sub-applications to obtain changed route information.
Step S22: and based on the changed routing information matched with the target sub-application, calling a loadApp method to load the resources of the target sub-application, and initializing the configuration of the target sub-application to obtain the initialized sub-application.
In this embodiment, after the route changes of all the sub-applications are monitored to obtain changed route information, the target sub-applications are matched based on the changed route information, a loadApp method is called to load the resources of the target sub-applications, and the configuration of the target sub-applications is initialized to obtain initialized sub-applications.
It can be appreciated that after matching the target sub-application based on the changed routing information, creating a globalState object containing communication variables and a set of preset methods by the target framework; the preset method set comprises a setGlobalState method for modifying the variable value and an onGlobalStateChange method for monitoring the variable change; initializing the globalState object in the main application to obtain an initialized globalState object; and transmitting the initialized globalState object to the target sub-application through a preset channel, so that the target sub-application obtains a preset monitoring statement by analyzing the initialized globalState object, and monitors global state change information through the preset monitoring statement.
It will be appreciated that communication between applications is unavoidable, and thus a global globalState object is created in qiankun. The globalState object is responsible for creation by the base application and contains within it a set of variables for communication, and two methods for modifying the change value and listening to the change of the variable, respectively: setGlobalState method and onGlobalStateChange method. As shown in fig. 3, the global state object is initialized in the application, and when the base application (i.e., the main application) loads the sub-application, the base application transmits actions (i.e., the initialized global state object) to the sub-application through the protocols (i.e., the initialized global state object), and the sub-application can monitor global state changes through the onglobal state change statement in the initialized global state object. In addition, the base application and other sub-applications can also perform the two operations, so that the sharing of the global state is realized, and communication is performed among the applications.
Step S23: and when the main application starts to initialize and load, generating a render sandbox corresponding to the initialized sub-application.
In this embodiment, when the sub-application is initialized, when the main application starts to initialize and load, a render sandbox corresponding to the initialized sub-application is generated, so that the render sandbox solves the problems of JS isolation and style isolation of the sub-application. Namely, after finishing the loading of the sub-application, qiankun is used as a micro front end framework, the isolation problem of the sub-application needs to be solved, and a corresponding render sandbox is generated when the sub-application is mounted in the main application aiming at style isolation and JS isolation. The render sandbox is reinitialized each time a sub-application switches. It will be appreciated that the original application before accessing the target frame is determined as the main application, and the existing application after accessing the target frame is determined as the sub-application.
It can be understood that the qiankun framework only processes side effects such as dynamic creation style links, script links and the like when bootstrapping is applied at present, so that the sub-application is ensured not to be interfered by the side effects in the switching process.
Step S24: registering the initialized sub-application to a target framework so as to acquire a target file of the initialized sub-application through the target framework.
Step S25: and sending the html file to a browser, so that the browser can analyze the html file through a preset html analyzer to obtain the target dependence, and rendering the corresponding initialized sub-application after the target dependence is successfully downloaded.
In this embodiment, the html file is sent to a browser, so that the browser parses the html file through a preset html parser to obtain the target dependency, and renders the corresponding initialized sub-application after the target dependency is downloaded successfully. It can be understood that the target framework sets an interface allowing an html file to pass through as an entry, and after the html file is sent to the browser, the browser extracts relevant js and css dependencies from the file through an html parser, thereby obtaining the target dependencies. The code of configuring the entry in the qiankun is shown in fig. 4, the qiankun requests the address http:// localhost:8354 of the html file stored in the sub-application through the import-html-enter to obtain the corresponding html file, after the html file is sent to the browser, the browser analyzes all script tags and style tags in the html file through an html parser, and sequentially downloads js dependence corresponding to the script tags and css dependence corresponding to the style tags, and executes the target dependence, thereby improving the usability of application loading.
For the specific content of the steps S21 and S24, reference may be made to the corresponding content disclosed in the foregoing embodiment, and no detailed description is given here.
Therefore, the embodiment of the application monitors the route changes of all the sub-applications to obtain the changed route information; based on the changed route information, matching a target sub-application, calling a loadApp method to load resources of the target sub-application, and initializing configuration of the target sub-application to obtain an initialized sub-application; when the main application starts to initialize and load, generating a render sandbox corresponding to the initialized sub-application; registering the initialized sub-application to a target framework so as to acquire a target file of the initialized sub-application through the target framework; and sending the html file to a browser, so that the browser can analyze the html file through a preset html analyzer to obtain the target dependence, and render the corresponding initialized sub-application after the target dependence is successfully downloaded, thereby reducing the load, simplifying the development process and improving the processing efficiency.
Referring to fig. 5, an embodiment of the present invention discloses an application management method, and compared with the previous embodiment, the present embodiment further describes and optimizes a technical solution.
Step S31: and monitoring the route changes of all the sub-applications to obtain changed route information.
Step S32: and matching the target sub-application based on the changed routing information, and executing preset initialization operation on the target sub-application to obtain the initialized sub-application.
Step S33: registering the initialized sub-application to a target framework so as to acquire a target file of the initialized sub-application through the target framework.
Step S34: and sending the target file to a browser so that the browser can analyze the target file to obtain target dependence.
Step S35: and acquiring target parameters corresponding to the target file, wherein the target parameters are stored in the plug-in file.
In this embodiment, the target file is sent to a browser, and after the browser parses the target dependency from the target file, the target parameter corresponding to the target file stored in the add-in file is obtained, where the target parameter includes url parameter and opt parameter, and the parameter exists in the add-in file summary index.
It can be understood that the core interface for obtaining the report-html-enter request of the html file is the importHTML, which is used for loading the html file and supporting two parameters of url and opt, the function exists in the plug-in file summary index. Umd. Js, the implementation principle is as shown in fig. 6, the url parameter is a routing parameter, whether the target file is the html file corresponding to the sub-application with the routing change is judged according to the routing parameter, and the corresponding downloading method is selected according to the opt parameter.
Step S36: and if the opt parameter is a function, replacing a default dependent downloading method by using the function to obtain a modified downloading method, and downloading the target dependent by using the modified downloading method.
In this embodiment, after obtaining a target parameter corresponding to the target file stored in a plug-in file, determining whether the opt parameter is a function or an object, if the opt parameter is a function, replacing a default dependency downloading method with the function to obtain a modified downloading method, and downloading the target dependency by using the modified downloading method. It will be appreciated that, for example, when the opt parameter is a function, the function is used to replace the default fetch method as a new method of downloading the file, and the return value should be Promise.
Step S37: and if the opt parameter is an object, judging whether cache information corresponding to the target dependency exists in the browser.
In this embodiment, after the opt parameter is determined to be a function or an object, if the opt parameter is the object, it is determined whether cache information corresponding to the target dependency exists in the browser, and whether the target dependency needs to be downloaded is determined according to the cache determination information. If the cache information corresponding to the target dependency exists in the browser, the corresponding cache information is directly returned and the current cache downloading operation is ended, and the current cache information is directly utilized to execute subsequent operations.
It will be appreciated that if the opt parameter is an object, it supports at most four properties: fetch, getPublicPath, getDomain, getTemplate, these methods are used to replace the default method, with getPublicPath, getDomain and getTemplate methods being selected according to the current needs of the user.
Step S38: and if the cache information corresponding to the target dependency does not exist, downloading the target dependency by the default dependency downloading method, and rendering the corresponding initialized sub-application after the target dependency is successfully downloaded.
In this embodiment, as shown in fig. 7, after determining whether there is cache information corresponding to the target dependency in the browser, if there is no cache information corresponding to the target dependency, downloading the target dependency by the default dependency downloading method (fetch method), and rendering the corresponding initialized sub-application after the target dependency is successfully downloaded. After downloading the target dependency through the default dependency downloading method, converting the target dependency into a corresponding target character string; analyzing the html file through a preset analysis method, and storing the obtained external script and the external style into the corresponding target character string; downloading the external connection style, and replacing corresponding style information in the html file by using the external connection style to obtain a replaced html file; rendering the corresponding initialized sub-application based on the replaced html file. It can be understood that if the cache information corresponding to the target dependency does not exist in the browser, downloading the target dependency through the fetch, and converting the target dependency into a json format; calling processTpl to perform template analysis once for scanning to obtain an external script and an external style, and storing the external script and the external style in scripts and styles; calling getEmbeddHTML, downloading the external connection style, and replacing the external connection style into the template to obtain an internal style; an object is returned, which contains several core methods such as processed templates and getExternalScripts, getExternalStyleSheets, execScripts.
Specifically, after converting the target dependency into a corresponding target character string, calling a process Tpl and analyzing the html file by using a regular expression, thereby extracting an external script and an external style in the html file, then calling a getEmbeddHTML to download an external style sheet, replacing the existing style in the html file by the external style sheet to obtain an internal style, and then returning the processed html file and an interface function of the acquired script and style sheet.
For the specific content of the steps S31 to S34, reference may be made to the corresponding content disclosed in the foregoing embodiment, and a detailed description is omitted herein.
Therefore, the embodiment of the application monitors the route changes of all the sub-applications to obtain the changed route information; matching a target sub-application based on the changed routing information, and executing preset initialization operation on the target sub-application to obtain an initialized sub-application; registering the initialized sub-application to a target framework so as to acquire a target file of the initialized sub-application through the target framework; sending the target file to a browser so that the browser can analyze the target file to obtain target dependence; acquiring target parameters corresponding to the target file stored in the plug-in file; if the opt parameter is a function, replacing a default dependent downloading method by using the function to obtain a modified downloading method, and downloading the target dependent by using the modified downloading method; if the opt parameter is an object, judging whether cache information corresponding to the target dependency exists in the browser; if the cache information corresponding to the target dependency does not exist, the target dependency is downloaded through the default dependency downloading method, and the corresponding initialized sub-application is rendered after the target dependency is downloaded successfully, so that the load is reduced, the development flow is simplified, and the processing efficiency is improved.
Referring to fig. 8, the embodiment of the application further correspondingly discloses an application management device, which includes:
the route monitoring module 11 is configured to monitor route changes of all sub-applications to obtain changed route information;
the sub-application initializing module 12 is configured to match a target sub-application based on the changed routing information, and perform a preset initializing operation on the target sub-application to obtain an initialized sub-application;
a file acquisition module 13, configured to register the initialized sub-application to a target framework, so as to acquire a target file of the initialized sub-application through the target framework;
and the sub-application rendering module 14 is used for sending the target file to a browser so that the browser can analyze the target file to obtain target dependence, and render the corresponding initialized sub-application after the target dependence is successfully downloaded.
As can be seen, the present application includes: monitoring the route changes of all sub-applications to obtain changed route information; matching a target sub-application based on the changed routing information, and executing preset initialization operation on the target sub-application to obtain an initialized sub-application; registering the initialized sub-application to a target framework so as to acquire a target file of the initialized sub-application through the target framework; and sending the target file to a browser so that the browser can analyze the target file to obtain target dependence, and rendering the corresponding initialized sub-application after the target dependence is successfully downloaded. Therefore, the target sub-application is determined through the change of the route, the target sub-application is registered to the target framework, the target framework acquires the target file of the sub-application through the interface of the target framework and sends the target file to the browser, the browser judges the target sub-application corresponding to the current target file through the received route information in the target file, and renders the sub-application based on the target file, so that the load is reduced, the development process is simplified, and the processing efficiency is improved.
In some specific embodiments, the route listening module 11 specifically includes:
and the route monitoring unit is used for monitoring route changes of all the sub-applications so as to obtain changed route information.
In some embodiments, the sub-application initialization module 12 specifically includes:
the sub-application matching unit is used for matching the target sub-application based on the changed routing information;
the sub-application initializing unit is used for calling a loadApp method to load the resources of the target sub-application and initializing the configuration of the target sub-application to obtain the initialized sub-application;
the sandbox generation unit is used for generating a render sandbox corresponding to the initialized sub-application when the main application starts to be initialized and loaded; the original application before the target frame is accessed is determined to be the main application, and the existing application after the target frame is accessed is determined to be the sub-application;
an object creation unit for creating a globalState object containing a communication variable and a preset method set through the target framework; the preset method set comprises a setGlobalState method for modifying the variable value and an onGlobalStateChange method for monitoring the variable change;
An object initializing unit, configured to initialize the global state object in the main application, so as to obtain an initialized global state object;
and the object transfer unit is used for transferring the initialized globalState object to the target sub-application through a preset channel, so that the target sub-application obtains a preset monitoring statement by analyzing the initialized globalState object, and monitors global state change information through the preset monitoring statement.
In some embodiments, the file obtaining module 13 specifically includes:
a first sub-application registration unit, configured to register the initialized sub-application to the target framework by using an apices method provided by the target framework;
the second sub-application registration unit is used for or calling a register application method provided by single-spa through the target framework to register the initialized sub-application to the target framework;
a file acquisition request generating unit, configured to generate a file acquisition request for acquiring the html file of the initialized sub-application;
and the file acquisition unit is used for sending the file acquisition request to the file storage address of the initialized sub-application so as to acquire the corresponding html file through the preset file acquisition interface of the target frame.
In some embodiments, the sub-application rendering module 14 specifically includes:
the target dependency acquisition unit is used for sending the html file to a browser so that the browser can analyze the html file through a preset html analyzer to obtain the target dependency; the target dependencies include js dependencies and css dependencies;
a parameter obtaining unit, configured to obtain a target parameter corresponding to the target file, where the target parameter is stored in a plug-in file; the target parameters comprise url parameters and opt parameters;
a downloading method replacing unit, configured to replace a default dependent downloading method with the function if the opt parameter is a function, so as to obtain a modified downloading method, and download the target dependent with the modified downloading method;
the cache information judging unit is used for judging whether cache information corresponding to the target dependence exists in the browser or not if the opt parameter is an object;
a target dependency downloading unit, configured to download, if the cache information corresponding to the target dependency does not exist, the target dependency through the default dependency downloading method;
the target dependency conversion unit is used for converting the target dependency into a corresponding target character string after downloading the target dependency through the default dependency downloading method;
The file analysis unit is used for analyzing the html file through a preset analysis method and storing the obtained external script and the external style into the corresponding target character string;
a file replacing unit, configured to download the external connection style, and replace corresponding style information in the html file with the external connection style, so as to obtain a replaced html file;
and the sub-application rendering unit is used for rendering the corresponding initialized sub-application based on the replaced html file.
Further, the embodiment of the application also provides electronic equipment. Fig. 9 is a block diagram of an electronic device 20, according to an exemplary embodiment, and nothing in the figure should be taken as limiting the scope of use of the present application.
Fig. 9 is a schematic structural diagram of an electronic device 20 according to an embodiment of the present application. The electronic device 20 may specifically include: at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input output interface 25, and a communication bus 26. Wherein the memory 22 is configured to store a computer program that is loaded and executed by the processor 21 to implement the relevant steps in the application management method disclosed in any of the foregoing embodiments. In addition, the electronic device 20 in the present embodiment may be specifically an electronic computer.
In this embodiment, the power supply 23 is configured to provide an operating voltage for each hardware device on the electronic device 20; the communication interface 24 can create a data transmission channel between the electronic device 20 and an external device, and the communication protocol to be followed is any communication protocol applicable to the technical solution of the present application, which is not specifically limited herein; the input/output interface 25 is used for acquiring external input data or outputting external output data, and the specific interface type thereof may be selected according to the specific application requirement, which is not limited herein.
The memory 22 may be a carrier for storing resources, such as a read-only memory, a random access memory, a magnetic disk, or an optical disk, and the resources stored thereon may include an operating system 221, a computer program 222, and the like, and the storage may be temporary storage or permanent storage.
The operating system 221 is used for managing and controlling various hardware devices on the electronic device 20 and computer programs 222, which may be Windows Server, netware, unix, linux, etc. The computer program 222 may further include a computer program that can be used to perform other specific tasks in addition to the computer program that can be used to perform the application management method performed by the electronic device 20 as disclosed in any of the previous embodiments.
Further, the embodiment of the application also discloses a storage medium, and the storage medium stores a computer program, and when the computer program is loaded and executed by a processor, the steps of the application management method disclosed in any one of the previous embodiments are realized.
In this specification, each embodiment is described in a progressive manner, and each embodiment is mainly described in a different point from other embodiments, so that the same or similar parts between the embodiments are referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant points refer to the description of the method section.
Finally, it is further noted that relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.
The foregoing has described in detail a method, apparatus, device and storage medium for application management, wherein specific examples are provided herein to illustrate the principles and embodiments of the present invention, and the above examples are provided to assist in understanding the method and core idea of the present invention; meanwhile, as those skilled in the art will have variations in the specific embodiments and application scope in accordance with the ideas of the present invention, the present description should not be construed as limiting the present invention in view of the above.
Claims (10)
1. An application management method, comprising:
monitoring the route changes of all sub-applications to obtain changed route information;
matching a target sub-application based on the changed routing information, and executing preset initialization operation on the target sub-application to obtain an initialized sub-application;
registering the initialized sub-application to a target framework so as to acquire a target file of the initialized sub-application through the target framework;
and sending the target file to a browser so that the browser can analyze the target file to obtain target dependence, and rendering the corresponding initialized sub-application after the target dependence is successfully downloaded.
2. The application management method according to claim 1, wherein registering the initialized sub-application to a target framework to obtain a target file of the initialized sub-application through the target framework comprises:
registering the initialized sub-application to the target framework by using an APIregistterwicroApps method provided by the target framework;
or, calling a register application method provided by single-spa through the target framework to register the initialized sub-application to the target framework;
and acquiring the html file of the initialized sub-application through a preset file acquisition interface of the target framework.
3. The application management method according to claim 2, wherein the obtaining the html file of the initialized sub-application through the preset file obtaining interface of the target frame includes:
generating a file acquisition request for acquiring the html file of the initialized sub-application;
and sending the file acquisition request to a file storage address of the initialized sub-application so as to acquire the corresponding html file through the preset file acquisition interface of the target frame.
4. The application management method according to claim 3, wherein the sending the target file to a browser so that the browser parses the target dependency from the target file includes:
sending the html file to a browser so that the browser can parse the html file through a preset html parser to obtain the target dependence; the target dependencies include js dependencies and css dependencies.
5. The application management method according to claim 4, wherein after sending the target file to a browser so that the browser parses the target dependency from the target file, the method further comprises:
acquiring target parameters corresponding to the target file stored in the plug-in file; the target parameters comprise url parameters and opt parameters;
if the opt parameter is a function, replacing a default dependent downloading method by using the function to obtain a modified downloading method, and downloading the target dependent by using the modified downloading method;
if the opt parameter is an object, judging whether cache information corresponding to the target dependency exists in the browser;
if the cache information corresponding to the target dependency does not exist, downloading the target dependency through the default dependency downloading method;
Correspondingly, the rendering the corresponding initialized sub-application after the target dependent download is successful includes:
after downloading the target dependency through the default dependency downloading method, converting the target dependency into a corresponding target character string;
analyzing the html file through a preset analysis method, and storing the obtained external script and the external style into the corresponding target character string;
downloading the external connection style, and replacing corresponding style information in the html file by using the external connection style to obtain a replaced html file;
rendering the corresponding initialized sub-application based on the replaced html file.
6. The application management method according to any one of claims 1 to 5, wherein the performing a preset initialization operation on the target sub-application to obtain an initialized sub-application includes:
calling a loadApp method to load the resources of the target sub-application, and initializing the configuration of the target sub-application to obtain an initialized sub-application;
when the main application starts to initialize and load, generating a render sandbox corresponding to the initialized sub-application; and determining the original application before accessing the target frame as the main application, and determining the existing application after accessing the target frame as the sub-application.
7. The application management method according to claim 6, further comprising, after the matching the target sub-application based on the changed routing information:
creating a globalState object containing a communication variable and a preset method set through the target framework; the preset method set comprises a setGlobalState method for modifying the variable value and an onGlobalStateChange method for monitoring the variable change;
initializing the globalState object in the main application to obtain an initialized globalState object;
and transmitting the initialized globalState object to the target sub-application through a preset channel, so that the target sub-application obtains a preset monitoring statement by analyzing the initialized globalState object, and monitors global state change information through the preset monitoring statement.
8. An application management apparatus, comprising:
the route monitoring module is used for monitoring route changes of all sub-applications to obtain changed route information;
the sub-application initializing module is used for matching a target sub-application based on the changed routing information and executing preset initializing operation on the target sub-application to obtain an initialized sub-application;
The file acquisition module is used for registering the initialized sub-application to a target framework so as to acquire a target file of the initialized sub-application through the target framework;
and the sub-application rendering module is used for sending the target file to a browser so that the browser can analyze the target file to obtain target dependence, and rendering the initialized sub-application corresponding to the target dependence after the target dependence is successfully downloaded.
9. An electronic device, comprising:
a memory for storing a computer program;
a processor for executing the computer program to implement the steps of the application management method according to any one of claims 1 to 7.
10. A computer-readable storage medium storing a computer program; wherein the computer program, when executed by a processor, implements the application management method of any of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211564754.0A CN116048781A (en) | 2022-12-07 | 2022-12-07 | Application management method, device, equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211564754.0A CN116048781A (en) | 2022-12-07 | 2022-12-07 | Application management method, device, equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116048781A true CN116048781A (en) | 2023-05-02 |
Family
ID=86128489
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211564754.0A Pending CN116048781A (en) | 2022-12-07 | 2022-12-07 | Application management method, device, equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116048781A (en) |
-
2022
- 2022-12-07 CN CN202211564754.0A patent/CN116048781A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110198247B (en) | Interface test method and system | |
| US9063765B2 (en) | System and methods for distributed execution of computer executable programs utilizing asymmetric translation | |
| CA2495024C (en) | System and method for adaptable provisioning of generic application content | |
| US6978447B1 (en) | Method and system for efficiently interpreting a computer program | |
| US20040158813A1 (en) | Method and system for generating first class citizen application implementing native software application wrapper | |
| US20230036980A1 (en) | Micro-frontend system, sub-application loading method, electronic device, computer program product, and computer-readable storage medium | |
| JP2008507755A (en) | Index-based parameter access and software for using it | |
| CN109240697B (en) | Call processing method and device and storage medium | |
| CN106815055B (en) | Method and system for dynamic layout of mobile application | |
| CN102323880A (en) | Mobile phone application interface development method and terminal based on browser parsing mode | |
| US20050172281A1 (en) | System and method for customized provisioning of application content | |
| CN103634393A (en) | IVR (interactive voice response) and realization method thereof | |
| CN112799663A (en) | Page display method and device, computer readable storage medium and electronic equipment | |
| KR100670605B1 (en) | System and method for servicing multimedia contents and recording medium thereof | |
| US20090094312A1 (en) | Methods and systems for dynamic code extension | |
| CN111367685A (en) | Interface calling method and device, computer equipment and storage medium | |
| CN116301951B (en) | Micro-service application installation upgrading method and device based on kubernetes | |
| CN113179269A (en) | Internet of things-based protocol data analysis method, system, medium, and program product | |
| CN110362317B (en) | Code conversion method, device and storage medium | |
| WO2023083071A1 (en) | View interaction method and apparatus, electronic device, and computer readable medium | |
| US20150326501A1 (en) | Container contract for data dependencies | |
| CN116048781A (en) | Application management method, device, equipment and storage medium | |
| CN111338685A (en) | Common component configuration method, device, equipment and storage medium | |
| CN113068216B (en) | Network dial testing method, network dial testing system and computer readable storage medium | |
| CN113448689A (en) | Dubbo protocol conversion device and method in operation period |
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 |