Front-end project loading control method, system and electronic device

Abstract

The present invention provides a front-end project loading control method, system and electronic device, relating to the field of front-end business process processing. This method realizes the componentized loading process by introducing network components, and lodges a new front-end project in an old front-end project in a hosting manner, which can integrate the new and old front-end projects without affecting the production environment, thereby optimizing the system framework of the front-end project and reducing the risks existing in the upgrade process.

Description

Technical Field

[0001] The present invention relates to the field of front-end business process processing, and in particular to a front-end project loading control method, system and electronic device. Background Art

[0002] In the context of the increasing complexity of front-end project engineering, how to maintain it is a difficult problem for the operation and maintenance side. These front-end projects rely on older tools such as Webpack and npm and are difficult to adapt to the rapidly developing front-end technologies. Especially when new technologies need to be integrated into the business, traditional upgrade methods are difficult to implement. Especially in the case of wide application in the production environment, it may bring unexpected problems. Therefore, older front-end technologies are still used in many front-end projects, resulting in a relatively complex system framework for front-end projects and a relatively high upgrade risk. Summary of the Invention

[0003] In view of this, the purpose of the present invention is to provide a front-end project loading control method, system and electronic device. This method realizes the componentized loading process by introducing network components and lodges the new front-end project in the old front-end project in a hosted manner, enabling the integration of new and old front-end projects without affecting the production environment, thereby optimizing the system framework of the front-end project and reducing the risks existing in the upgrade process.

[0004] In a first aspect, an embodiment of the present invention provides a front-end project loading control method, which includes:

[0005] Obtain the second front-end project corresponding to the first front-end project for loading, and construct an entry file corresponding to the first front-end project;

[0006] Based on the second front-end project, control the creation of a mounting entry point corresponding to the second front-end project in the entry file, and determine a loading strategy based on the mounting entry point;

[0007] Construct a network component corresponding to the second front-end project, and obtain the product directory corresponding to the network component;

[0008] Save the resources corresponding to the second front-end project in the product directory to the first front-end project, and control the first front-end project to execute the loading based on the loading strategy.

[0009] Optionally, obtaining the second front-end project corresponding to the first front-end project for loading, and constructing an entry file corresponding to the first front-end project includes:

[0010] Construct a first product directory corresponding to the first front-end project, and based on the first product directory, construct a first logic file and a first entry file corresponding to the first front-end project;

[0011] Determine the second front-end project to be loaded by the first front-end project, and obtain the component name corresponding to the second front-end project;

[0012] Update the first entry file using the component name to obtain the entry file of the first front-end project.

[0013] Optionally, based on the second front-end project, create a mounting entry point corresponding to the second front-end project in the entry file, and determine the loading strategy based on the mounting entry point, including:

[0014] Obtain the hypertext markup language file corresponding to the entry file;

[0015] Use the component name to determine the label element corresponding to the hypertext markup language file, and mount the label element into the body label of the hypertext markup language file to generate a mounting entry point;

[0016] Determine the access path corresponding to the first front-end project based on the component name, and determine the loading strategy based on the mounting entry point and the access path.

[0017] Optionally, construct a network component corresponding to the second front-end project, and obtain the product directory corresponding to the network component, including:

[0018] Use the component name to determine the export logic parameters corresponding to the second front-end project, and use the export logic parameters to construct the network component of the second front-end project;

[0019] Based on the network component, construct the second logic file and the second entry file corresponding to the second front-end project;

[0020] Obtain the second product directory corresponding to the second logic file and the second entry file, and determine the product directory corresponding to the network component based on the second product directory.

[0021] Optionally, save the resources corresponding to the second front-end project in the product directory to the first front-end project, including:

[0022] Generate a project folder corresponding to the second front-end project according to the component name;

[0023] Copy the resources corresponding to the second front-end project in the product directory to the project folder.

[0024] Optionally, control the first front-end project to perform loading based on the loading strategy, including:

[0025] Obtain the request instruction corresponding to the first front-end project, and after parsing the request instruction, determine the route processor corresponding to the first front-end project; wherein, the route processor is determined based on the first logic file and the second logic file;

[0026] Determine the loading policy corresponding to the routing processor, and use the loading policy to load the first front-end project according to the corresponding routing processor.

[0027] Optionally, using the loading policy to load the first front-end project according to the corresponding routing processor includes:

[0028] Based on the loading policy, obtain the first loading policy for the first logic file corresponding to the routing processor;

[0029] Control the first front-end project to perform rendering and loading according to the first loading policy.

[0030] Optionally, using the loading policy to load the first front-end project according to the corresponding routing processor includes:

[0031] Based on the loading policy, obtain the second loading policy for the second logic file corresponding to the routing processor;

[0032] Control the network component to perform asynchronous rendering and loading in the first front-end project according to the second loading policy.

[0033] In a second aspect, an embodiment of the present invention provides a front-end project loading control system, and the system includes:

[0034] An initialization unit, configured to obtain the second front-end project corresponding to the first front-end project for loading according to the first front-end project, and construct an entry file corresponding to the first front-end project;

[0035] A first setting unit, configured to control the creation of a mounting entry point corresponding to the second front-end project in the entry file based on the second front-end project, and determine the loading policy based on the mounting entry point;

[0036] A second setting unit, configured to construct a network component corresponding to the second front-end project, and obtain the product directory corresponding to the network component;

[0037] A combined loading unit, configured to save the resources corresponding to the second front-end project in the product directory to the first front-end project, and control the first front-end project to perform loading based on the loading policy.

[0038] In a third aspect, an embodiment of the present invention further provides an electronic device, including a processor and a memory, where the memory stores computer-executable instructions that can be executed by the processor, and the processor executes the computer-executable instructions to implement the steps of the front-end project loading control method provided in the first aspect.

[0039] In a fourth aspect, an embodiment of the present invention further provides a storage medium, and the storage medium stores computer-executable instructions. When the computer-executable instructions are called and executed by the processor, the computer-executable instructions cause the processor to implement the steps of the front-end project loading control method provided in the first aspect.

[0040] A front - end project loading control method, system and electronic device provided by an embodiment of the present invention, in the process of controlling the loading of a front - end project, the method first obtains a second front - end project corresponding to the first front - end project for loading, and constructs an entry file corresponding to the first front - end project; then controls the creation of a mounting entry point corresponding to the second front - end project in the entry file based on the second front - end project, and determines a loading strategy based on the mounting entry point; subsequently constructs a network component corresponding to the second front - end project, and obtains the product directory corresponding to the network component; finally saves the resources corresponding to the second front - end project in the product directory to the first front - end project, and controls the first front - end project to execute loading based on the loading strategy. This method realizes the componentized loading process by introducing a network component, and lodges the new front - end project in the old front - end project in a hosting manner, which can integrate the new and old front - end projects without affecting the production environment, thereby optimizing the system framework of the front - end project and reducing the risks existing in the upgrade process.

[0041] Other features and advantages of the present invention will be described in the following specification, and, in part, will be obvious from the specification, or will be understood by implementing the present invention. The objectives and other advantages of the present invention are realized and obtained by the structures specifically pointed out in the specification, claims and drawings.

[0042] To make the above - mentioned objectives, features and advantages of the present invention more obvious and understandable, the following specifically lists preferred embodiments and, in conjunction with the accompanying drawings, is described in detail as follows. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] In order to more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the following will briefly introduce the drawings required for use in the description of the specific embodiments or the prior art. Obviously, the following - described drawings are some embodiments of the present invention. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0044] Figure 1 It is a flowchart of a front - end project loading control method provided by an embodiment of the present invention;

[0045] Figure 2 It is a flowchart of step S101 in a front - end project loading control method provided by an embodiment of the present invention;

[0046] Figure 3 It is a flowchart of step S102 in a front - end project loading control method provided by an embodiment of the present invention;

[0047] Figure 4 It is a flowchart of step S103 in a front - end project loading control method provided by an embodiment of the present invention;

[0048] Figure 5 In the front - end project loading control method provided by the embodiments of the present invention, the flowchart for saving the resources corresponding to the second front - end project in the product directory to the first front - end project;

[0049] Figure 6 In the front - end project loading control method provided by the embodiments of the present invention, the flowchart for controlling the first front - end project to execute loading based on the loading strategy;

[0050] Figure 7 In the front - end project loading control method provided by the embodiments of the present invention, the flowchart of step S602;

[0051] Figure 8 In another front - end project loading control method provided by the embodiments of the present invention, the flowchart of step S602;

[0052] Figure 9 In another front - end project loading control method provided by the embodiments of the present invention, the flowchart;

[0053] Figure 10 In the front - end project loading control method provided by the embodiments of the present invention, the logical schematic diagram;

[0054] Figure 11 In the front - end project loading control system provided by the embodiments of the present invention, the structural schematic diagram;

[0055] Figure 12 In the front - end project loading control method provided by the embodiments of the present invention, the structural schematic diagram of an electronic device.

[0056] Icon:

[0057] 1110 - Initialization unit; 1120 - First setting unit; 1130 - Second setting unit; 1140 - Merged loading unit;

[0058] 101 - Processor; 102 - Memory; 103 - Bus; 104 - Communication interface. Detailed implementation manners

[0059] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the present invention will be clearly and completely described below in conjunction with the embodiments. Obviously, the described embodiments are some, but not all, of the embodiments of the present invention. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts fall within the scope of protection of the present invention.

[0060] In the context of the increasing complexity of front-end project engineering, how to maintain it is a difficult problem for the operation and maintenance side. These front-end projects rely on older tools such as Webpack and npm and are difficult to adapt to the rapidly developing front-end technologies. Especially when new technologies need to be integrated into the business, traditional upgrade methods are difficult to implement. Especially when widely applied in the production environment, it may bring unexpected problems. Therefore, older front-end technologies are still used in many front-end projects, resulting in a more complex system framework for front-end projects and a higher upgrade risk. Based on this, the embodiments of the present invention provide a front-end project loading control method, system and electronic device. This method realizes the componentized loading process by introducing network components and lodges the new front-end project in the old front-end project in a hosted manner, enabling the integration of the new and old front-end projects without affecting the production environment, thereby optimizing the system framework of the front-end project and reducing the upgrade risk.

[0061] To facilitate the understanding of this embodiment, first, a detailed introduction to a front-end project loading control method disclosed in the embodiments of the present invention is provided, as Figure 1 shown. The method includes the following steps:

[0062] Step S101, obtain the second front-end project corresponding to the first front-end project for loading according to the first front-end project, and construct an entry file corresponding to the first front-end project;

[0063] Step S102, control the creation of a mounting entry point corresponding to the second front-end project in the entry file based on the second front-end project, and determine a loading strategy based on the mounting entry point;

[0064] Step S103, construct a network component corresponding to the second front-end project, and obtain the product directory corresponding to the network component;

[0065] Step S104, save the resources corresponding to the second front-end project in the product directory to the first front-end project, and control the first front-end project to perform loading based on the loading strategy.

[0066] The first front-end project in this solution can be understood as the old front-end project, and the second front-end project is the new front-end project. The second front-end project needs to be embedded in the first front-end project for display. In this process, a closed architecture needs to be adopted to isolate the second front-end project so that it is logically isolated from the first front-end project in terms of business. Therefore, after determining the first front-end project and the second front-end project, first construct an entry file corresponding to the first front-end project. This entry file can serve as the starting page of the first front-end project and is called through a specific path to execute the front-end project loading process.

[0067] After the entry file is obtained, the second front-end project needs to be mounted. Specific attributes or parameters of the second front-end project are used to create its specific mounting and loading points in the entry file, and subsequent loading strategies are obtained through the mounting and loading points. Then, the second front-end project needs to be built to achieve the closed isolation of the second front-end project by building its corresponding network components. For example, the network components can be implemented using Web Component. By introducing Web Component, the componentization of the second front-end project can be achieved, enabling the coexistence of old and new technologies. After obtaining the product directory corresponding to the network component, the resources corresponding to the second front-end resources in this directory are obtained and saved in the corresponding path of the first front-end directory, and the first front-end project is loaded and processed using the corresponding loading strategy.

[0068] Optionally, the steps S101 of obtaining the second front-end project corresponding to the first front-end project and building the entry file corresponding to the first front-end project are as Figure 2 shown, including:

[0069] Step S201, build the first product directory corresponding to the first front-end project, and build the first logic file and the first entry file corresponding to the first front-end project based on the first product directory;

[0070] Step S202, determine the second front-end project that the first front-end project needs to load, and obtain the component name corresponding to the second front-end project;

[0071] Step S203, update the first entry file using the component name to obtain the entry file of the first front-end project.

[0072] As an existing front-end project, during the loading and building process of the first front-end project, first build the first product directory corresponding to the first front-end project, denoted as build; then build the first logic file app.js and the first entry file index.html corresponding to the first front-end project in the first product directory; at this time, the complete path of the first logic file is / build / app.js, and the complete path of the first entry file is / build / index.html.

[0073] After the first front-end project is built, obtain the second front-end project it needs to load, and determine its corresponding component name my_app. After the component name is determined, update it to the first entry file index.html, thus completing the construction of all products under the build path in the first front-end project.

[0074] On this basis, the steps S102 of controlling the creation of the mounting entry point corresponding to the second front-end project in the entry file and determining the loading strategy based on the mounting entry point are as Figure 3As shown in the figure, it includes:

[0075] Step S301: Obtain the HyperText Markup Language (HTML) file corresponding to the entry file.

[0076] Step S302: Use the component name to determine the tag element corresponding to the HTML file, and mount the tag element to the body tag of the HTML file to generate a mounting entry point.

[0077] Step S303: Determine the access path corresponding to the first front-end project according to the component name, and determine the loading strategy based on the mounting entry point and the access path.

[0078] At this time, the entry file is the first entry file index.html, which is essentially an HTML file. Therefore, after obtaining the HTML file corresponding to the entry file, use the component name to obtain the corresponding tag element in the HTML file, and mount it to the body tag to generate a mounting entry point. In actual operation, it can be achieved through document.createElement(“my_app”) in javascript, and then place the tag element corresponding to my_app <myapp / > inside the body tag of the HTML to generate a mounting entry point.

[0079] After determining the mounting entry point, use the component name to determine the access path corresponding to the first front-end project, so as to generate different loading strategies. Specifically, the access path is the original path and the new path including the component name, and different loading strategies are adopted according to the different paths, that is, the loading strategy corresponding to the first front-end project under the original path and the loading strategy corresponding to the second front-end project under the new path.

[0080] Optionally, step S103 of constructing the network component corresponding to the second front-end project and obtaining the product directory corresponding to the network component, as Figure 4 shown in the figure, includes:

[0081] Step S401: Use the component name to determine the export logic parameters corresponding to the second front-end project, and use the export logic parameters to construct the network component of the second front-end project.

[0082] Step S402: Based on the network component, construct the second logic file and the second entry file corresponding to the second front-end project.

[0083] Step S403: Obtain the second product directory corresponding to the second logic file and the second entry file, and determine the product directory corresponding to the network component based on the second product directory.

[0084] Taking Web Component as an example, the second front-end project corresponds to a new project of Web Component. First, determine the export logic parameters corresponding to the second front-end project using the component name, and then use this parameter to construct the WebComponent of the second front-end project, so as to create the component name in the export logic of the project. The specific implementation method is as follows: customElements.define("my-app", MyApp); my-app.

[0085] After the Web Component of the second front-end project is constructed, based on this project, construct its corresponding second logic file my_app.js and second product directory index2.html, and obtain its corresponding second product directory build, so as to construct the product directory build of the Web Component, which respectively contains / build / my_app.js and / build / index.html.

[0086] Optionally, save the resources corresponding to the second front-end project in the product directory to the first front-end project, as Figure 5 shown, including:

[0087] Step S501, generate a project folder corresponding to the second front-end project according to the component name;

[0088] Step S502, copy the resources corresponding to the second front-end project in the product directory to the project folder.

[0089] During the process of resource saving, it is necessary to generate a project folder my_app corresponding to the second front-end directory according to the component name, and copy the resources corresponding to the second front-end directory in this product directory to the project folder. At this time, in the first front-end directory, its build directory contains: / build / app.js, / build / index.html, / build / my_app / my_app.js, / build / my_app / index.html, / build / my_app.

[0090] Optionally, control the execution and loading of the first front-end project based on the loading strategy, as Figure 6 shown, including:

[0091] Step S601, obtain the request instruction corresponding to the first front-end project, and determine the route processor corresponding to the first front-end project after parsing the request instruction; among them, the route processor is determined based on the first logic file and the second logic file;

[0092] Step S602: Determine the loading policy corresponding to the routing processor, and use the loading policy to load the first front-end project according to the corresponding routing processor.

[0093] In the process of controlling the loading of the first front-end directory based on the loading policy, it is necessary to combine its specific routing processor to achieve the loading of the first front-end project, and the routing processor is mainly determined by the first logic file app.js and the second logic file my_app.js. When the routing processor corresponds to the first logic file app.js, the access path of its corresponding loading policy is http: / / localhost / ; when the routing processor corresponds to the second logic file my_app.js, the access path of its corresponding loading policy is http: / / localhost / my_app. After the loading policy is determined, the first front-end project can be loaded according to the logic contained in the corresponding routing processor. It should be noted that the above http: / / localhost / and http: / / localhost / my_app are both local virtual access paths and do not involve accessing external networks. The same applies to the above access paths mentioned later and will not be elaborated further.

[0094] Optionally, step S602 of using the loading policy to load the first front-end project according to the corresponding routing processor is as Figure 7 shown and includes:

[0095] Step S701: Based on the loading policy, obtain the first loading policy corresponding to the first logic file of the routing processor;

[0096] Step S702: Control the rendering and loading of the first front-end project according to the first loading policy.

[0097] At this time, the loading policy corresponds to the first logic file app.js, which is used as the first loading policy, and the access path is http: / / localhost / . When the user requests this http: / / localhost / path through the browser, the corresponding first loading policy in app.js is executed, and the components in the first front-end project are rendered and output to the browser page.

[0098] Optionally, step S602 of using the loading policy to load the first front-end project according to the corresponding routing processor is as Figure 8 shown and includes:

[0099] Step S801: Based on the loading policy, obtain the second loading policy corresponding to the second logic file of the routing processor;

[0100] Step S802: Control the asynchronous rendering and loading of network components in the first front-end project according to the second loading policy.

[0101] At this time, the loading strategy corresponds to the second logic file my_app.js. As the second loading strategy, the access path is http: / / localhost / my_app. When the user requests this path through the browser, the route handler corresponding to app.js can also be triggered first, and it is judged whether it contains Web Component components. If not, the components in the first front-end project are directly rendered and output to the browser page; if the above components are included, the second front-end project is rendered in the first front-end project as a new project. Specifically, the my_app.js file can be asynchronously loaded, the corresponding second loading strategy in my_app.js can be executed, and the asynchronous rendering and loading process can be implemented based on Web Component, and finally the picture is output to the browser page.

[0102] The above process is specifically as follows Figure 10 , when the user accesses the url of the browser, to start the old project, the user needs to access the old project http: / / localhost / (the home page of the old project), and the user accesses the specific route of the old project http: / / localhost / my_app (the route address of the newly embedded module).

[0103] And the user loads the file my_app.js of the web component build product through xhr (asynchronous loading technology) according to the accessed path / my_app. After listening for the completion of the script loading, the business logic of index.html is executed. The my_app.js file will initialize the page, call the browser's drawing view API to draw the interface, so as to realize the on-demand asynchronous loading of the independent application based on web Component.

[0104] When the user returns to http: / / localhost / (the home page of the old project), the user leaves the / my_app page, and the my_app.js internally implements the leave and destruction operations, so that the entire life cycle of the web component-based component is completed.

[0105] Such as Figure 9Flowchart of another front-end project loading control method based on the Web Component solution. In the figure, the name of the front-end project 2 is app2, which includes React 16 and other components such as antd5, reactflow, node_modules, etc.; the project based on the new web component architecture is named my_app, which also includes React 16 and other components such as antd5, reactflow, node_modules, etc. Both are packaged by webpack to generate the corresponding product directory build. The build in app2 contains app.js and index.html; the build in my_app contains my_app.js and index.html, and the my_app.js is the logic file corresponding to the web component.

[0106] Subsequently, rename the build in my_app to the my_app directory, and copy all the resources in this directory to the build directory in app2. At this time, the build in app2 contains all the resources of my_app. Provide static resource services through ngnix so that when users access index.html, they can load the resources corresponding to app2 and my_app. Thus, it can be seen that this solution enables a new project based on the latest front-end framework version to be opened while maintaining the operation of the old framework. The new project is organized and built using web component, and the input products after building are hosted on the nodes of the old framework in a hosting manner.

[0107] Under normal circumstances, the Web Component technology is only used for component isolation within the same project and is not used in the form of hybrid embedding between multiple projects. Using this technical architecture allows old projects to use newer technologies for hybrid embedding, thus greatly reducing the problem that old projects are too burdened with technology to be hybridized.

[0108] Traditionally, Web Component does not use the characteristics of Shadow Dom to encapsulate the component scope. This solution solves some problems of style common domain conflicts when new technology projects are embedded in old projects. Although the existing iframe can also achieve page rendering and isolate relevant applications, the loading speed of the iframe is slow. Each time an iframe is created, it is necessary to initialize the loading timing of the entire doc document, and it is also loaded by two threads; in addition, the pop-up window of the iframe cannot display the entire html doc body area and will be split by the sidebar area of the application, while this solution can avoid the above problems.

[0109] Each Web Component-based module in this solution can be independently packaged into a file named app.js. Multiple app.js files can be assembled together to form an interface, which can also be regarded as a new micro-frontend solution. Each module is developed by an independent team without interference. Moreover, each module can be loaded on demand. For example, when a user enters a URL, which independent sub-application to load is determined according to the input path, thus achieving the effect of improving the first-screen loading speed.

[0110] As can be seen from the front-end project loading control method described in the above embodiments, this method realizes the componentized loading process by introducing web components, and lodges the new front-end project in the old front-end project in a hosting manner, enabling the integration of the new and old front-end projects without affecting the production environment, thereby optimizing the system framework of the front-end project and reducing the risks existing in the upgrade process.

[0111] Corresponding to the above embodiments of the front-end project loading control method, an embodiment of the present invention also provides a front-end project loading control system, as Figure 11 shown. The system includes:

[0112] An initialization unit 1110, configured to obtain the second front-end project corresponding to the first front-end project according to the first front-end project, and construct an entry file corresponding to the first front-end project;

[0113] A first setting unit 1120, configured to control the creation of a mounting entry point corresponding to the second front-end project in the entry file based on the second front-end project, and determine a loading policy based on the mounting entry point;

[0114] A second setting unit 1130, configured to construct a web component corresponding to the second front-end project, and obtain a product directory corresponding to the web component;

[0115] A combined loading unit 1140, configured to save the resources corresponding to the second front-end project in the product directory to the first front-end project, and control the first front-end project to perform loading based on the loading policy.

[0116] As can be seen from the front-end project loading control system mentioned in the above embodiments, this system realizes the componentized loading process by introducing web components, and lodges the new front-end project in the old front-end project in a hosting manner, enabling the integration of the new and old front-end projects without affecting the production environment, thereby optimizing the system framework of the front-end project and reducing the risks existing in the upgrade process.

[0117] The front-end project loading control system provided by the embodiments of the present invention has the same implementation principle and technical effects as those of the foregoing embodiments of the front-end project loading control method. For the sake of brief description, for the parts not mentioned in the method embodiments, reference may be made to the corresponding content in the foregoing embodiments of the front-end project loading control method.

[0118] This embodiment also provides an electronic device, and the structural schematic diagram of the electronic device is as Figure 12 shown. The device includes a processor 101 and a memory 102; wherein, the memory 102 is used to store one or more computer instructions, and the one or more computer instructions are executed by the processor to implement the steps of the foregoing front-end project loading control method.

[0119] Figure 12 The electronic device shown also includes a bus 103 and a communication interface 104, and the processor 101, the communication interface 104, and the memory 102 are connected through the bus 103.

[0120] Among them, the memory 102 may include a high-speed random access memory (RAM, Random Access Memory), and may also include a non-volatile memory, such as at least one disk memory. The bus 103 may be an ISA bus, a PCI bus, an EISA bus, etc. The bus may be divided into an address bus, a data bus, a control bus, etc. For the sake of convenience of representation, Figure 12 only a bidirectional arrow is used in the figure, but it does not mean that there is only one bus or one type of bus.

[0121] The communication interface 104 is used to connect to at least one user terminal and other network units through a network interface, and send the encapsulated IPv4 packet or IPv4 packet to the user terminal through the network interface.

[0122] The processor 101 may be an integrated circuit chip with the ability to process signals. In the implementation process, each step of the above method can be completed by the integrated logic circuit of the hardware in the processor 101 or instructions in the form of software. The above-mentioned processor 101 may be a general-purpose processor, including a central processing unit (CPU for short), a network processor (NP for short), etc.; it may also be a digital signal processor (DSP for short), an application specific integrated circuit (ASIC for short), a field-programmable gate array (FPGA for short), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components. It can implement or execute the various methods, steps, and logic block diagrams disclosed in the embodiments of the present disclosure. The general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc. The steps of the method disclosed in combination with the embodiments of the present disclosure can be directly embodied as being executed and completed by a hardware decoding processor, or executed and completed by a combination of hardware and software modules in the decoding processor. The software module may be located in a mature storage medium in the art such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory, or an electrically erasable programmable memory, a register, etc. This storage medium is located in the memory 102, and the processor 101 reads the information in the memory 102 and combines its hardware to complete the steps of the method in the foregoing embodiments.

[0123] An embodiment of the present invention further provides a storage medium, on which a computer program is stored, and when the computer program is run by a processor, it executes the steps of the front-end project loading control method in the foregoing embodiments.

[0124] In the several embodiments provided in the present application, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. The device embodiments described above are only illustrative. For example, the division of the units is only a logical function division, and there may be other division methods in actual implementation. For another example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Another point is that the displayed or discussed couplings or direct couplings or communication connections to each other may be through some communication interfaces, and the indirect couplings or communication connections of devices or units may be in electrical, mechanical, or other forms.

[0125] The unit described as a separation component may or may not be physically separated. The component displayed as a unit may or may not be a physical unit, that is, it may be located in one place or distributed over multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0126] In addition, in each embodiment of the present invention, each functional unit may be integrated in a processing unit, may exist separately as individual physical units, or two or more units may be integrated in one unit.

[0127] If the above functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a non-volatile computer-readable storage medium executable by a processor. Based on such an understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, or a part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to enable a computer device (which may be a personal computer, an electronic device, or a network device, etc.) to execute all or part of the steps of the methods described in each embodiment of the present invention. The aforementioned storage medium includes: various media such as USB flash drives, mobile hard disks, read-only memories (ROM, Read-Only Memory), random access memories (RAM, Random Access Memory), magnetic disks, or optical discs that can store program codes.

[0128] Finally, it should be noted that the above-described embodiments are only specific implementation manners of the present invention, used to illustrate the technical solutions of the present invention, rather than limiting it. The protection scope of the present invention is not limited thereto. Although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that: any person skilled in the art within the technical scope disclosed by the present invention can still modify the technical solutions recorded in the foregoing embodiments, or can easily think of changes, or perform equivalent replacements for some of the technical features; and these modifications, changes, or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be covered by the protection scope of the present invention. Therefore, the protection scope of the present invention should be subject to the protection scope of the claims.

Claims

1. A front-end project loading control method, characterized in that, The method includes: Obtaining a second front-end project corresponding to the first front-end project and constructing an entry file corresponding to the first front-end project; wherein, the first front-end project is an old front-end project, and the second front-end project is a new front-end project to be embedded in the first front-end project for display; Based on the second front-end project, controlling the creation of a mounting entry point corresponding to the second front-end project in the entry file, and determining a loading policy based on the mounting entry point; Constructing a network component corresponding to the second front-end project and obtaining a product directory corresponding to the network component; wherein, the network component is used to componentize the second front-end project to isolate and enclose the second front-end project and the first front-end project; the constructing of the network component corresponding to the second front-end project includes: obtaining a component name corresponding to the second front-end project; using the component name to determine an export logic parameter corresponding to the second front-end project, and using the export logic parameter to construct the network component of the second front-end project; Saving resources corresponding to the second front-end project in the product directory to the first front-end project, and controlling the first front-end project to perform loading based on the loading policy; Controlling the first front-end project to perform loading based on the loading policy includes: Obtaining a request instruction corresponding to the first front-end project, and after parsing the request instruction, determining a routing processor corresponding to the first front-end project; wherein, the routing processor is determined based on a first logical js file and a second logical js file; the first logical js file is constructed based on a first product directory corresponding to the first front-end project, and the second logical js file is constructed based on the network component; Determining the loading policy corresponding to the routing processor, and using the loading policy to perform loading on the first front-end project according to the corresponding routing processor; Using the loading policy to perform loading on the first front-end project according to the corresponding routing processor includes: Based on the loading policy, obtaining a first loading policy of the routing processor corresponding to the first logical js file; Controlling the first front-end project to perform rendering and loading according to the first loading policy; Using the loading policy to perform loading on the first front-end project according to the corresponding routing processor further includes: Based on the loading policy, obtaining a second loading policy of the routing processor corresponding to the second logical js file; Controlling the network component to perform asynchronous rendering and loading in the first front-end project according to the second loading policy.

2. The front-end project loading control method according to claim 1, characterized in that Obtaining a second front-end project corresponding to the first front-end project and constructing an entry file corresponding to the first front-end project includes: Constructing a first product directory corresponding to the first front-end project, and constructing the first logical js file and the first entry file corresponding to the first front-end project based on the first product directory; Determining the second front-end project to be loaded by the first front-end project, and obtaining the component name corresponding to the second front-end project; After updating the first entry file with the component name, the entry file of the first front-end project is obtained.

3. The front-end project loading control method according to claim 2, wherein Based on the second front-end project, control is exerted to create a mounting entry point corresponding to the second front-end project in the entry file, and a loading strategy is determined based on the mounting entry point, including: Obtain the hypertext markup language file corresponding to the entry file; Use the component name to determine the tag element corresponding to the hypertext markup language file, and mount the tag element to the body tag of the hypertext markup language file to generate the mounting entry point; Determine the access path corresponding to the first front-end project according to the component name, and determine the loading strategy based on the mounting entry point and the access path.

4. The front-end project loading control method according to claim 2, wherein, Construct the network component corresponding to the second front-end project, and obtain the product directory corresponding to the network component, including: Based on the network component, construct the second logic js file and the second entry file corresponding to the second front-end project; Obtain the second product directory corresponding to the second logic js file and the second entry file, and determine the product directory corresponding to the network component based on the second product directory.

5. The front-end project loading control method according to claim 4, wherein Save the resources corresponding to the second front-end project in the product directory to the first front-end project, including: Generate a project folder corresponding to the second front-end project according to the component name; Copy the resources corresponding to the second front-end project in the product directory to the project folder.

6. A front-end project loading control system, characterized in that, The system includes: An initialization unit for obtaining the second front-end project to be loaded corresponding to the first front-end project according to the first front-end project, and constructing the entry file corresponding to the first front-end project; wherein, the first front-end project is an old front-end project, and the second front-end project is a new front-end project that needs to be embedded in the first front-end project for display; A first setting unit for controlling to create a mounting entry point corresponding to the second front-end project in the entry file based on the second front-end project, and determining a loading strategy based on the mounting entry point; A second setting unit for constructing the network component corresponding to the second front-end project and obtaining the product directory corresponding to the network component; wherein, the network component is used to componentize the second front-end project to isolate and enclose the second front-end project and the first front-end project; constructing the network component corresponding to the second front-end project includes: obtaining the component name corresponding to the second front-end project; using the component name to determine the export logic parameters corresponding to the second front-end project, and using the export logic parameters to construct the network component of the second front-end project; A combined loading unit for saving the resources corresponding to the second front-end project in the product directory to the first front-end project, and controlling the first front-end project to execute loading based on the loading strategy. During the process of controlling the first front-end project to perform loading based on the loading policy, the merging and loading unit is further configured to: obtain the request instruction corresponding to the first front-end project, and determine the routing processor corresponding to the first front-end project after parsing the request instruction; wherein, the routing processor is determined based on a first logical js file and a second logical js file; the first logical js file is constructed based on the first product directory corresponding to the first front-end project, and the second logical js file is constructed based on the network component; determine the loading policy corresponding to the routing processor, and use the loading policy to perform loading on the first front-end project according to the corresponding routing processor. During the process of using the loading policy to perform loading on the first front-end project according to the corresponding routing processor, the merging and loading unit is further configured to: based on the loading policy, obtain the first loading policy of the routing processor corresponding to the first logical js file; control the first front-end project to perform rendering loading according to the first loading policy. During the process of using the loading policy to perform loading on the first front-end project according to the corresponding routing processor, the merging and loading unit is further configured to: based on the loading policy, obtain the second loading policy of the routing processor corresponding to the second logical js file; control the network component to perform asynchronous rendering loading in the first front-end project according to the second loading policy.

7. An electronic device, characterized in that, It includes a processor and a memory, the memory stores computer-executable instructions that can be executed by the processor, and the processor executes the computer-executable instructions to implement the steps of the front-end project loading control method according to any one of claims 1 to 5.

Images