CN117009009A

CN117009009A - Application processing method, device, electronic equipment and computer readable storage medium

Info

Publication number: CN117009009A
Application number: CN202210475644.0A
Authority: CN
Inventors: 刘志龙; 蒋鹏; 程金山; 孙宇; 陈思名
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2022-04-29
Filing date: 2022-04-29
Publication date: 2023-11-07

Abstract

The embodiment of the application provides an application processing method, an application processing device, electronic equipment and a computer readable storage medium, and relates to the technical fields of cloud technology, front-end development and browser. The method is applied to a main application which is realized based on a micro front end and is integrated with at least one sub-application, and comprises the following steps: and responding to the loading request of the target sub-application, acquiring the content to be loaded, creating a corresponding inline frame in the main application, and generating a first component tree in the inline frame. And executing the content to be loaded in the inline frame, determining the components to be displayed from the first component tree, mapping the tree structure of the first component tree to generate an initial second component tree, adding the components identical to the components to be displayed in the corresponding node positions in the initial second component tree based on the node positions of the components to be displayed in the first component tree, and displaying the added components on a display interface of the main application. Isolation between the individual sub-applications is achieved, as well as component sharing between each sub-application and the main application.

Description

Application processing method, device, electronic equipment and computer readable storage medium

Technical Field

The application relates to the technical fields of cloud technology, front-end development and browser, in particular to an application processing method, an application processing device, electronic equipment, a computer readable storage medium and a computer program product.

Background

The micro front-end is a front-end architecture similar to micro services (microservices), applies the concept of micro services to a browser webpage end (web), and is a scheme for splitting a large project into sub-projects to achieve engineering split management, namely, a single large front-end application (i.e., a main application) is converted into an aggregation of a plurality of small front-end applications (i.e., sub-applications). Each sub-application can be independently operated, independently developed and independently deployed, so that the requirements of rapid service change and parallel development of distributed multiple teams are met, the requirement of a central front-end team is eliminated, and the application (main application) realized based on the micro front-end is still an application.

In applications (i.e., main applications) implemented based on micro front ends, isolation of each sub-application in the main applications is usually implemented based on a snapshot sandbox (sandbox, i.e., an independent execution environment that limits program behavior according to a security policy), a JS-frame mode sandbox, a state machine sandbox, etc., but these methods usually have a problem of escape of a scope, so that real isolation between each sub-application cannot be implemented, and the learning cost of a method for implementing isolation of each sub-application in the related art is high.

In the running process of the main application, as each sub application runs independently, the display content corresponding to each sub application is displayed in the display area corresponding to each sub application. For the same type of display content, if the type of display content is implemented based on different sub-application operations, the same type of display content is displayed in different display areas in the display interface of the same main application due to the difference of the display areas corresponding to different sub-applications, so that the current displayed content is brought to the use object of the main application from a plurality of applications, not from the chaotic sense of the current application which looks like "one application", the use experience is reduced, and the actual requirements cannot be met.

Disclosure of Invention

The embodiment of the application provides an application processing method, an application processing device, electronic equipment, a computer readable storage medium and a computer program product, which can solve the technical problems that the learning cost of a mode for realizing isolation of each sub-application is higher in the related technology, and the display content of the same type can be displayed in different display areas in a display interface of the same main application, so that the perception of display confusion is brought to a user. The specific technical scheme is as follows:

According to an aspect of the embodiment of the present application, there is provided an application processing method, which is applied to a main application implemented based on a micro front end, the main application being integrated with at least one sub-application, including:

responding to a loading request aiming at a target sub-application, acquiring content to be loaded corresponding to the target sub-application, and creating an inline frame corresponding to the target sub-application in a main application;

generating a first component tree in the inline frame, wherein the first component tree comprises at least two first nodes, and one first node is a preset component of the target sub-application;

executing the content to be loaded through an inline frame, determining components to be displayed from at least two first nodes, mapping a tree structure corresponding to a first component tree to generate an initial second component tree, and adding components identical to the components to be displayed at corresponding node positions in the initial second component tree based on the node positions of the components to be displayed in the first component tree so as to update the initial second component tree;

and displaying the components in the updated second component tree on the display interface corresponding to the main application.

According to another aspect of the embodiment of the present application, there is provided an application processing apparatus applied to a main application implemented based on a micro front end, the main application integrated with at least one sub-application, including:

The to-be-loaded content acquisition module is used for responding to a loading request aiming at the target sub-application and acquiring to-be-loaded content corresponding to the target sub-application;

the inline frame creation module is used for responding to the loading request and creating an inline frame corresponding to the target sub-application in the main application;

the first component tree generation module is used for generating a first component tree in the inline frame, wherein the first component tree comprises at least two first nodes, and one first node is a preset component of the target sub-application;

the mapping module is used for executing the content to be loaded through the inline frame, determining components to be displayed from at least two first nodes, mapping the tree structure corresponding to the first component tree to generate an initial second component tree, and adding components identical to the components to be displayed in the corresponding node positions in the initial second component tree based on the node positions of the components to be displayed in the first component tree so as to update the initial second component tree;

and the display module is used for displaying the components in the updated second component tree on the display interface corresponding to the main application.

In one possible implementation manner, after displaying, by the display module, the components in the updated second component tree on the display interface corresponding to the main application, the mapping module is further configured to:

Responding to a triggering operation aiming at a display interface, and determining a component to be updated corresponding to the triggering operation;

modifying a first node of the corresponding node position in the first component tree to be the component to be updated based on the node position of the component to be updated in the second component tree;

the display module is also used for displaying the components to be updated on the display interfaces corresponding to the main application.

In one possible implementation manner, when the display module displays the components in the updated second component tree on the display interface corresponding to the main application, the display module is specifically configured to:

hiding a first component tree in the inline frame;

generating target display content based on the updated components in the second component tree;

and displaying the target display content on a display interface corresponding to the main application.

In one possible implementation manner, the first component tree generating module is specifically configured to, when generating the first component tree in the inline frame:

generating an element selector corresponding to the target sub-application based on the loading request, wherein the element selector comprises at least two preset components and an association relation between every two preset components;

and generating a first component tree in the inline frame based on at least two preset components and the association relation between every two preset components.

In one possible implementation manner, the loading request includes an attribute of the main application, and the apparatus further includes a main application processing module, configured to:

if the attribute of the main application is that the idle preloading is supported, and the main application is at idle time, loading processing is carried out based on a preloading request in a preloading queue, wherein the preloading queue is generated based on a historical preloading request;

if the attribute of the main application is that keep-alive operation is supported, and an unloading request aiming at any sub-application is received, the content to be loaded of the sub-application corresponding to the unloading request is reserved.

In one possible implementation manner, the mapping module is specifically configured to, when executing the content to be loaded through the inline frame:

based on a time slicing algorithm, slicing the content to be loaded to obtain a plurality of sub-content to be loaded;

each sub-content to be loaded is executed in turn by the inline frame.

In one possible implementation manner, the loading request includes a target address corresponding to a target sub-application, and the to-be-loaded content acquiring module is specifically configured to, when acquiring to-be-loaded content corresponding to the target sub-application:

generating a first acquisition request based on the target address;

acquiring a target resource corresponding to a target address based on the first acquisition request;

Analyzing the target resource to obtain an analysis result corresponding to the target sub-application;

if the analysis result only comprises the first content to be loaded, taking the analysis result as the content to be loaded;

if the analysis result comprises a link corresponding to the first content to be loaded and a link corresponding to the second content to be loaded, generating a second acquisition request based on the link corresponding to the second content to be loaded; and acquiring second content to be loaded based on the second acquisition request, and determining the first content to be loaded and the second content to be loaded as the content to be loaded.

In one possible implementation manner, the content to be loaded includes a cascading style sheet, and the inline frame creation module may be further configured to, after creating the inline frame corresponding to the target sub-application:

setting the attribute of a target sub-application in the internal frame, wherein the attribute of the target sub-application comprises at least one of preset relative address attribute, preset entry attribute and reset style operation;

if the attribute of the target sub-application includes a preset relative address attribute, the content obtaining module to be loaded is specifically configured to, when generating a first obtaining request based on the target address:

determining a preset relative address based on the preset relative address attribute;

Converting the target address into a relative path corresponding to a preset relative address, and generating a first acquisition request based on the converted relative path;

if the attribute of the target sub-application includes a preset entry attribute, when the to-be-loaded content acquisition module generates the first acquisition request based on the address corresponding to the target sub-application, the to-be-loaded content acquisition module is specifically configured to:

based on a preset entry attribute, placing an address corresponding to the target sub-application in an entry character string corresponding to the preset entry attribute to obtain a first acquisition request;

if the attribute of the target sub-application includes a reset style operation, the mapping module is further configured to execute the content to be loaded through the inline frame, and set a style of the cascading style sheet in the content to be loaded as a corresponding style in the reset style operation;

the display module is specifically configured to, when displaying the updated component in the second component tree on the display interface corresponding to the main application:

and displaying the components in the updated second component tree on a display interface corresponding to the main application based on the set cascading style sheet.

According to yet another aspect of the embodiments of the present application, there is provided an electronic device including a memory, a processor and a computer program stored on the memory, the processor executing the computer program to perform the steps of the above method.

According to a further aspect of embodiments of the present application, there is provided a computer readable storage medium having stored thereon a computer program which, when executed by a processor, implements the steps of the above method.

According to a further aspect of embodiments of the present application, there is provided a computer program product comprising a computer program which, when executed by a processor, implements the steps of the above method.

The technical scheme provided by the embodiment of the application has the beneficial effects that:

the application processing method provided by the embodiment of the application is applied to a main application realized based on a micro front end, the main application is integrated with at least one sub application, under the condition that a target sub application (a new sub application) needs to be integrated into the main application (a loading request for the target sub application is received), the content to be loaded required by loading the target sub application is obtained based on the loading request, an inline frame corresponding to the target sub application is created in the main application, and the content to be loaded is executed through the inline frame, so that the integration of the target sub application into the main application can be realized. Because each sub-application corresponds to one inline frame, isolation between the target sub-application and other sub-applications in the main application can be realized, so that each sub-application can be independently operated, independently developed and independently deployed. Compared with the scheme for realizing isolation among all sub-applications based on the modes of a snapshot sandbox, a JS-frame mode sandbox, a state machine sandbox and the like in the related art, the scheme provided by the embodiment of the application can be realized based on the natural isolation of an inline frame, is simple and feasible, and can reduce the learning cost.

And because the corresponding content to be loaded is executed in the inline frame corresponding to the sub-application no matter what sub-application is, other processing is not needed to be carried out on the content to be loaded, a plurality of sub-applications can be embedded into the main application, the effect that the inline frames (new and old technology stacks) corresponding to different sub-applications coexist is achieved, and the compatibility is good.

In addition, a first component tree is generated in the inline frame based on the preset components of the target sub-application, in the process of executing the content to be loaded through the inline frame, the components to be displayed are determined from at least two first nodes in the first component tree, an initial second component tree is generated by mapping the tree structure corresponding to the first component tree in the main application, the components identical to the components to be displayed are added at the corresponding node positions of the initial second component tree based on the node positions of the components to be displayed in the first component tree, the mapping of the components to be displayed into mirror components (the components in the updated second component tree) is achieved, and document flow (namely display content corresponding to the components to be displayed) sharing can be achieved inside and outside the inline frame of the target sub-application (namely between the sub-application and the main application). In addition, as the mirror image component of the sub-application is displayed on the display interface corresponding to the main application, no matter which sub-application is integrated in the main application, the sub-application can be displayed in a display mode corresponding to the main application, and the use experience is improved.

Drawings

In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings that are required to be used in the description of the embodiments of the present application will be briefly described below.

FIG. 1 is a schematic diagram of a display interface according to an embodiment of the present application;

FIG. 2 is a schematic diagram of another display interface according to an embodiment of the present application;

FIG. 3 is a schematic diagram of yet another display interface provided by an embodiment of the present application;

FIG. 4 illustrates an architecture diagram of an application processing system provided by an embodiment of the present application;

fig. 5 shows a signaling interaction diagram of an application processing system according to an embodiment of the present application;

FIG. 6 illustrates a schematic diagram of a micro front end frame provided by an embodiment of the present application;

FIG. 7 is a schematic diagram of yet another display interface provided by an embodiment of the present application;

FIG. 8 is a schematic diagram of yet another display interface provided by an embodiment of the present application;

FIG. 9 is a flowchart of an application processing method according to an embodiment of the present application;

FIG. 10 is a schematic diagram of an application processing apparatus according to an embodiment of the present application;

fig. 11 is a schematic structural diagram of an electronic device to which the embodiment of the present application is applied.

Detailed Description

Embodiments of the present application are described below with reference to the drawings in the present application. It should be understood that the embodiments described below with reference to the drawings are exemplary descriptions for explaining the technical solutions of the embodiments of the present application, and the technical solutions of the embodiments of the present application are not limited.

As used herein, the singular forms "a", "an", "the" and "the" are intended to include the plural forms as well, unless expressly stated otherwise, as understood by those skilled in the art. It will be further understood that the terms "comprises" and "comprising," when used in this specification, specify the presence of stated features, information, data, steps, operations, elements, and/or components, but do not preclude the presence or addition of other features, information, data, steps, operations, elements, components, and/or groups thereof, all of which may be included in the present specification. It will be understood that when an element is referred to as being "connected" or "coupled" to another element, it can be directly connected or coupled to the other element or intervening elements may be present. Further, "connected" or "coupled" as used herein may include wirelessly connected or wirelessly coupled. The term "and/or" as used herein indicates that at least one of the items defined by the term, e.g., "a and/or B" may be implemented as "a", or as "B", or as "a and B".

For the purpose of making the objects, technical solutions and advantages of the present application more apparent, the embodiments of the present application will be described in further detail with reference to the accompanying drawings.

First, several terms related to the present application are described and explained:

HTML (Hyper Text Markup Language ): an application under standard universal markup language, also a specification, marks parts of a web page to be displayed by a mark-up symbol. The structure of HTML includes a "head" section that provides information about a web page and a "body" section that provides specific contents of the web page.

DOM (Document Object Model, file object model), a standard programming interface for processing extensible markup language recommended by W3C (world wide web consortium) organizations, can access and modify the content and structure of a document in a platform and language independent manner. In other words, DOM is a common method of representing and processing an HTML or XML document, and can be used in any programming language. The DOM is actually a document model that is described in an object-oriented manner. The DOM defines the objects needed to represent and modify a document, the behavior and properties of these objects, and the relationships between these objects.

Native (native): an transliteration is "local" and is understood to be capable of direct execution in an opposing platform or environment without the need for other executable devices or software assistance.

An inline frame: the method of embedding a child window in a window so as to introduce an external page in the child window can be realized by an iframe.

iframe: HTML (Hyper Text Markup Language ) tags, which function as documents in a document, or floating frames, whose elements create an inline frame (i.e., a row inside frame) that contains another document. The properties of the iframe object can be accessed but the contents cannot be accessed through the object model of the page where the iframe object is located.

Web Components (Web page component) technology: through a series of technical components, it is allowed to create reusable custom elements (the functions of custom elements may be encapsulated outside the code corresponding to the current web application (web)), and use custom elements through the current web application. Web Components technology includes three specifications, custom Element, shadow DOM, and HTML templates. They can be used together to create custom elements of the encapsulation function, which can be reused anywhere without causing code conflicts.

Cup elements: a set of JavaScript APIs (JavaScript, a client scripting language that is object and event driven and has relative security, API, application programming interface, representing an application program interface) allow for defining a custom elements and their behavior for use in a user interface as desired.

Shadow DOM: a set of JavaScript APIs for appending the encapsulated "shadow" DOM tree to the element (rendered separately from the main document DOM) and controlling its associated functionality. In this way, the functionality of the element is kept private to be scripted and stylized and not conflict with other parts of the document.

HTML templates: through the < template > element and the < slot > element, a markup template that is not displayed in the presentation page can be written and reused multiple times as a basis for custom element structures.

Creation element () is to create an object in an object to be used in conjunction with the appendhild () method or the insertBefore () method. The appendChild () method refers to adding a new child node to the child node list of the node. The insert before () method refers to inserting a new node at any position in the child node list of the node.

Spring window: when the webpage is opened, a window is automatically popped up.

Time Slicing (Time Slicing): time slicing is a widely used technical solution, and is essentially to divide a long task into at least one task with a short execution time, and then execute each task with a short execution time in turn.

As described in the background section, in order to improve data processing efficiency, an application is generally split into a plurality of sub-applications, each sub-application is respectively run and developed by different teams, and then the development results corresponding to each sub-application are aggregated to form the application. Or aggregating the plurality of applications into one aggregated application, respectively running and developing each application by a plurality of teams, and aggregating the development results corresponding to each application to form the aggregated application. In either case, in the embodiment of the present application, the application before aggregation is referred to as a child application, and the application obtained by aggregation is referred to as a master application (i.e., a parent application of the child application). It should be noted that, although one main application may be implemented by multiple teams during development, operation, and maintenance, it is still one application that is ultimately presented to the user object.

Typically, for each sub-application, the document stream corresponding to that sub-application (i.e., the content displayed to the user, e.g., popup window, document content, etc.) will be displayed only in the region corresponding to that sub-application, i.e., the current displayed document stream will be perceived as coming from multiple applications, not from the current application that appears to be "one application", as viewed by the user object of the main application, perceiving a page display clutter.

As one example, where the main application is a web-based shopping application (i.e., a browser-based shopping application), the sub-application is a detailed information page of an item (including the specific model, price, etc. of the item) in the web-based shopping application. As shown in fig. 1, by searching for, for example, "shirt" in the main application, a plurality of commodity lists about "shirt" may be displayed in a display interface corresponding to the main application, an area corresponding to each commodity in the commodity list may correspond to an entry address of the commodity, and by triggering the entry address of the commodity, a pop-up window corresponding to the detailed information of the commodity may be displayed. As shown in fig. 2, by triggering the display area where the "shirt 1" is located, a pop-up window corresponding to the detailed information of the shirt 1 can be displayed in the display area of the product list corresponding to the shirt 1 based on the entry address corresponding to the shirt 1. As shown in fig. 3, by triggering the display area where the "shirt 2" is located, a pop-up window corresponding to the detailed information of the shirt 2 can be displayed in the display area of the commodity list corresponding to the shirt 2 based on the entry address corresponding to the shirt 2.

Based on the description of fig. 2 and fig. 3, although the popup windows corresponding to the detailed information corresponding to the shirt 1 are all of the same type relative to the main application, the popup windows are displayed in different display areas of the display interface of the main application, so that the problem of display confusion is brought to the user, the experience is poor, and the actual requirements cannot be met.

In view of this, embodiments of the present application provide an application processing method, apparatus, electronic device, computer readable storage medium, and computer program product. Document flow sharing between the target sub-application and the main application may be achieved. In addition, no matter which sub-application is integrated in the main application, the sub-application can be displayed through the display mode corresponding to the main application, rather than the display mode corresponding to each sub-application, and the use experience is improved.

Optionally, the application processing method provided by the embodiment of the application can be implemented based on Cloud technology (Cloud technology). Cloud technology refers to a hosting technology for unifying serial resources such as hardware, software, network and the like in a wide area network or a local area network to realize calculation, storage, processing and sharing of data. The cloud technology is a generic term of network technology, information technology, integration technology, management platform technology, application technology and the like based on cloud computing business model application, can form a resource pool, and is flexible and convenient as required. Cloud computing technology will become an important support. Background services of technical networking systems require a large amount of computing, storage resources, such as video websites, picture-like websites, and more portals. Along with the high development and application of the internet industry, each article possibly has an own identification mark in the future, the identification mark needs to be transmitted to a background system for logic processing, data with different levels can be processed separately, and various industry data needs strong system rear shield support and can be realized only through cloud computing.

Optionally, the application processing method provided by the embodiment of the application can be realized based on a blockchain technology. Specifically, the content to be loaded used in the application processing method can be stored on the blockchain.

It should be noted that, in the alternative embodiments of the present application, related data is required to obtain permission or consent of the subject when the above embodiments of the present application are applied to specific products or technologies, and the collection, use and processing of related data is required to comply with related laws and regulations and standards of related countries and regions. That is, in the embodiment of the present application, if data related to the subject is involved, the data needs to be obtained through the subject authorization consent and in accordance with the relevant laws and regulations and standards of the country and region.

The technical solutions of the embodiments of the present application and technical effects produced by the technical solutions of the present application are described below by describing several exemplary embodiments. It should be noted that the following embodiments may be referred to, or combined with each other, and the description will not be repeated for the same terms, similar features, similar implementation steps, and the like in different embodiments.

Fig. 4 shows an architecture diagram of an application processing system according to an embodiment of the present application. As shown in fig. 4, the application processing system includes a development server 101, a terminal 102, and a resource acquisition server 103. The terminal 102 is installed with a main application program implemented based on a browser or a main application plug-in implemented based on a browser, and a display interface corresponding to the main application program (hereinafter referred to as a "main application") can be displayed by the terminal 102. A communication connection is established between the terminal 102 and the development server 101, and a communication connection is established between the terminal 102 and the resource acquisition server 103, where the communication connection may be established by a wired or wireless manner, which is not limited in the embodiment of the present application.

The terminal 102 can acquire the loading request for the target sub-application initiated by the development server 101 through the interaction process between the terminal 102 and the development server 101, further acquire the content to be loaded corresponding to the target sub-application through the interaction process between the terminal 102 and the resource acquisition server 103, and realize loading the target sub-application in the main application and setting a document stream sharing mechanism between the main application and the target sub-application through executing the content to be loaded in the terminal 102. Based on the triggering operation initiated by the application object of the main application on the display interface, the interaction process between the terminal 102 and the display interface can be realized, and further, based on the triggering operation and a document flow sharing mechanism between the main application and the target sub-application, the running content corresponding to the sub-application is displayed on the display interface. Wherein, in the process of loading the target sub-application by the main application and setting the document flow sharing mechanism between the main application and the target sub-application, the use object is not perceived. The operations performed by the terminal 102 may be implemented by a browser.

The server in the embodiment of the application can be an independent physical server, a server cluster or a distributed system formed by a plurality of physical servers, and can also be a cloud server for providing cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDNs, basic cloud computing services such as big data and artificial intelligent platforms, and the like. A terminal (which may also be referred to as a User terminal or User Equipment (UE)) may be a smart phone, a tablet, a notebook, a desktop computer, a smart voice interaction device (e.g., a smart speaker), a wearable electronic device (e.g., a smart watch), a vehicle-mounted terminal, a smart home appliance (e.g., a smart television), an AR (Augmented Reality), an augmented Reality)/VR (Virtual Reality) device, or the like.

It will be appreciated by those skilled in the art that the above terminals and servers are only examples, and that other terminals or servers that may be present in the present application or in the future are applicable to the present application and are also included within the scope of the present application and are incorporated herein by reference.

Fig. 5 shows a signaling interaction diagram of an application processing system according to an embodiment of the present application. The signaling interaction diagram shown in fig. 5 is for clearly explaining the application processing method, and is made by taking the application processing method provided by the embodiment of the present application as an example to apply the application processing method to the web shopping application, and combining the signaling interaction diagram made by the application processing method provided by the embodiment of the present application.

As shown in FIG. 5, the main application is a shopping webpage application, and the target sub-application is a detail page of a specific commodity (shirt 1) in the shopping webpage application. Specifically:

step 1: the development server 101 initiates a load request for the target sub-application to the terminal 102 in response to a control operation of the development object. As shown in fig. 6, the URL corresponding to the host application is: http:// name.com, the load request of the target sub-application (APP 1, shirt 1) may be: < rame-app src= "app1.Html"/>.

Step 2: as shown in fig. 6, the terminal 102 calls the browser API, creates a null iframe for the target sub-application in the same domain as the main application through document. The set attributes of the null iframe include attributes such as 'base' (preset relative address attribute), 'srcdoc' (preset entry attribute), and the like, and a reset style operation.

Step 3: the terminal 102 interacts with the resource acquisition server 103 by the following steps to acquire the content to be loaded of the target sub-application. It should be noted that, the content to be loaded supports cross-domain access.

(1) Analyzing the loading request to obtain the attribute of the main application statement (namely the attribute of the main application) and the html address of the target sub-application (namely the app1. Html), wherein the attribute of the main application statement comprises support of idle pre-loading and keep-alive operation on the sub-application.

(2) Based on app1.Html, app1.Html is converted into a relative path based on a preset relative address set in the 'base' attribute, and the converted app1.Html is put in srcdoc, for example: srcdoc=1. Html of the converted app, a first fetch request (i.e. a first fetch request, where the fetch request represents a data request method) is obtained, the first fetch request is sent to the resource fetch server 103, and the html resource returned by the resource fetch server 103 is obtained based on the response of the resource fetch server 103 to the first fetch request.

(3) And analyzing the html resource to obtain a CSS link, a JS link, an inline CSS code (namely CSS content, CSS is Cascading Style Sheets, cascading style sheets) and an inline JS code (namely JS content, JS is JavaScript) corresponding to the html resource, wherein the expression is a client-side script language which is driven based on objects and events and has relative safety.

(4) Based on the CSS link and the JS link, respectively converting the CSS link and the JS link into relative paths based on preset relative addresses set in the 'base' attribute, respectively placing the converted CSS link and JS link in the srcdoc to obtain a second fetch request (i.e., a second fetch request), sending the second fetch request to the resource fetch server 103, and based on a response of the resource fetch server 103 to the second fetch request, obtaining the inline CSS corresponding to the CSS link and the JS code corresponding to the JS link returned by the resource fetch server 103, and taking the two obtained inline CSS and JS codes as contents to be loaded.

And after the resource to be loaded is acquired, modifying the style in the CSS in the resource to be loaded into the set reset style.

As shown in fig. 6, another sub-application (APP 2, corresponding to < name-APP src= "APP2. Html"/>) needs to be loaded simultaneously in the main application, then the terminal 102 obtains the content to be loaded of APP2 at an idle time in the process of obtaining the content to be loaded of the target sub-application, and stores the corresponding content to be loaded in the cache of the web shopping application, so that when an activation request for APP2 is received, the content to be loaded of APP2 is directly taken out from the cache, and the activation speed of APP2 can be improved.

Step 4: the terminal 102 creates an original DOM node inside the iframe (i.e., in the target sub-application), creates a shadow DOM node outside the iframe (i.e., in the main application), adds the inline CSS modified to a reset style in the content to be loaded to the shadow DOM node, and hides the shadow DOM node. Wherein the original DOM node inside the iframe corresponds to the shadow DOM node outside the iframe.

Step 5: the terminal 102 determines a preset element selector based on a loading request of a target sub-application, wherein the preset element selector comprises preset components corresponding to the APP1 and association relations among the preset components, creates an original DOM tree at an original DOM node based on the preset element selector, and adds corresponding preset components at each node position in the original DOM tree.

As shown in fig. 6, the preset components in the preset element selector corresponding to APP1 include div1 (i.e., < div1>, division, separation, representing a block tag, equivalent to a line-feeder, and capable of dividing the document into separate and different parts, occupying a line, where all elements in div refer to a small area, any tag can be placed inside div, including div itself), div2 (i.e., < div2 >), p (i.e., , a graph, representing a paragraph in the document), span (i.e., , in-line tags, in span can place elements such as text, pictures, forms, etc.) and a (i.e., < a >) for defining an anchor. It should be noted that "1" and "2" in div1 and div2 only denote corresponding sequence numbers to distinguish one component from another, and the corresponding essence is div.

Wherein div1 is the root node in the first component tree, the child nodes of div1 include div2 and p, and the child nodes of p include span and a. Father-son relationship among each first node is the association relationship among preset DOMs. According to the father-son relationship between the first nodes, an original DOM tree corresponding to the original DOM node inside the iframe can be generated, and corresponding preset components are added at the positions of the nodes in the original DOM tree.

Step 6: the terminal 102 creates a change observer (a mutationonserver between the original DOM node and the shadow DOM node as shown in fig. 6) that detects DOM elements in the original DOM node through a mutationonserver technique, the change observer being in JSON format.

Step 7: the terminal 102 creates a script tag for the sub-application using the document. CreateElement, puts the JS content, the change observer, and the detector in the content to be loaded into the script tag to form a script, appends the script application to the inside of the iframe, executes the script inside the iframe by a time slicing algorithm, and sets the elements in the original DOM node to a hidden state.

And in the process of executing the script in the iframe, mapping a first assembly tree in the original DOM node at a shadow DOM node according to a tree structure of the first assembly tree in the original DOM node to generate a second assembly tree, adding DOM elements which are the same as the original DOM elements in the corresponding node positions of the second assembly tree according to the node positions of the original DOM elements in the first assembly tree, which are related to JS content, and adding the DOM elements which are changed in the original DOM node to the corresponding positions of the second assembly tree (as shown in fig. 6, penetrating the changed DOM elements in the original DOM node into the second assembly tree of the shadow DOM node through a change observer). And generating target display content according to the components in the shadow DOM node, and displaying the target display content on a display interface corresponding to the main application.

As shown in FIG. 6, the mirror assemblies are identical to the original DOM elements, each mirror assembly corresponds to one original DOM element, and the node position of each mirror assembly in the second assembly tree is identical to the node position of the corresponding original DOM element in the first assembly tree.

Wherein, while generating the mirror image component, a doubly linked list between the original DOM element and the mirror image component is created based on the node positions of the DOM elements in the respective corresponding DOM tree and the association relation between the DOM element and other nodes in the DOM tree.

By executing the JS content in the content to be loaded in the iframe, the target sub-application can be embedded into the main application, and the corresponding target sub-application can be regarded as a sandbox in the same domain as the main application. As shown in fig. 4, when a search operation for "shirt" is triggered in a search field in a display interface corresponding to a main application based on a use object, it is possible to display an entry address of shirt 1 corresponding to the target sub-application (APP 1) in a shirt list.

Step 8: terminal 102 creates an event detector (addEventListener pointing from the shadow DOM node to the original DOM node as shown in fig. 6) for detecting DOM elements in the shadow DOM node through a mutationonserver technique to detect whether an element in the shadow DOM node changes when a trigger operation is performed on the display interface using an object.

Step 9: the terminal 102 also adds the event detector to the script tag described above, forms a new script, and executes the new script application inside the iframe. If the event detector detects that an element in the shadow DOM node is changed, the element in the corresponding position in the original DOM node is changed according to the doubly linked list (as shown in fig. 6, the changed DOM element in the shadow DOM node is sent to the first component tree of the original DOM node by the event detector to change the element in the corresponding position in the original DOM node), and the doubly linked list is updated.

Because other sub-applications also operate in the process of operating the main application, the current DOM element (namely the original DOM element) in the target sub-application is also caused to be changed based on the chain reaction, if the change detector detects that the DOM element corresponding to the first node in the original DOM node is changed, the same mirror image component is generated at the same node position of the second component tree in a mapping mode, and the doubly-linked list is updated.

Through the operation, the document flow sharing inside and outside the iframe can be realized, and the mirror image components of the sub-applications are displayed on the display interfaces corresponding to the main application, so that no matter which sub-application is integrated in the main application, the sub-applications can be displayed in a display mode corresponding to the main application, and the use experience is improved.

The full screen display can be performed on the display interface of the main application, or the partial area of the display interface of the main application can be displayed.

For example, in the triggering operation of using the object to the region where the "shirt 1" is located on the display interface shown in fig. 4, based on the triggering operation, a mirror image component of the shadow DOM node and a corresponding component of the original DOM node may be changed, and a target display content may be generated based on the mirror image component and displayed in the display interface of the main application. As shown in fig. 7, the details popup window of the shirt 1 may be displayed full screen on the display interface of the host application. As shown in fig. 8, the details popup window of the shirt 1 may be displayed in a designated area on the display interface of the host application.

Step 10: when receiving the uninstall request for the target sub-application initiated by the development server 101, the terminal 103 may hide the iframe corresponding to the target sub-application when the attribute of the main application declaration acquired in the step 3 includes keep-alive operation for the sub-application, and reserve the script corresponding to the target sub-application, so that when receiving the activation operation for the target sub-application initiated by the development server next time, the hidden script for the target sub-application may be directly taken out, thereby accelerating the activation speed for the target sub-application.

Fig. 9 shows a flowchart of an application processing method according to an embodiment of the present application. As shown in fig. 9, the method is applied to a micro front end implementation-based main application, which is integrated with at least one sub-application, and can be implemented through a browser implementation-based micro front end framework. Specifically, the method comprises steps S901 to S904.

Step S901: and responding to a loading request aiming at the target sub-application, acquiring the content to be loaded corresponding to the target sub-application, and creating an inline frame corresponding to the target sub-application in the main application.

The load request may be a declaration operation for the target sub-application generated by a development object of the main application based on development requirements.

In one possible implementation manner, for a main application, the corresponding micro front end framework may set a tag with a custom name < name-app/>, based on the customs elements in the web component technology, and by adding an address corresponding to a sub-application that needs to be embedded into the main application in the custom tag, the declaration of the sub-application is implemented. The address corresponding to the sub-application may include an identifier corresponding to the sub-application, so that it may be determined, according to resolving the address corresponding to the sub-application, which sub-application the address of the current sub-application belongs to. For a sub-application, the corresponding identifier may be a number identifier, a letter identifier, a combination of the number identifier and the letter identifier, etc., which may be determined according to actual requirements, which is not limited in the embodiment of the present application.

As an example, as shown in fig. 6, the declaration of APP1 may be: < rame-APP src= "APP1.Html"/>, the declaration of APP2 may be: < rame-app src= "app2.Html"/>. Wherein the destination address corresponding to APP1 or APP2 is an html address. In the target address corresponding to APP1, the identifier corresponding to APP1 is APP1.

The target address of the content to be loaded of the target sub-application corresponding to the loading request may be obtained in a loading request, where the target address of the content to be loaded may include, but is not limited to, an html address or a JS entry address, and the embodiment of the present application is not limited to this. Therefore, the content to be loaded corresponding to the target sub-application can be further obtained through the loading request.

In the case that the main application receives a loading request for the target sub-application, a lifecycle corresponding to the target sub-application may be set in response to the loading request. The lifecycle of a corresponding target sub-application may be a processing procedure of a loading request, for example, firstly, obtain a content to be loaded of the target sub-application, further create a corresponding inline frame, map and generate a second component tree and a corresponding mirror component in a process of running the content to be loaded in the inline frame, display the mirror component on a display interface corresponding to a main application, and then perform unloading operation on the target sub-application based on an unloading request of the target sub-application.

For a main application, the corresponding micro front end framework can create an inline framework corresponding to a target sub-application in the same domain of the main application through calling an API of a browser corresponding to the main application and creating a sandbox corresponding to the target sub-application based on further operation of the inline framework. The inline frame may be implemented by an iframe, and a specific inline frame may include, but is not limited to, a technical stack, a frame, vue, act, angularjs, jQuery, and the like, which are not limited by the embodiment of the present application.

When creating an inline frame (i.e., before the content to be loaded is not executed by the inline frame), for the inline frame, it may be an inline frame in which the content in src is empty (src= ", the content in src is identified by a space, i.e., indicates that the content in src is empty) or in which the content in src is a pseudo protocol.

In one possible implementation manner, the content to be loaded corresponding to the target sub-application may be obtained by:

the loading request includes a target address corresponding to a target sub-application, and the obtaining content to be loaded corresponding to the target sub-application may include:

generating a first acquisition request based on the target address;

After receiving the loading request, the micro front end frame (i.e. the micro front end frame corresponding to the main application) can obtain the target address corresponding to the target sub-application by analyzing the loading request. In one possible implementation, the load request may also include a property of the main application declaration, etc., which is not limited by the embodiment of the present application. The attributes of the main application declaration can include, but are not limited to, supporting idle preloading and keep-alive operation on the sub-applications, and can be determined according to practical situations.

The target address corresponding to the target sub-application may include, but is not limited to, an html address and a JS entry address corresponding to the target sub-application, which may be determined according to actual requirements, which is not limited in the embodiment of the present application.

The target address corresponding to the target sub-application may or may not support cross-domain access, which is not limited by the embodiment of the present application. Under the condition that the target address corresponding to the target sub-application is used for supporting cross-domain access, the micro front end framework can remotely load the target address through a server based on the target address to acquire corresponding content to be loaded. And under the condition that the target address corresponding to the target sub-application does not support cross-domain access, the corresponding content to be loaded can be obtained through the local storage space of the terminal provided with the main application. Considering that the main application is mainly an application realized based on a browser, namely, a web page application, in the embodiment of the present application, the description is given by taking an example that the target address corresponding to the target sub-application supports cross-domain access, and correspondingly, the process of obtaining the content to be loaded in a cross-domain manner may also be called remote resource loading.

The first and second acquisition requests may be implemented in manners including, but not limited to, browser-based fetch requests, XMLHttpRequest, websocket, and the like. In the embodiment of the present application, the first acquisition request and the second acquisition request are taken as examples of a fetch request based on a browser.

The micro front end framework sends a corresponding browser-based fetch request to the resource acquisition server, so that the corresponding resource can be acquired. That is, the first fetch request may be a browser-based first fetch request and the second fetch request may be a browser-based second fetch request.

Through the first fetch request, the target resource corresponding to the target address, namely the html content, can be obtained.

In one possible implementation, the target resource may be parsed in a regular matching manner, with the resulting parsing results including, but not limited to, CSS links, JS links, inline CSS content, and inline JS content. Of course, other manners may be used to analyze the target resource, which is not limited by the embodiment of the present application.

The inline CSS content and the inline JS content may be directly executed without resource loading again, i.e., if the parsing result includes only the first content to be loaded (the inline CSS content and the inline JS content), the first content to be loaded may be directly used as the content to be loaded. The CSS link and the JS link cannot be directly executed, and resource loading is needed to be carried out again until the CSS content or the JS content which can be directly executed is obtained, namely if the analysis result comprises a first content to be loaded and a link corresponding to a second content to be loaded, a second obtaining request is generated based on the link corresponding to the second content to be loaded; and acquiring second content to be loaded based on the second acquisition request, and determining the first content to be loaded and the second content to be loaded as the content to be loaded.

By the method, the content to be loaded corresponding to the target sub-application can be obtained based on the loading request.

Step S902: a first component tree is generated in the inline frame, the first component tree comprising at least two first nodes, one first node being a preset component of the target sub-application.

The first component tree may be generated based on the target sub-application and at least two preset components corresponding to the adaptation requirements of the target sub-application. The first component tree may be generated by the following alternative implementations.

In one possible implementation manner, the generating the first component tree in the inline frame may include:

The element selector may be a preset element selector, and in particular, may be determined based on a load request of the target sub-application. The preset element selector may be determined based on information including, but not limited to, the type of the target sub-application, the custom requirements (display content, etc.) of the target sub-application, and the like. In one possible implementation, for a web application, a document stream (including, but not limited to, a document formed of text, pictures, forms, etc.) displayed in the web application may be represented by DOM elements, in embodiments of the application, components, i.e., DOM elements.

For example, when the target sub-application needs to display a document containing text and pictures, the corresponding element selector may include the component and the component . The preset element selector may include preset elements and an association relationship between the preset elements (i.e., an association relationship between every two preset elements). The association relationship between the preset components can be a parent-child relationship.

For example, the preset DOM elements may include, but are not limited to, < div >, , , < a >, etc., which may be determined according to the actual situation, and the embodiment of the present application is not limited thereto.

The process of generating the first component tree in the inline frame, i.e., validating the element selector corresponding to the target child application within the iframe. Specifically, each preset component may be sequentially connected according to preset components having an association relationship in the element selector, so as to generate a first component tree in the inline frame. Furthermore, corresponding preset DOM elements are added at each node position of the first component tree, and each node position corresponds to one first node, namely one preset DOM element.

By the method, the first component tree can be generated inside the inline frame corresponding to the target sub-application based on the element selector corresponding to the target sub-application.

Step S903: and executing the content to be loaded through the inline frame, determining components to be displayed from at least two first nodes, mapping the tree structure corresponding to the first component tree to generate an initial second component tree, and adding components identical to the components to be displayed in the corresponding node positions in the initial second component tree based on the node positions of the components to be displayed in the first component tree so as to update the initial second component tree.

In this implementation, a script tag may be created by using document/create element, the content to be loaded is added to the script tag to form a script, the script is applied (appended) to the inline frame, and the content to be loaded is executed through the inline frame. By performing tag declaration on the sub-application, the content to be loaded is directly placed in the script tag, so that the corresponding script is directly executed through the inline frame, the pure iframe execution can be realized, and the compatibility is good. And the method does not need to expose the life cycle of the target sub-application, and the access cost of the target sub-application is lower.

Because the JS content in the content to be loaded is the content truly related to the target sub-application, the DOM element of the original DOM node is obtained based on the effectiveness of the preset element selector, and only the DOM element related to the target sub-application in the DOM element of the original DOM node is executed, namely changed in the process of executing the JS content in the content to be loaded. By executing the JS content in the content to be loaded, the component (i.e., the component to be displayed) related to the target sub-application in the preset element selector (i.e., at least two first nodes) can be determined.

In the process of executing the script in the iframe, if the change detector detects that the DOM element corresponding to the first node in the original DOM node is changed, generating a tree structure mapping of the original DOM element to the shadow DOM node to form a second component tree, and generating the same DOM element according to the node position of the changed DOM element in the original DOM tree and the same node position mapping of the second component tree (namely, adding the same component as the component to be displayed in the corresponding node position in the initial second component tree so as to update the initial second component tree).

Since the tree structure of the second component tree is the same as the tree structure of the first component tree, the second component tree may also be referred to as a mirror DOM tree. Since the components in the second component tree are identical to the components in the corresponding locations in the first component tree, the components in the second component tree may be referred to as mirror components.

In this implementation, a doubly linked list between the original DOM elements and the mirror component may also be created based on the node positions of the DOM elements in the respective corresponding DOM tree and the association relationship between the DOM elements and other nodes in the DOM tree, etc. while the mirror component is being generated, to ensure the associated query between the inside of the iframe (target sub-application) and the outside of the iframe (main application).

As shown in fig. 6, in one possible implementation manner, a change observer (mutationonserver) for detecting each first node in the first component tree may be created through a mutationonserver technology, and the change observer is used as content to be loaded, and executed through an inline frame, so that in a process of executing JS content corresponding to a target sub-application through the inline frame, a component to be displayed is determined from at least two first nodes based on the change observer, and the iframe operation is proxy to a window. Of course, determining the component to be displayed from the at least two first nodes may be implemented by means of objectdefining property, new Proxy, etc.

In this implementation, before mapping the tree structure corresponding to the first component tree to generate the initial second component tree, the method may further include creating a shadow DOM node in the host application, where the shadow DOM node may be used to store the second component tree and each node on the second component tree.

The initial second component tree includes a tree structure corresponding to the first component tree, i.e., only "empty" component trees corresponding to the relationships between the respective first nodes. After the second component tree adds the same components as the components to be displayed at the corresponding node positions in the initial second component tree, in the updated second component tree, DOM elements of the corresponding node positions, that is, mirror image components, are not present at other node positions except for the corresponding node positions. I.e. the components in the updated second component tree, i.e. the mirror components.

Step S904: and displaying the components in the updated second component tree on the display interface corresponding to the main application.

Because the sub-application and the main application can be independently developed and independently operated, namely, the DOM elements in the original DOM node and the DOM elements in the shadow DOM node in the iframe can be revealed, and the DOM elements in the shadow DOM node in the original DOM node are completely the same, in order to avoid the confusion of the exhibition, the DOM elements in the original DOM node can be hidden, and the mirror image component is displayed on the display interface corresponding to the main application.

It should be noted that, the application processing method provided in the embodiment of the present application may be applied not only to loading the corresponding sub-applications through the main application, so as to embed the sub-applications into the main application, but also to mutually nest the sub-applications. For example, a new sub-application is embedded into a sub-application corresponding to a main application, where the new sub-application is the sub-application of the sub-application corresponding to the main application.

The application processing method provided by the embodiment of the application can realize the isolation between the target sub-application and other sub-applications in the main application, so that each sub-application can be independently operated, independently developed and independently deployed, is simple and easy to implement, and can reduce the learning cost.

Because the corresponding content to be loaded is executed in the inline frame corresponding to the sub-application no matter what sub-application is, other processing is not needed to be carried out on the content to be loaded, a plurality of sub-applications can be embedded into the main application, the effect that the inline frames (new and old technology stacks) corresponding to different sub-applications coexist is achieved, and the compatibility is good.

In addition, in the process of executing the content to be loaded through the inline frame, determining the component to be displayed from at least two first nodes in the first component tree, mapping the tree structure corresponding to the first component tree in the main application to generate an initial second component tree, and mapping the component to be displayed to the corresponding node position of the initial second component tree, so that document flow sharing can be realized inside and outside the inline frame of the target sub-application (namely, between the sub-application and the main application). In addition, as the mirror image component of the sub-application is displayed on the display interface corresponding to the main application, no matter which sub-application is integrated in the main application, the sub-application can be displayed in a display mode corresponding to the main application, and the use experience is improved.

Considering that each component element is a component related to specific display content and is not the display content itself, the embodiment of the present application further provides the following optional implementation manners:

The displaying the updated components in the second component tree on the display interface corresponding to the main application includes:

hiding a first component tree in the inline frame;

Specifically, the display content corresponding to each mirror image component can be obtained by analyzing the components in the updated second component tree, and then the target display content is determined by combining the display content corresponding to all the mirror image components. The target display content may be displayed in a pop-up window or the like, and specific display content may include, but is not limited to, pictures, text, trigger controls, and the like.

Taking the example that the target sub-application described above needs to display a document containing text and pictures, the corresponding mirror image component includes a component and a component , for the component , the component can be parsed first to determine the text and pictures corresponding to the component , and then the relation between the component and the component is combined, for example, in the case that the component is located behind the component , the corresponding target display content is that after the text and the pictures corresponding to the component , paragraph symbols exist.

Based on this, the target display content can be accurately displayed.

In one possible implementation manner, after displaying the components in the updated second component tree on the display interface corresponding to the main application, the method may further include:

and displaying the components to be updated on the display interfaces corresponding to the main application.

In this implementation, the triggering operation for the display interface may include, but is not limited to, a triggering operation for a displayed triggering control related to the target sub-application, and may include a triggering operation in the display interface unrelated to the target sub-application, which is not limited by the embodiment of the present application.

Based on the triggering operation of the triggering control related to the target sub-application, the component corresponding to the current target display content (namely the mirror image component in the shadow DOM node) is directly affected. Because the internal parts of each sub-application in the main application are mutually isolated, the running of each sub-application jointly forms the main application, and based on the triggering operation which is irrelevant to the target sub-application in the display interface, the chain reaction can be caused, and the chain reaction can comprise, but is not limited to, indirectly influencing the mirror image component corresponding to the current target display content and influencing the running process of the target sub-application.

In the implementation manner, an event detector (addeventlist) for detecting DOM elements in a shadow DOM node can be created through a mutationObserver technology, so that an event formed by a trigger operation of a display interface is detected, and an assembly to be updated corresponding to the trigger operation in an assembly corresponding to the current target display content is determined based on the event formed by the trigger operation.

Because the component corresponding to the current target display content is mapped based on the component to be displayed corresponding to the original DOM node in the target sub-application, the essence of changing the component corresponding to the current target display content should be the change of the original component in the original DOM node inside the target sub-application. When the component to be updated appears in the component corresponding to the current target display content, the component at the corresponding node position in the first component tree can be modified to be the component to be updated based on the node position of the component to be updated in the second component tree.

And further determining new target display content according to the updated component corresponding to the shadow DOM node, and displaying the new target display content on the display interface.

As noted above, the chain reaction may include affecting the progress of the execution of the target sub-application, in which implementation it may also continue to determine new components to be displayed from the at least two first nodes based on the change observer and continue to add the new components to be displayed to the corresponding node locations in the second component tree. Thus, the nodes in the first component tree and the nodes in the second component tree are dynamically shared, namely, document flow sharing between the target sub-application and the main application is realized.

In one possible implementation manner, the executing the content to be loaded through the inline frame includes:

each sub-content to be loaded is executed in turn by the inline frame.

The content to be loaded is divided into a plurality of sub-contents to be loaded with shorter processing time, each sub-content to be loaded is executed in sequence, and therefore in the process of displaying the components in the updated second component tree on the display interface, the performance of displaying the components in the updated second component tree is optimized, the corresponding display page loading is enabled to be free of delay, the components in the updated second component tree are displayed more clearly and smoothly under the condition that a user object does not perceive the loading process, page blocking (namely, the display interface of a main application is always in a 'refreshing' state, the condition of 'loading' identification and the like) is avoided, and the use experience of the user object is improved.

In one possible implementation manner, the content to be loaded includes a cascading style sheet, and after creating the inline frame corresponding to the target sub-application, the method may further include:

if the attribute of the target sub-application includes a preset relative address attribute, generating a first acquisition request based on the target address includes:

if the attribute of the target sub-application includes a preset entry attribute, generating a first acquisition request based on the target address, including:

based on a preset entry attribute, placing a target address in an entry character string corresponding to the preset entry attribute to obtain a first acquisition request;

if the attribute of the target sub-application includes a reset style operation, the method further includes:

executing the content to be loaded through the inline frame, and setting the style of the cascading style sheet in the content to be loaded as the corresponding style in the style resetting operation;

In the implementation manner, the target address is converted into the relative path corresponding to the preset relative address, and the first acquisition request is generated based on the converted relative path, so that the target resource corresponding to the target address is acquired based on the first acquisition request, the accuracy of resource loading can be improved, and the target resource can be ensured to be loaded correctly.

In a possible implementation manner, in the process of further acquiring the content to be loaded, the link corresponding to the second content to be loaded may be converted into a relative path corresponding to the preset relative address based on the preset relative attribute, and the second acquisition request may be generated based on the converted relative path, so as to further acquire the second content to be loaded, so as to improve accuracy of the acquired second content to be loaded, and ensure that the second content to be loaded can be loaded correctly.

The target address is placed in the entry character string corresponding to the preset entry attribute based on the preset entry attribute so as to obtain the first acquisition request, so that the target resource can be acquired more safely, and the safety of acquiring the target resource is further improved. Similarly, the link corresponding to the second content to be loaded can be placed in the entry character string corresponding to the preset entry attribute, so that the second acquisition request is obtained, the second content to be loaded can be acquired more safely, and the security of acquiring the second content to be loaded is further improved.

Cascading style sheets are CSS in the content to be loaded. The corresponding style in the reset style operation may include, but is not limited to, displaying the updated components in the second component tree at the preset display position of the display interface corresponding to the main application, displaying the background color corresponding to the content (such as the background color of the popup window shown in fig. 7 and 8 is gray), and so on. The preset display position may be the whole display interface (such as the popup position shown in fig. 7) corresponding to the main application, or may be a part of the display interface (such as the popup position shown in fig. 8), which is not limited in the embodiment of the present application.

By setting the style of the cascading style sheet in the content to be loaded as the corresponding style in the style resetting operation based on the set cascading style sheet, the uniformity of the basic style of the CSS corresponding to each target sub-application can be ensured, and the CSS style is not influenced by the browser.

And mapping the cascading style sheet in the content to be loaded subjected to style modification to a shadow DOM node of the main application, and displaying the components in the updated second component tree in a corresponding style in a resetting style operation in the process of displaying the components in the updated second component tree on a corresponding display interface of the main application, so that any sub-application in the main application can be displayed in the corresponding style in the resetting style operation, and the user experience is improved.

In one possible implementation manner, the loading request includes an attribute of the main application, and the method may further include:

Idle time preloading is supported, i.e. at idle time, loading tasks are performed that are independent of the currently executed task.

In this implementation manner, by performing loading processing based on the preload request in the preload queue, the loaded to-be-loaded content obtained by loading based on the preload request may be stored in a preset location based on the identifier of the sub-application corresponding to each preload request, where the preset location may include, but is not limited to, a cache corresponding to the main application.

For example, the request may represent a request, idle represents an Idle time, and Callback represents a retrieve operation, and the terminal 102 may obtain the to-be-loaded content of other sub-applications that need to be loaded at the Idle time in the process of obtaining the to-be-loaded content of the target sub-application.

The method has the advantages that the processing efficiency and the utilization rate of the main application are greatly improved by loading the content to be loaded corresponding to other sub-applications at the idle time when the main application processes the target sub-applications, the activation request of the other sub-applications is received while the processing operation of the current target sub-applications is not influenced, and the activation speed of the other sub-applications is improved by executing the corresponding content to be loaded which is subjected to the loading operation based on the inline frames corresponding to the other sub-applications.

And executing keep-alive operation on one sub-application, namely destroying the inline frame corresponding to the sub-application when receiving an unloading request of the sub-application, and retaining the content to be loaded corresponding to the sub-application.

If the attribute of the main application is that keep-alive operation is supported, under the condition that an unloading request for any sub-application is received, the corresponding inline frame of the sub-application can be unloaded, and the content to be loaded of the sub-application is reserved, so that under the condition that the sub-application needs to be activated again, the reserved content to be loaded of the sub-application can be executed in the corresponding inline frame of the sub-application, and the activating speed of the sub-application is accelerated.

And if the attribute of the main application statement does not include keep-alive operation on the sub-application, unloading the iframe corresponding to the target sub-application and deleting the script corresponding to the target sub-application under the condition that an unloading request for any sub-application is received.

Based on the same principle as the application processing method provided by the embodiment of the application, the embodiment of the application also provides an application processing device. Fig. 10 shows a schematic diagram of an application processing device according to an embodiment of the present application. As shown in fig. 10, the application processing apparatus 100 is applied to a main application implemented based on a micro front end, the main application being integrated with at least one sub-application, including:

the to-be-loaded content acquiring module 110 is configured to respond to a loading request for a target sub-application, and acquire to-be-loaded content corresponding to the target sub-application;

an inline frame creation module 120, configured to create an inline frame corresponding to the target sub-application in the main application in response to the loading request;

a first component tree generating module 130, configured to generate a first component tree in the inline frame, where the first component tree includes at least two first nodes, and one first node is a preset component of the target sub-application;

The mapping module 140 is configured to execute the content to be loaded through the inline frame, determine components to be displayed from at least two first nodes, map a tree structure corresponding to the first component tree to generate an initial second component tree, and add components identical to the components to be displayed at corresponding node positions in the initial second component tree based on node positions of the components to be displayed in the first component tree, so as to update the initial second component tree;

and the display module 150 is configured to display the components in the updated second component tree on a display interface corresponding to the main application.

In one possible implementation manner, after displaying, by the display module, the components in the updated second component tree on the display interface corresponding to the main application, the mapping module 140 is further configured to:

In one possible implementation manner, when the display module 150 displays the components in the updated second component tree on the display interface corresponding to the main application, the display module is specifically configured to:

hiding a first component tree in the inline frame;

In one possible implementation manner, the first component tree generating module 130 is specifically configured to, when generating the first component tree in the inline frame:

In one possible implementation manner, the loading request includes an attribute of the main application, and the apparatus 100 further includes a main application processing module, configured to:

In one possible implementation manner, the mapping module 140 is specifically configured to, when executing the content to be loaded through the inline frame:

each sub-content to be loaded is executed in turn by the inline frame.

In one possible implementation manner, the loading request includes a target address corresponding to a target sub-application, and the content to be loaded acquiring module 110 is specifically configured to, when acquiring content to be loaded corresponding to the target sub-application:

generating a first acquisition request based on the target address;

In one possible implementation manner, the content to be loaded includes a cascading style sheet, and the inline frame creation module 120 may be further configured to, after creating an inline frame corresponding to the target sub-application:

if the attribute of the target sub-application includes a preset relative address attribute, the content obtaining module to be loaded 110 is specifically configured to, when generating the first obtaining request based on the target address:

if the attribute of the target sub-application includes a preset entry attribute, the content obtaining module to be loaded 110 is specifically configured to, when generating the first obtaining request based on the address corresponding to the target sub-application:

The device of the embodiment of the present application may perform the method provided by the embodiment of the present application, and its implementation principle is similar, and actions performed by each module in the device of the embodiment of the present application correspond to steps in the method of the embodiment of the present application, and detailed functional descriptions of each module of the device may be referred to the descriptions in the corresponding methods shown in the foregoing, which are not repeated herein.

Based on the same principle as the application processing method and apparatus provided in the embodiments of the present application, an electronic device (such as a server) is also provided in the embodiments of the present application, where the electronic device may include a memory, a processor, and a computer program stored on the memory, where the processor executes the computer program to implement the steps of the method provided in any of the alternative embodiments of the present application.

In one possible implementation manner, fig. 11 shows a schematic structural diagram of an electronic device to which an embodiment of the present application is applied, as shown in fig. 11, an electronic device 4000 shown in fig. 11 includes: a processor 4001 and a memory 4003. Wherein the processor 4001 is coupled to the memory 4003, such as via a bus 4002. In one possible implementation, the electronic device 4000 may further include a transceiver 4004, and the transceiver 4004 may be used for data interaction between the electronic device and other electronic devices, such as transmission of data and/or reception of data, etc. It should be noted that, in practical applications, the transceiver 4004 is not limited to one, and the structure of the electronic device 4000 is not limited to the embodiment of the present application.

The processor 4001 may be a CPU (Central Processing Unit ), general purpose processor, DSP (Digital Signal Processor, data signal processor), ASIC (Application Specific Integrated Circuit ), FPGA (Field Programmable Gate Array, field programmable gate array) or other programmable logic device, transistor logic device, hardware components, or any combination thereof. Which may implement or perform the various exemplary logic blocks, modules and circuits described in connection with this disclosure. The processor 4001 may also be a combination that implements computing functionality, e.g., comprising one or more microprocessor combinations, a combination of a DSP and a microprocessor, etc.

Bus 4002 may include a path to transfer information between the aforementioned components. Bus 4002 may be a PCI (Peripheral Component Interconnect, peripheral component interconnect standard) bus or an EISA (Extended Industry Standard Architecture ) bus, or the like. The bus 4002 can be divided into an address bus, a data bus, a control bus, and the like. For ease of illustration, only one thick line is shown in FIG. 11, but not only one bus or one type of bus.

Memory 4003 may be, but is not limited to, ROM (Read Only Memory) or other type of static storage device that can store static information and instructions, RAM (Random Access Memory ) or other type of dynamic storage device that can store information and instructions, EEPROM (Electrically Erasable Programmable Read Only Memory ), CD-ROM (Compact Disc Read Only Memory, compact disc Read Only Memory) or other optical disk storage, optical disk storage (including compact discs, laser discs, optical discs, digital versatile discs, blu-ray discs, etc.), magnetic disk storage media, other magnetic storage devices, or any other medium that can be used to carry or store a computer program and that can be Read by a computer.

The memory 4003 is used for storing a computer program for executing an embodiment of the present application, and is controlled to be executed by the processor 4001. The processor 4001 is configured to execute a computer program stored in the memory 4003 to realize the steps shown in the foregoing method embodiment.

Embodiments of the present application provide a computer readable storage medium having a computer program stored thereon, which when executed by a processor, implements the steps of the foregoing method embodiments and corresponding content.

The embodiment of the application also provides a computer program product, which comprises a computer program, wherein the computer program can realize the steps and corresponding contents of the embodiment of the method when being executed by a processor.

The terms "first," "second," "third," "fourth," "1," "2," and the like in the description and in the claims and in the above figures, if any, are used for distinguishing between similar objects and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used may be interchanged where appropriate, such that the embodiments of the application described herein may be implemented in other sequences than those illustrated or otherwise described.

It should be understood that, although various operation steps are indicated by arrows in the flowcharts of the embodiments of the present application, the order in which these steps are implemented is not limited to the order indicated by the arrows. In some implementations of embodiments of the application, the implementation steps in the flowcharts may be performed in other orders as desired, unless explicitly stated herein. Furthermore, some or all of the steps in the flowcharts may include multiple sub-steps or multiple stages based on the actual implementation scenario. Some or all of these sub-steps or phases may be performed at the same time, or each of these sub-steps or phases may be performed at different times, respectively. In the case of different execution time, the execution sequence of the sub-steps or stages can be flexibly configured according to the requirement, which is not limited by the embodiment of the present application.

The foregoing is merely an optional implementation manner of some of the implementation scenarios of the present application, and it should be noted that, for those skilled in the art, other similar implementation manners based on the technical ideas of the present application are adopted without departing from the technical ideas of the scheme of the present application, and the implementation manner is also within the protection scope of the embodiments of the present application.

Claims

1. An application processing method, wherein the method is applied to a main application implemented based on a micro front end, and the main application is integrated with at least one sub-application, and comprises the following steps:

responding to a loading request aiming at a target sub-application, acquiring content to be loaded corresponding to the target sub-application, and creating an inline frame corresponding to the target sub-application in the main application;

executing the content to be loaded through the inline frame, determining components to be displayed from the at least two first nodes, mapping a tree structure corresponding to the first component tree to generate an initial second component tree, and adding components identical to the components to be displayed at corresponding node positions in the initial second component tree based on node positions of the components to be displayed in the first component tree so as to update the initial second component tree;

2. The method of claim 1, wherein after displaying the components in the updated second component tree on the display interface corresponding to the host application, the method further comprises:

responding to a triggering operation aiming at the display interface, and determining a component to be updated corresponding to the triggering operation;

modifying a first node of the corresponding node position in the first component tree to the component to be updated based on the node position of the component to be updated in the second component tree;

and displaying the components to be updated on a display interface corresponding to the main application.

3. The method according to claim 1 or 2, wherein displaying the updated components in the second component tree on the display interface corresponding to the main application comprises:

hiding a first component tree of the inline frame;

generating target display content based on the components in the updated second component tree;

4. The method of claim 1, wherein the generating a first component tree in the inline frame comprises:

and generating the first component tree in the inline frame based on the at least two preset components and the association relation between every two preset components.

5. The method of claim 1, wherein the load request includes an attribute of the host application, the method further comprising:

if the attribute of the main application supports idle preloading and the main application is at idle time, loading processing is carried out based on a preloading request in a preloading queue, wherein the preloading queue is generated based on a historical preloading request;

and if the attribute of the main application is that the keep-alive operation is supported, and an unloading request aiming at any sub-application is received, reserving the content to be loaded of the sub-application corresponding to the unloading request.

6. The method of claim 1, wherein the executing the content to be loaded through the inline frame comprises:

And executing each sub-content to be loaded in turn through the inline frame.

7. The method of claim 1, wherein the load request includes a target address corresponding to the target sub-application, and the obtaining the content to be loaded corresponding to the target sub-application includes:

generating a first acquisition request based on the target address;

acquiring a target resource corresponding to the target address based on the first acquisition request;

if the analysis result comprises a link corresponding to the first content to be loaded and a link corresponding to the second content to be loaded, generating a second acquisition request based on the link corresponding to the second content to be loaded; acquiring second content to be loaded based on the second acquisition request; and determining the first content to be loaded and the second content to be loaded as the content to be loaded.

8. The method of claim 7, wherein the content to be loaded comprises a cascading style sheet, and wherein after creating the inline frame corresponding to the target sub-application, the method further comprises:

Setting the attribute of the target sub-application in the inline frame, wherein the attribute of the target sub-application comprises at least one of a preset relative address attribute, a preset entry attribute and a reset style operation;

if the attribute of the target sub-application includes the preset relative address attribute, the generating a first acquisition request based on the target address includes:

converting the target address into a relative path relative to the preset relative address, and generating the first acquisition request based on the converted relative path;

if the attribute of the target sub-application includes the preset entry attribute, the generating a first acquisition request based on the target address includes:

based on the preset entry attribute, placing the target address in an entry character string corresponding to the preset entry attribute to obtain the first acquisition request;

executing the content to be loaded through the inline frame, and setting the style of the cascading style sheet in the content to be loaded as the corresponding style in the reset style operation;

The displaying the updated components in the second component tree on the display interface corresponding to the main application comprises the following steps:

9. An application processing device, wherein the application processing device is applied to a main application implemented based on a micro front end, and the main application is integrated with at least one sub-application, and the application processing device comprises:

the system comprises a to-be-loaded content acquisition module, a target sub-application and a storage module, wherein the to-be-loaded content acquisition module is used for responding to a loading request aiming at the target sub-application and acquiring to-be-loaded content corresponding to the target sub-application;

the first component tree generation module is used for generating a first component tree in the inline frame, the first component tree comprises at least two first nodes, and one first node is a preset component of the target sub-application;

the mapping module is used for executing the content to be loaded through the inline frame, determining components to be displayed from the at least two first nodes, mapping the tree structure corresponding to the first component tree to generate an initial second component tree, and adding components identical to the components to be displayed at corresponding node positions in the initial second component tree based on the node positions of the components to be displayed in the first component tree so as to update the initial second component tree;

10. An electronic device comprising a memory, a processor and a computer program stored on the memory, characterized in that the processor executes the computer program to carry out the steps of the method according to any one of claims 1-8.

11. A computer readable storage medium, on which a computer program is stored, characterized in that the computer program, when being executed by a processor, implements the steps of the method according to any of claims 1-8.

12. A computer program product comprising a computer program, characterized in that the computer program, when being executed by a processor, implements the steps of the method according to any of claims 1-8.