Element isolation method, device, equipment, and storage medium

Abstract

The present application discloses an element isolation method, including: receiving a first operation request for a target element based on a first application; determining the scope of the target element; intercepting the first operation request when the scope of the target element is a second application, and generating a second operation request based on the first operation request; the second application is located in a target container element of the first application, and the operation authority of the second operation request is limited to the target container element; based on the second operation request, performing a corresponding operation on the target element in the target container element. The present application also discloses an element isolation device, equipment and storage medium.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of computer technology, and are related to but not limited to an element isolation method and apparatus, equipment, and storage medium. Background Art

[0002] Micro frontend is an architectural concept that splits a single frontend application into multiple micro-applications, namely micro frontends, and aggregates the split micro-applications into one application. Each micro-application can also be developed, run, and deployed independently.

[0003] Micro front-ends can solve the problem of large web front-end applications and difficult maintenance. In related technologies, there are three implementation schemes for micro front-ends: framework (iframe), native componentization (webComponent), and micro front-end framework. However, iframe can only be used for simple page rendering, and webComponent has poor compatibility. Micro front-end frameworks have achieved a balance between functionality and compatibility, but there is a possibility of conflict between elements of different micro applications, and the conflict of elements may lead to page rendering failure. Summary of the invention

[0004] The embodiments of the present application provide an element isolation method and apparatus, device, and storage medium to solve at least one problem existing in the related art, which can achieve complex page rendering and compatibility while ensuring that elements between micro-applications do not interfere with each other.

[0005] The technical solution of the embodiment of the present application is implemented as follows:

[0006] In a first aspect, an embodiment of the present application provides an element isolation method, the method comprising:

[0007] receiving a first operation request for a target element based on a first application;

[0008] determining a scope of the target element;

[0009] In a case where the scope of the target element is a second application, intercepting the first operation request, and generating a second operation request based on the first operation request; the second application is located in a target container element of the first application, and the operation permission of the second operation request is limited to the target container element;

[0010] Based on the second operation request, a corresponding operation is performed on the target element in the target container element.

[0011] In a second aspect, an embodiment of the present application provides an element isolation device, comprising:

[0012] A receiving module, configured to receive a first operation request for a target element based on a first application;

[0013] A determination module, used to determine the scope of the target element;

[0014] an interception module, configured to intercept the first operation request and generate a second operation request based on the first operation request when the scope of the target element is a second application; the second application is located in a target container element of the first application, and the operation permission of the second operation request is limited to the target container element;

[0015] The first operation module is used to perform a corresponding operation on the target element in the target container element based on the second operation request.

[0016] In a third aspect, an embodiment of the present application provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps in the above-mentioned element isolation method when executing the computer program.

[0017] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium having a computer program stored thereon, which implements the steps in the above-mentioned element isolation method when the computer program is executed by a processor.

[0018] In an embodiment of the present application, an element isolation method and apparatus, a device, and a storage medium are provided, including: receiving a first operation request for a target element based on a first application; determining the scope of the target element; when the scope of the target element is a second application, intercepting the first operation request, and generating a second operation request based on the first operation request; the second application is located in a target container element of the first application, and the operation authority of the second operation request is limited to the target container element; based on the second operation request, performing a corresponding operation on the target element in the target container element; thereby placing the second application integrated into the first application in the container element of the first application, thereby treating the first application and the second application as different scopes, and when the scope of the received target element is the second application, intercepting the current first operation request, and generating a second operation request, avoiding operating the target element in the first application, and processing the target element in the target container element, thereby ensuring complex page rendering and compatibility while achieving non-interference between elements between micro-applications. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] Figure 1 This is a schematic diagram of an optional architecture of a page display system according to an embodiment of the present application;

[0020] Figure 2This is an optional structural diagram of the front-end application of the embodiment of the present application;

[0021] Figure 3 An optional flow chart of an element isolation method provided in an embodiment of the present application;

[0022] Figure 4 An optional flow chart of an element isolation method provided in an embodiment of the present application;

[0023] Figure 5 An optional flow chart of an element isolation method provided in an embodiment of the present application;

[0024] Figure 6 An optional flow chart of an element isolation method provided in an embodiment of the present application;

[0025] Figure 7 An optional structural schematic diagram of an element isolation device provided in an embodiment of the present application;

[0026] Figure 8 An optional structural diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0027] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the specific technical solution of the application will be further described in detail below in conjunction with the drawings in the embodiments of the present application. The following embodiments are used to illustrate the present application, but are not used to limit the scope of the present application.

[0028] The embodiment of the present application can provide an element isolation method and system and a storage medium. In practical applications, the element isolation method can be implemented by a page display system, and each functional entity in the page display system can be collaboratively implemented by hardware resources of an electronic device (such as a terminal device or a server), such as computing resources such as a processor, and communication resources (such as for supporting various communication methods such as optical cables and cellular).

[0029] Some of the terms involved in the embodiments of this application are described below.

[0030] 1) Base application: the main application among multiple micro-applications split from the front-end application, used to embed other micro-applications.

[0031] 2) Sub-applications: Micro-applications other than the main application among the multiple micro-applications split from the front-end application can be embedded in the main application, wherein one front-end application may include multiple sub-applications.

[0032] 3) Elements, objects in the front-end application, can belong to the base application or the sub-application. In the same micro-application, different elements can be distinguished by different element identifiers. Elements in different micro-applications can use the same element identifier, where the element identifier may include ID, class and other identifiers.

[0033] 4) Element isolation: elements between different micro-applications do not interfere with each other.

[0034] The element isolation method of the embodiment of the present application can be applied to Figure 1 The page display system shown includes: a client 10, wherein an application capable of displaying pages can be run in the client, the client 10 interacts with the user based on an input device, receives a display request input by the user, and displays the page corresponding to the access request on the application based on the user's display request.

[0035] The client 10 can also receive a scrolling operation of the page based on an input device to update the display area of ​​the page located on the display interface. The input device includes: a display, a mouse, a keyboard, and other devices that can receive user operations.

[0036] In one example, the page of the front-end application in the client 10 is displayed by an application program capable of displaying pages, and the front-end application can be a single-page application or a multi-page application.

[0037] In one example, if Figure 1 As shown, the front-end application 101 in the client 10 is split into multiple micro-applications, namely micro-front-ends 1011.

[0038] Here, the front-end application includes multiple independent micro-applications, and the multiple micro-applications include a base application and one or more sub-applications, and each sub-application is placed in its own sub-application container, where a sub-application container is an element in the base application, so that the sub-application's operations on its elements are limited to the container element.

[0039] In one example, if Figure 2 As shown, the front-end application 20 includes: micro-application 201, micro-application 202, and micro-application 203, wherein micro-application 201 is a base application, micro-application 202 and micro-application 203 are sub-applications embedded in micro-application 201, and micro-application 201 includes element 21-1 and element 22-2, and element 21-1 is a container element of micro-application 202, and element 21-2 is a container element of micro-application 203.

[0040] In an embodiment of the present application, when a client receives a first operation request for a target element based on a first application; determines the scope of the target element; when the scope of the target element is a second application, intercepts the first operation request, and generates a second operation request based on the first operation request; the second application is located in a target container element of the first application, and the operation authority of the second operation request is limited to the target container element; based on the second operation request, performs a corresponding operation on the target element in the target container element.

[0041] In combination with the above page display system, this embodiment proposes an element isolation method, which can limit the operations of the sub-application on its elements within the container element, thereby ensuring the isolation of the micro-application elements.

[0042] Next, combine Figure 1 or Figure 2 The page display system shown illustrates various embodiments of the element isolation method, device, equipment and storage medium provided in the embodiments of the present application.

[0043] This embodiment provides an element isolation method. The function implemented by the method can be implemented by a processor in an electronic device calling a program code, and of course the program code can be stored in a computer storage medium. It can be seen that the electronic device at least includes a processor and a storage medium.

[0044] Figure 3 A schematic diagram of the implementation process of an element isolation method according to an embodiment of the present application is shown in FIG. Figure 3 As shown, the method may include the following steps:

[0045] S301: A client receives a first operation request for a target element based on a first application.

[0046] The first application is a base application of the front-end application, and the client monitors whether the front-end application receives a first operation request based on the base application, wherein the operation type of the first operation request may include: create, add, delete, query, etc. In the embodiment of the present application, there is no limitation on the operation type of the first operation request.

[0047] The first operation request is used to request an operation on the target element. The first operation request is received based on the first application. Therefore, the operation scope of the first operation request is the first application. At this time, the client is not sure whether the target element belongs to the base application or the sub-application, that is, it is not sure whether the scope of the target element is the first application or the second application. Among them, when the scope of the target element is the first application, it represents the target element as an element in the first application, and when the scope of the target element is the second application, it represents the target element as an element in the second application.

[0048] Here, the first operation request may be an operation request initiated by the first application, or may be an operation request initiated by the second application. The second application is a sub-application embedded in the first application. When the first application initiates the first operation request, the first operation request may be initiated by the script of the first application through the document object. When the second application initiates the first operation request, the first operation request may be initiated by the script of the second application through the document object.

[0049] When the first application initiates a first operation request, the target element targeted by the first operation request is the target element in the first application, and the scope of the target element is the first application. When the second application initiates a first operation request, the target element targeted by the first operation request is the target element in the second application, and the scope of the target element is the second application.

[0050] In an example, the manner in which the second application initiates the first operation request may include at least one of the following:

[0051] The operation type initiated by document.createElement is a create request for creation;

[0052] An add request with an operation type of add initiated by Node.prototype.appendChild or Node.prototype.insertBefore;

[0053] A delete request with an operation type of delete initiated by Node.prototype.removeChild;

[0054] A query request with an operation type of query initiated through any of document.prototype.querySelector, document.prototype.querySelectorAll, document.prototype.getElementById, document.prototype.getElementsByClassName, and document.prototype.getElements ByName.

[0055] In an embodiment of the present application, the script of the micro-application (including the first application or the second application) in the front-end application is single-threaded. Therefore, the front-end application can only receive the first operation request of one micro-application at the same time, that is, only one micro-application can operate the element at the same time.

[0056] It should be noted that different micro-applications can be expressed as different HyperText Markup Language (HTML) contents in the front-end application.

[0057] S302: The client determines the scope of the target element.

[0058] After the client monitors the first operation request, it is not sure whether the target element to be operated belongs to the first application or the second application. At this time, it determines whether the scope of the target element is the first application or the second application. In the embodiment of the present application, when the first operation request is initiated by the script of the first application, the scope is the first application. When the second operation request is initiated by the script of the second application, the scope is the second application.

[0059] In the embodiment of the present application, the method of determining the scope of the target element may include at least one of the following:

[0060] Method 1: determining according to the application identifier of the initiating application of the first operation request;

[0061] Method 2: determining according to the attribute information of the target element carried in the first operation request;

[0062] Method three: determine based on whether the reference object exists.

[0063] In mode 3, the reference object is an object set by the sub-application of the current operating element, and the reference object points to the container element where the sub-application of the current operating element is located. When a sub-application operates on an element, the reference object is only applied to the current sub-application. When the sub-application completes the operation on the element, the current reference object is released, that is, the content of the current reference object is cleared. When another sub-application operates on the element, the reference element is pointed to the other sub-application until the other sub-application completes the operation on the element.

[0064] S303: When the scope of the target element is a second application, the client intercepts the first operation request and generates a second operation request based on the first operation request.

[0065] The second application is located in a target container element of the first application, and the operation permission of the second operation request is limited to the target container element.

[0066] When it is determined that the scope of the target element is a sub-application, the first operation request is intercepted. At this time, the first operation request is not executed, and the first request is rewritten to obtain a second operation request whose operation type is consistent with the operation type of the first operation request, wherein the operation scope of the second operation request is the second application.

[0067] In an embodiment of the present application, the target container element may be an element whose content is the HTML content of a sub-application, namely, the second application. That is, the second application is located in the sub-application container, and the sub-application container is an element of the first application. In this case, the element is a container element.

[0068] Here, the target container element may be identified as a micro-app element, wherein the form of the micro-app element may be as follows:

[0069] <micro-app>

[0070] <micro-app-head> Header content< / micro-app-head>

[0071] <micro-app-body> Main content< / micro-app-body>

[0072] <micro-app>.

[0073] When the operation scope of the second operation request is the second application, and the second application is located in the sub-application container, the operation permission of the second operation request is limited to the target container element, that is, limited to the sub-application container where the second application is located.

[0074] S304: The client performs a corresponding operation on the target element in the target container element based on the second operation request.

[0075] After receiving the second operation request, the client executes the second operation request and operates the target element in the target container element.

[0076] In one example, when the operation type of the first operation request is the query operation document.prototype.querySelector, the execution of the second operation request can be implemented by the following code:

[0077]

[0078] Through this code, a query operation is performed on the target element in the second application pointed to by activeApp.

[0079] The element isolation method provided in the embodiment of the present application can be applied to the following scenarios:

[0080] Scenario 1, the front-end application includes micro-application 1 and micro-application 2, wherein micro-application 1 is a base application, micro-application 2 is a sub-application embedded in micro-application 1 based on a container element, and both micro-application 1 and micro-application 2 include element 1 identified as 1. When the front-end application receives an operation request to delete element 1 based on micro-application 1, and the operation scope of the operation request is application 1, when it is determined that the scope of the current element 1 is micro-application 2, that is, element 1 in micro-application 2 is deleted, the operation request is intercepted and a new operation request is generated, and the operation scope of the new operation request is limited to the container element where micro-application 2 is located. At this time, the new operation request is executed to delete element 1 in micro-application 2.

[0081] Scenario 2, the front-end application includes micro-application 1 and micro-application 2, wherein micro-application 1 is a base application, and micro-application 2 is a sub-application embedded in micro-application 1 based on a container element. When the front-end application receives an operation request to create element 2 with an identifier of 2 based on micro-application 1, and the operation scope of the operation request is application 1, when it is determined that the scope of the current element 2 is micro-application 2, that is, the current operation request is to create element 2 in micro-application 2, the current operation request is intercepted and a new operation request is generated, and the operation scope of the new operation request is limited to the container element where micro-application 2 is located. At this time, the new operation request is executed to create element 2 in micro-application 2.

[0082] The element isolation method provided in the embodiment of the present application receives a first operation request for a target element based on a first application; determines the scope of the target element; intercepts the first operation request when the scope of the target element is a second application, and generates a second operation request based on the first operation request; the second application is located in a target container element of the first application, and the operation authority of the second operation request is limited to the target container element; based on the second operation request, performs a corresponding operation on the target element in the target container element; thereby placing the second application integrated into the first application in the container element of the first application, thereby treating the first application and the second application as different scopes, and when the scope of the received target element is the second application, intercepts the current first operation request and generates a second operation request, so as to avoid operating the target element in the first application when the scope of the target element is inconsistent with the operation scope of the operation request, and can generate a second operation request according to the scope of the target element, and processes the target element in the target container element based on the second operation request, thereby ensuring complex page rendering and compatibility while solving the problem of element conflict and achieving non-interference between elements between micro-applications.

[0083] In some embodiments, after S302, Figure 4 As shown, the method also includes:

[0084] S305: When the scope of the target element is the first application, the client performs a corresponding operation on the target element in the first application based on the first operation request.

[0085] When the scope of the target element is the first application, the operation corresponding to the first operation request is directly performed in the first application. Here, the second application is embedded in the first application through the container element, so the second application is isolated by the container element, and the client's operation on the first application does not involve the second application, that is, it has no effect on the target element in the second application.

[0086] In an embodiment of the present application, when the scope of the target element is the first application, the first operation request with the operation scope of the first application is directly executed, and during the execution of the first operation request, the second application is the content of an element of the first application, and the elements in the second application will not be processed by the first operation request, thereby ensuring the correct execution of the first operation request.

[0087] In some embodiments, the implementation of S302 includes:

[0088] S3021A. Determine whether a reference object has any content, where the reference object is used to point to the target container element.

[0089] In the embodiment of the present application, the scripts of each micro-application in the front-end application are single-threaded, so only one micro-application operates on the element at the same time, and when the micro-application operating the element is the second application, the reference object is applied to the current second application, and the client can determine whether the current application is the second application by whether there is specific content in the reference object. Among them, the reference object can be identified as activeApp.

[0090] S3022A: When the reference object has content, determine that the scope of the target element is the second application.

[0091] The reference object is used to point to the target container element where the current second application is placed. When the reference object has content, the reference object points to the target container element where the current second application is placed, indicating that the application corresponding to the target element is the second application inserted into the target container element, that is, the target element is an element of the second application, and the scope of the target element is the second application; when the reference object has no content, the reference object does not point to the target container element, indicating that the application corresponding to the target element is not inserted into the target container element, that is, the application corresponding to the target element is not the second application, and the scope of the target element is the first application.

[0092] In the embodiment of the present application, when the operation type of the first operation request is a creation request, the scope of the target element may be determined based on whether the reference object has content.

[0093] In some embodiments, before determining whether the reference object has content, the method also includes: obtaining the page content of the second application; converting the page content; inserting the converted page content into the target container element; and pointing the reference object to the target container element.

[0094] The client can obtain the page content of the second application based on the address of the second application, convert the page content of the second application through a regular expression, and insert the converted page content into the target container element.

[0095] The target container element includes two parts, head and body, and the page content of the second application includes two parts, head and body. When the client inserts the converted page content into the target container element, the head part of the converted page content is inserted into the head part of the target container element, and the body part of the converted page content is inserted into the body part of the target container element.

[0096] In some embodiments, the implementation of S302 includes:

[0097] S3021B. Obtain attribute information of the target element carried in the first operation request;

[0098] S3022B, determining a permission attribute in the attribute information, wherein the permission attribute represents a scope of the target element;

[0099] S3023B: When the value of the permission attribute indicates the second application, determine that the scope of the target element is the second application.

[0100] The permission attribute can be the scopedApp attribute of the target element. When the value of the scopedApp attribute of the target element points to the second application, it indicates that the scope of the target element is the second application. When the scopedApp attribute does not exist in the attribute information of the target element, or the existing scopedApp attribute does not point to the second application, it indicates that the scope of the target element is the first application.

[0101] When the value of the scopedApp attribute points to the second application, it may point to the value of the reference object, for example, the value of activeApp.

[0102] In some embodiments, when the reference object has content, the permission attribute is added to the attribute information of the target element, and the value of the reference object is assigned to the permission attribute.

[0103] In the embodiment of the present application, when the operation request is a creation request and when the target element container is pointed to based on the content of the reference object, the value of the reference object is assigned to the permission attribute of the target element.

[0104] In an embodiment of the present application, the front-end application where the base application is located includes multiple micro-applications, which include a base application and one or more sub-applications. The client is not clear about which elements are included in the base application or the sub-application, and therefore cannot determine the scope of the current target element. However, by determining whether the permission attribute of the target element carried in the first operation request or the reference object has content, it is possible to accurately determine whether the current target element belongs to the base application or the current sub-application, that is, to accurately determine the scope of the current target element.

[0105] In some embodiments, before S301, the following steps are further implemented:

[0106] If it is detected that the script of the second application calls the document object, the proxy service is called through the proxy object in the script of the second application; the proxy object is a global object; the document object is called through the proxy service; the document object is used for the script of the second application to trigger the first operation request.

[0107] In an embodiment of the present application, the client creates an empty object, inserts the empty object into the script of the second application, sets the empty object as a global object, and proxies the empty object through a proxy service, so that when the script of the second application is executed, the empty object as a global object in the script of the second application is called, and the proxy service is triggered, and the trigger service is used as an intermediate layer for the interaction between the second application and the window object.

[0108] When calling the document object as the window object, the script of the second application uses the empty object, intercepts the call through the proxy service as the middle layer, and redirects it to the document object.

[0109] In the embodiment of the present application, a Get method can be defined as a specific implementation of the middle layer. When an empty object is called, the Get method is triggered, and the call to the current empty object is intercepted.

[0110] In actual applications, when the client obtains the page content of the second application, it can search for all script elements of the second application and form the script of the second application, i.e., the JS script, based on the searched script elements. After obtaining the script of the second application, the client can put the script of the second application into the sandbox.

[0111] In the embodiment of the present application, the operation of the client putting the content of the script of the second application into the sandbox may be: `;(function(window){with(window){;${content of the script}}).call(proxy object, proxy object)`,

[0112] Here, while the script of the second application is placed in the sandbox, the this method in the second script is pointed to the first parameter of the call method, so that the global object is accessed when the this method is used in the script of the second application.

[0113] In some embodiments, the method further comprises:

[0114] The application identifier of the second application is recorded through the proxy service object.

[0115] When the client intercepts the call of the script of the second application to the window object through the middle layer, it can directly record which second application is currently active and obtain the identifier of the second application.

[0116] In an embodiment of the present application, by adding a global object in the script of the second application, the global object can be used to record which sub-application the second application served by the current process is. At this time, when the second application triggers the first operation request, it can be determined which sub-application the second application that triggered the first operation request is, that is, based on the identifier of the second application, it is determined which sub-application in the micro-application of the front-end application the scope of the target element is, that is, the identifier of the second application is used to identify which sub-application in the micro-application of the front-end application the scope of the target element is.

[0117] Below, the element isolation method provided in the embodiment of the present application is further described.

[0118] In the related technology, the solutions for implementing micro front-end include: iframe, webComponent, and micro front-end framework.

[0119] Iframe implements micro frontend by aggregating multiple projects together by nesting other subpages in HTML pages through iframe tags.

[0120] This solution is simple to use and runs stably. It is the earliest micro-frontend solution with good isolation and compatibility. However, iframe has some unsolvable problems, such as double scroll bars, pop-up windows that cannot fill the screen, slow page rendering, and complex communication. Therefore, iframe can only do simple page rendering, with poor performance and user experience.

[0121] webComponent is a web native component, which consists of three parts: custom element (customElement) for creating custom elements, shadow document object model (shadowDom) for creating a closed space, and template tag (HTMLTemplate) for creating document fragments.

[0122] shadowDom is the core function of webComponent, which provides built-in style isolation and element isolation. webComponent can avoid various problems existing in iframe, and provide built-in style isolation and element isolation functions. In theory, it is the best solution to implement micro front-end. However, shadowDom has very poor compatibility. ShadowDom cannot run normally in some front-end frameworks, such as the very popular front-end framework - react. Due to compatibility issues, webComponent is generally not used to implement micro front-end.

[0123] The micro front-end framework is mainly based on routing distribution, that is, a base application listens to the routing and loads different sub-applications according to the routing rules to achieve decoupling between sub-applications.

[0124] Micro-frontend frameworks include single-spa, qiankun, etc. These micro-frontend frameworks can achieve a balance between functionality and compatibility, but there is a possibility of conflict between elements of different micro-applications, and the conflict of elements may cause page rendering failure.

[0125] In the present application embodiment, Figure 4 As shown, the micro-application is divided into a base application 401 and a sub-application 402. The base application 401 is the main application, and the application integrated into the base application for rendering is the sub-application 402. Element isolation means that the elements between micro-applications do not interfere with each other. Each micro-application has its own element scope. They can only add, delete, modify, and query their own elements without affecting other micro-applications.

[0126] In an embodiment of the present application, the sub-application is placed in a container. The container can be an element of the base application, namely, a micro-app element. This element itself has no content. In the present application, the content of the sub-application is placed therein for rendering. All the content of the sub-application is inside the micro-app element, thereby isolating the elements of the base application and the elements of the sub-application.

[0127] The sub-application is embedded in the base application, that is, the sub-application and the base application are rendered on the same page at the same time. Both the base application and the sub-application contain a large number of elements, which are distinguished by identification numbers (id) or classes. However, the base application and the sub-application are developed independently, so there is a possibility of conflict in the identification of the base application elements and the sub-application elements, that is, there is a possibility of element conflict. Taking id as an example, if the base application and the sub-application both have an element with id 1, the two elements are conflicting. When the sub-application searches and operates elements based on id 1, it is easy to query the element with id 1 of the base application instead of the sub-application itself, which will cause problems.

[0128] In the embodiment of the present application, the content of the sub-application is placed in a container, and the container is used as an element of the base application, thereby isolating the elements of the sub-application from the elements of the base application, so that when operating the elements of the sub-application, only the elements of the sub-application can be operated. The operation here refers to the addition, modification, deletion, query and other operations performed on the elements through the script. The functions of adding, modifying, deleting, querying and other operations can be built-in in the browser, and the user only needs to call the interface built-in in the browser to perform these operations.

[0129] Below, taking a sub-application as an example, the element isolation method provided in an embodiment of the present application is explained, which includes two parts: Part 1, putting the content of the sub-application into a container element and obtaining a document object; Part 2, operating the elements of the sub-application in the container element based on the document object.

[0130] Part 1 puts the contents of the child application into a container element and gets the implementation of the document object, such as Figure 5 As shown, including:

[0131] S501: Create a container element for a sub-application.

[0132] Create an element called micro-app, which will serve as a container element for the sub-application.

[0133] S502: Obtain the HTML content of the sub-application according to the Uniform Resource Locator (URL) address of the sub-application, and convert the HTML content.

[0134] Get the HTML content of the sub-application according to the URL address of the sub-application, and use regular matching to replace the content in the HTML. The head element is replaced with micro-app-head, and the body element is replaced with micro-app-body.

[0135] The obtained HTML content is of a string type. The obtained HTML content is converted using a regular expression to obtain converted HTML content, thereby replacing the obtained HTML content with the converted HTML content.

[0136] In one example, the regular expression that matches the head element is: / <head[^> ]*>[\s\S]*? <\ / head> / i, the regular expression matching the body element is: / <body[^> ]*>[\s\S]*? <\ / body> / i. Replace the HTML content with the string's own replace method and the passed regular expression, in the form of: HTML = HTML.replace (regular, new content).

[0137] S503: Insert the converted HTML content into the container element.

[0138] The converted HTML content is inserted into the micro-app element through innerHTML, and the document object model (DOM) structure of the sub-application is finally generated, which is in the following form:

[0139] <micro-app>

[0140] <micro-app-head> Header content< / micro-app-head>

[0141] <micro-app-body> Main content< / micro-app-body>

[0142] <micro-app>.

[0143] S504: Search for script elements of the sub-application to form a script, and insert a proxy object into the script.

[0144] Find all script elements of the sub-application, extract the script language (Java script, JS), and use the self-executing function and the with method to wrap the JS content, i.e. the script, in the form of a string, so as to insert the script into a sandbox and format the JS content. Here, insert an empty object as a global object into the script, and set the proxy to proxy the empty object. Here, the empty object is called a proxy object.

[0145] When you insert a script into a sandbox, you can bind calls to the proxy object.

[0146] Among them, the script insertion sandbox and the call to the binding of the proxy object can be realized in the following way: `;(function(window){with(window){;${JS content}}).call(proxy object, proxy object)`.

[0147] Store the formatted JS content into the array JSArray.

[0148] In the embodiment of the present application, the script of the sub-application is placed in an environment isolated from the outside, namely a sandbox, for execution, which can prevent script variable pollution and the execution of some additional operations.

[0149] S505: Call the document object through the sub-application.

[0150] When the browser loads the HTML document of the front-end application, the document object of the front-end application is formed. The document object is the root node of the HTML document. The document object is used by the script of the sub-application to access all elements in the HTML page. The document object is part of the window object and can be accessed through the window object: window.document property.

[0151] When the sub-application calls the document object, the get method is triggered, and the call to the proxy object attribute is intercepted through the get method. When the document on the object is obtained, the real document object is returned.

[0152] In the embodiment of the present application, when the sub-application calls the document object, the window object will be used. At this time, the sub-application actually uses the proxy object as the middle layer, and then switches to the real window object through the middle layer. In this way, the sub-application can use the window object normally as usual, and can also do some operations in the middle layer. In the embodiment of the present application, when the document object is obtained in the script of the sub-application through the middle layer, it is recorded which sub-application is active.

[0153] S506. Assign the container element to the activeApp variable.

[0154] Assign the container element micro-app to the activeApp variable for caching, and after a sub-application ends using the activeApp variable, delete the activeApp asynchronously through Promise.resolve. The deletion operation can be done by Promise.resolve().then(()=>activeApp=null).

[0155] In the embodiment of the present application, the use of the proxy proxy empty object is to allow the script of the sub-application to run in the sandbox environment, and steps 501 to 506 are the operations of putting the script of the sub-application into the sandbox. In the present application, if the created proxy object is an empty object, the proxy object is pure and will not have any side effects, and when calling the empty object, it is not the empty object that really works, but because the proxy must have an object as a proxy, so this empty object is purely a tool. Through the proxy proxy empty object, the global variable window can be simulated to better implement the sandbox environment. Window is a global object variable that comes with the browser. Almost all the methods that come with the browser are registered on the window object. The role of the proxy proxy is to create an intermediate layer. If you want to use the method on the window, you will first pass through the prxoy proxy and then find the window, and the proxy intermediate layer can perform operations such as interception. The empty object has nothing to do with the micro-app itself, it acts on the script of the sub-application.

[0156] When the script in the sub-application obtains the document object, it first passes through the Proxy object and the middle layer, and then the Proxy object obtains the document from the global object window and returns it. For users, their goal is to obtain the document object, and they do obtain it successfully. For them, this process is the same as usual, but in fact it passes through the proxy middle layer, and this middle layer records which sub-application is obtaining the document object. The defined Get method is the specific implementation of the middle layer. During the rendering process of the sub-application page and every change of the page, the document will be obtained and the middle layer will be triggered.

[0157] Part 2: Operate on the elements of the sub-application within the container element based on the document object, such as Figure 6 As shown, the logical structure of the front-end application 60 can be as follows Figure 6 As shown, it includes: a base application 61, the base application 61 includes a container element 62, a sub-application 63 is inserted into the container element 62, wherein the container element 62 is a sub-application container of the sub-application 63.

[0158] Here, the element isolation method applied to the front-end application 60 is as follows: Figure 6 As shown, including:

[0159] S601, monitoring an operation request for operating an element;

[0160] S602: Determine whether it is an operation on a sub-application;

[0161] If it is not an operation on a sub-application, S603 is executed; if it is an operation on a sub-application, S604 is executed.

[0162] S603, performing normal operation;

[0163] S604: Intercept the current operation request and execute the operation within the sub-application container within the operation permission.

[0164] In the embodiment of the present application, when a sub-application operates an element in the sub-application, the sub-application script may operate the element in the sub-application through the document object. The operations performed by the sub-application may include: creation operation, addition operation, deletion operation and query operation, wherein the implementation of the element isolation method may be different based on different operations.

[0165] When an operation is received and it is determined to be an operation performed by a self-application, the operation request can be rewritten to limit the operation to the sub-application container where the sub-application is located.

[0166] Operation 1: Create an element

[0167] Here, elements can be created through the document.createElement method.

[0168] When the sub-application script calls document.createElement, it determines whether activeApp has a value. If so, it indicates that the sub-application created the element. The value of activeApp is assigned to the scopedApp attribute of the element for subsequent judgment and operation. If the value of activeApp does not exist, it indicates that the base application created the element. In this case, the element can be created normally.

[0169] Operation 2: Adding elements

[0170] The operation of adding elements refers to two methods on the Node prototype: Node.prototype.appendChild and Node.prototype.insertBefore.

[0171] Rewrite these two methods to determine whether the element being added has the attribute scopedApp and the target of the element insertion is the head element or the body element. If the conditions are met, intercept the insertion operation and insert the element into the micro-app-head element or the micro-app-body element. If the conditions are not met, perform the addition operation normally.

[0172] Intercepting the operation of adding elements ensures that all elements of the sub-application are inside the micro-app element and do not leak outside.

[0173] Operation 3: Delete operation of deleting elements

[0174] The element deletion operation refers to the method on the Node prototype: Node.prototype.removeChild.

[0175] This corresponds to the add operation. When the deleted element has the attribute scopedApp and is deleted from the head element or body element, the delete operation is intercepted and deleted from the micro-app-head or micro-app-body. If the above conditions are not met, the delete operation is performed normally.

[0176] Operation 4: Query operation of query elements

[0177] The operations for querying elements on the document prototype are:

[0178] document.prototype.querySelector

[0179] document.prototype.querySelectorAll

[0180] document.prototype.getElementById

[0181] document.prototype.getElementsByClassName

[0182] document.prototype.getElementsByName

[0183] Normally, these query operations will find all elements that meet the conditions, including base applications and sub-applications. We rewrite them so that when these methods are executed, we check whether activeApp has a value. If so, it means that a sub-application is querying an element. In this case, the query operation is intercepted and the query is limited to the micro-app element.

[0184] For example, the code to rewrite document.prototype.querySelector is as follows:

[0185]

[0186]

[0187] The other query methods are rewritten in a similar way.

[0188] If the value of activeApp does not exist, it means that the base application is querying elements in the base application. In this case, just execute the query normally.

[0189] Finally, the eval method is used to loop through the JS content wrapped in the JSArray array. At this time, the scope of the sub-element operation element is limited to the micro-app, thus achieving element isolation of the micro-frontend.

[0190] Figure 7 Schematic diagram of the structure of an element isolation device according to an embodiment of the present application. Figure 7 As shown, the element isolation device 700 includes:

[0191] A receiving module 701 is configured to receive a first operation request for a target element based on a first application;

[0192] A determination module 702, used to determine the scope of the target element;

[0193] An interception module 703 is used to intercept the first operation request and generate a second operation request based on the first operation request when the scope of the target element is a second application; the second application is located in a target container element of the first application, and the operation permission of the second operation request is limited to the target container element;

[0194] The first operation module 704 is configured to perform a corresponding operation on the target element in the target container element based on the second operation request.

[0195] In some embodiments, the apparatus 700 further includes:

[0196] The second operation module is used to perform a corresponding operation on the target element in the first application based on the first operation request when the scope of the target element is the first application.

[0197] In some embodiments, the determination module 702 is further configured to:

[0198] In the case where the first operation request includes a create request, determining whether there is content in a reference object, the reference object being used to point to the target container element;

[0199] In a case where the reference object has content, the scope of the target element is determined to be the second application.

[0200] In some embodiments, the apparatus 700 further includes: a pointing module, configured to:

[0201] Before determining whether the reference object has content, obtaining the page content of the second application;

[0202] Converting the page content;

[0203] Inserting the converted page content into the target container element;

[0204] Point the reference object to the target container element.

[0205] In some embodiments, the determination module 702 is further configured to:

[0206] Obtaining attribute information of the target element carried in the first operation request;

[0207] Determine a permission attribute in the attribute information, wherein the permission attribute represents a scope of the target element;

[0208] When the value of the permission attribute indicates the second application, the scope of the target element is determined to be the second application.

[0209] In some embodiments, the apparatus 700 further includes: an adding module, configured to:

[0210] In the case that the reference object has content, the permission attribute is added to the attribute information of the target element, and the value of the reference object is assigned to the permission attribute.

[0211] In some embodiments, the apparatus 700 further includes: an acquisition module, configured to:

[0212] Before the first application receives the first operation request for the target element, it is detected that the script of the second application calls the document object, and then the proxy service is called through the proxy object in the script of the second application; the proxy object is a global object;

[0213] The document object is called through the proxy service; the document object is used for the script of the second application to trigger the first operation request.

[0214] In some embodiments, the apparatus 700 further includes: a recording module, configured to record the application identifier of the second application through the proxy service.

[0215] It should be noted that the various logic units included in the element isolation device provided in the embodiment of the present application can be implemented by a processor in an electronic device; of course, they can also be implemented by a specific logic circuit; in the implementation process, the processor can be a central processing unit (CPU, Central Processing Unit), a microprocessor (MPU, Micro Processor Unit), a digital signal processor (DSP, Digital Signal Processor) or a field programmable gate array (FPGA, Field-Programmable Gate Array), etc.

[0216] The description of the above system embodiment is similar to the description of the above method embodiment, and has similar beneficial effects as the method embodiment. For technical details not disclosed in the system embodiment of the present application, please refer to the description of the method embodiment of the present application for understanding.

[0217] It should be noted that, in the embodiment of the present application, if the above-mentioned element isolation method is implemented in the form of a software function module, and when it is sold or used as an independent product, it can also be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of the embodiment of the present application is essentially or the part that contributes to the relevant technology can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including several instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to run all or part of the methods described in each embodiment of the present application. And the aforementioned storage medium includes: various media that can store program codes, such as a U disk, a mobile hard disk, a read-only memory (Read Only Memory, ROM), a disk or an optical disk. In this way, the embodiment of the present application is not limited to any specific hardware and software combination.

[0218] An embodiment of the present application also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps in the above-mentioned element isolation method when executing the computer program.

[0219] Correspondingly, an embodiment of the present application provides a storage medium, that is, a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the element isolation method provided in the above embodiment is implemented.

[0220] It should be noted here that the description of the above storage medium embodiment is similar to the description of the above method embodiment, and has similar beneficial effects as the method embodiment. For technical details not disclosed in the storage medium embodiment of the present application, please refer to the description of the method embodiment of the present application for understanding.

[0221] It should be noted that Figure 8 A hardware entity diagram of an electronic device according to an embodiment of the present application is shown in FIG. Figure 8 As shown, the electronic device 800 includes: a processor 801, at least one communication bus 802, at least one external communication interface 804 and a memory 805. The communication bus 802 is configured to achieve connection and communication between these components. In an example, the electronic device 800 also includes: a user interface 803, wherein the user interface 803 may include a display screen, and the external communication interface 804 may include a standard wired interface and a wireless interface.

[0222] The memory 805 is configured to store instructions and applications executable by the processor 801, and can also cache data to be processed or processed by the processor 801 and various modules in the electronic device (for example, image data, audio data, voice communication data, and video communication data), which can be implemented through flash memory (FLASH) or random access memory (Random Access Memory, RAM).

[0223] It should be understood that "one embodiment" or "an embodiment" mentioned throughout the specification means that specific features, structures or characteristics related to the embodiment are included in at least one embodiment of the present application. Therefore, "in one embodiment" or "in some embodiments" appearing throughout the specification may not necessarily refer to the same embodiment. In addition, these specific features, structures or characteristics can be combined in one or more embodiments in any suitable manner. It should be understood that in various embodiments of the present application, the size of the serial number of the above-mentioned processes does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application. The above-mentioned serial numbers of the embodiments of the present application are for description only and do not represent the advantages and disadvantages of the embodiments.

[0224] It should be noted that, in this article, the term "includes", "comprising" or any other variation thereof is intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also includes other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprising a ..." does not exclude the existence of other identical elements in the process, method, article or device including the element.

[0225] In the several embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. The device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as: multiple units or components can be combined, or can be integrated into another system, or some features can be ignored or not executed. In addition, the coupling, direct coupling, or communication connection between the components shown or discussed can be through some interfaces, and the indirect coupling or communication connection of the devices or units can be electrical, mechanical or other forms.

[0226] The units described above as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units; they may be located in one place or distributed on multiple network units; some or all of the units may be selected according to actual needs to achieve the purpose of the present embodiment.

[0227] In addition, all functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may be a separate unit, or two or more units may be integrated into one unit; the above-mentioned integrated units may be implemented in the form of hardware or in the form of hardware plus software functional units.

[0228] A person of ordinary skill in the art can understand that all or part of the steps of implementing the above-mentioned method embodiment can be completed by hardware related to program instructions, and the aforementioned program can be stored in a computer-readable storage medium. When the program is executed, it executes the steps of the above-mentioned method embodiment; and the aforementioned storage medium includes: various media that can store program codes, such as mobile storage devices, ROMs, magnetic disks or optical disks.

[0229] Alternatively, if the above-mentioned integrated unit of the present application is implemented in the form of a software function module and sold or used as an independent product, it can also be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the embodiment of the present application can be essentially or partly embodied in the form of a software product that contributes to the relevant technology. The computer software product is stored in a storage medium, including several instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the methods described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as mobile storage devices, ROMs, magnetic disks, or optical disks.

[0230] The above is only an implementation method of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims. < / micro-app> < / micro-app>

Claims

1. An element isolation method, characterized in that: The method comprises: receiving a first operation request for a target element based on a first application; determining a scope of the target element; In a case where the scope of the target element is a second application, intercepting the first operation request, and generating a second operation request based on the first operation request; the second application is located in a target container element of the first application, and the operation permission of the second operation request is limited to the target container element; Based on the second operation request, perform a corresponding operation on the target element in the target container element; Wherein, determining the scope of the target element includes at least one of the following: Determine the scope of the target element according to the application identifier of the initiating application of the first operation request; Determining a scope of the target element according to attribute information of the target element carried in the first operation request; The scope of the target element is determined according to whether the reference object has content, and the reference object is an object set by the sub-application of the current operation element.

2. The method according to claim 1, characterized in that The method further comprises: When the scope of the target element is the first application, a corresponding operation is performed on the target element in the first application based on the first operation request.

3. The method according to claim 1, characterized in that Determining the scope of the target element according to whether the reference object has content includes: Determine whether the reference object has content, the reference object is used to point to the target container element; In a case where the reference object has content, the scope of the target element is determined to be the second application.

4. The method according to claim 3, characterized in that Before determining whether the reference object has content, the method further includes: Obtaining page content of the second application; Converting the page content; Inserting the converted page content into the target container element; Point the reference object to the target container element.

5. The method according to claim 1, characterized in that: The determining the scope of the target element according to the attribute information of the target element carried in the first operation request includes: Obtaining attribute information of the target element carried in the first operation request; Determine a permission attribute in the attribute information, wherein the permission attribute represents a scope of the target element; When the value of the permission attribute indicates the second application, the scope of the target element is determined to be the second application.

6. The method according to claim 5, characterized in that The method further comprises: In the case that the reference object has content, the permission attribute is added to the attribute information of the target element, and the value of the reference object is assigned to the permission attribute.

7. The method according to claim 1, characterized in that Before receiving a first operation request for a target element based on a first application, the method includes: When it is detected that the script of the second application calls the document object, a proxy service is called through a proxy object in the script of the second application; the proxy object is a global object; The document object is called through the proxy service; the document object is used for the script of the second application to trigger the first operation request.

8. The method according to claim 7, characterized in that The method further comprises: The application identifier of the second application is recorded through the proxy service.

9. An element isolation device, comprising: A receiving module, configured to receive a first operation request for a target element based on a first application; A determination module, used to determine the scope of the target element; an interception module, configured to intercept the first operation request when the scope of the target element is a second application, and generate a second operation request based on the first operation request; The second application is located in a target container element of the first application, and the operation permission of the second operation request is limited to the target container element; A first operation module, configured to perform a corresponding operation on the target element in the target container element based on the second operation request; Among them, the determination module is also used to determine the scope of the target element according to the application identifier of the initiating application of the first operation request; and / or, determine the scope of the target element according to the attribute information of the target element carried by the first operation request; and / or, determine the scope of the target element according to whether there is content in the reference object, and the reference object is an object set by the sub-application of the current operation element.

10. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor runs the computer program, the steps of the element isolation method according to any one of claims 1 to 8 are implemented.

11. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the element isolation method described in any one of claims 1 to 8 is implemented.

Images