Style isolation method and device, equipment and storage medium

Abstract

The invention provides a style isolation method and device, equipment and a storage medium, and relates to the technical field of style isolation, and the method comprises the steps: obtaining a tenant identifier corresponding to a micro-application in response to the loading of the micro-application, determining a target tenant, and creating a style sandbox for the target tenant; determining whether a target style rule in a style rule insertion operation belongs to a global style rule in response to the received style rule insertion operation corresponding to the target tenant when the micro front end runs; in response to the fact that the target style rule does not belong to the global style rule, inserting the target style rule into a style sandbox; and in response to the fact that the style rule belongs to the global style rule, adding an attribute prefix corresponding to the tenant identifier for the target style rule, and inserting the target style rule added with the attribute prefix into a style sandbox corresponding to the target tenant, thereby realizing accurate style isolation and intelligent processing of global style pollution. The combination of the two can give consideration to the technical effects of flexibility and safety.

Description

Technical Field

[0001] This invention relates to the field of pattern isolation technology, and in particular to a pattern isolation method, apparatus, device, and storage medium. Background Technology

[0002] In SaaS (Software as a Service) multi-tenant systems, existing style solutions for customizing tenant UIs (User Interfaces) have significant drawbacks: traditional CSS (Cascading Style Sheets) naming conventions require manual adherence, failing to eliminate global style pollution; while each tenant uses an independent iframe for isolation, complex inter-iframe communication negatively impacts user experience; and writing CSS in JavaScript suffers from performance limitations, increasing JavaScript execution time. None of these methods achieve a balance between ensuring complete isolation, maintaining low performance overhead, and providing a good development experience, leading to frequent style pollution issues across multi-tenant systems and severely damaging brand image.

[0003] Therefore, in view of the shortcomings of existing technical solutions, the present invention provides a style isolation method. Summary of the Invention

[0004] Therefore, it is necessary to provide a pattern isolation method, apparatus, device, and storage medium to address the aforementioned technical problems.

[0005] On one hand, a style isolation method is provided, the method comprising: in response to the loading of a micro-application, obtaining the tenant identifier corresponding to the micro-application, determining the target tenant based on the tenant identifier, and creating a style sandbox for the target tenant; in response to the micro-frontend receiving a style rule insertion operation corresponding to the target tenant during runtime, parsing the style rule insertion operation to determine the target style rule in the style rule insertion operation, and detecting whether the target style rule belongs to the global style rules based on a preset feature library, wherein the micro-frontend includes multiple micro-applications, and the target style rule includes preset configured style rules, dynamically generated style rules, and / or style rules injected by third-party micro-applications; in response to the target style rule not belonging to the global style rules, inserting the target style rule into the style sandbox; in response to the target style rule belonging to the global style rules, adding an attribute prefix corresponding to the tenant identifier to the target style rule, and inserting the target style rule with the added attribute prefix into the style sandbox corresponding to the target tenant.

[0006] Optionally, in response to the micro-application being loaded, the tenant identifier corresponding to the micro-application is obtained, the target tenant is determined based on the tenant identifier, and a style sandbox is created for the target tenant, including: determining whether the target tenant has a corresponding style sandbox based on the tenant identifier; in response to the existence of a style sandbox, calling the style sandbox corresponding to the target tenant; in response to the absence of a style sandbox, creating a corresponding style sandbox for the target tenant.

[0007] Optionally, in response to the absence of a style sandbox, a corresponding style sandbox is created for the target tenant, including: creating a style sandbox architecture corresponding to the target tenant; obtaining the theme configuration of the target tenant based on the tenant identifier of the target tenant and generating a style sheet string; and writing the style sheet string into the style sandbox architecture to obtain the style sandbox corresponding to the target tenant.

[0008] Optionally, based on the tenant identifier of the target tenant, the theme configuration of the target tenant is obtained and a style sheet string is generated, including: generating a cache identifier based on the tenant identifier and theme configuration; checking whether a style string corresponding to the cache identifier exists in the cache; in response to the existence of a style string, calling the style string in the cache; in response to the absence of a style string, generating a style sheet string.

[0009] Optionally, before parsing the style rule insertion operation corresponding to the target tenant received in response to the micro-frontend runtime, the method further includes: initializing a global style interceptor; and intercepting any style rule insertion operation through the multi-layered interception network in the global style interceptor.

[0010] Optionally, in response to the micro-frontend runtime receiving a style rule insertion operation corresponding to the target tenant, the style rule insertion operation is parsed, including: establishing a tenant execution context; intercepting the style rule insertion operation, and determining the target tenant corresponding to the style rule insertion operation based on the tenant execution context.

[0011] Optionally, the style rule insertion operation is parsed to determine the target style rule in the style rule insertion operation. Based on a preset feature library, it is detected whether the target style rule belongs to the global style rule, including: parsing the target style rule to obtain the selector part and the style declaration part; parsing the selector part to obtain a sequence of simple selectors separated by spaces, and checking whether the first simple selector in the sequence exists in the preset feature library; if it exists in the preset feature library, it is determined that the target style rule belongs to the global style rule.

[0012] On the other hand, a style isolation device is provided, comprising: a first processing module, configured to, in response to the loading of a micro-application, obtain the tenant identifier corresponding to the micro-application, determine the target tenant based on the tenant identifier, and create a style sandbox for the target tenant; a second processing module, configured to, in response to the micro-frontend receiving a style rule insertion operation corresponding to the target tenant, parse the style rule insertion operation to determine the target style rule in the style rule insertion operation, and detect whether the target style rule belongs to the global style rules based on a preset feature library, wherein the micro-frontend includes multiple micro-applications, and the target style rule includes preset configured style rules, dynamically generated style rules, and / or style rules injected by third-party micro-applications; a third processing module, configured to, in response to the target style rule not belonging to the global style rules, insert the target style rule into the style sandbox; and a fourth processing module, configured to, in response to the target style rule belonging to the global style rules, add an attribute prefix corresponding to the tenant identifier to the target style rule, and insert the target style rule with the added attribute prefix into the style sandbox corresponding to the target tenant.

[0013] On another front, a computer device is provided, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the computer program, it performs the following steps: in response to a micro-application being loaded, obtaining the tenant identifier corresponding to the micro-application, determining the target tenant based on the tenant identifier, and creating a style sandbox for the target tenant; in response to a style rule insertion operation corresponding to the target tenant being received during micro-frontend runtime, parsing the style rule insertion operation to determine the target style rule in the style rule insertion operation, and detecting whether the target style rule belongs to the global style rules based on a preset feature library, wherein the micro-frontend includes multiple micro-applications, and the target style rule includes preset configured style rules, dynamically generated style rules, and / or style rules injected by third-party micro-applications; in response to the target style rule not belonging to the global style rules, inserting the target style rule into the style sandbox; in response to the target style rule belonging to the global style rules, adding an attribute prefix corresponding to the tenant identifier to the target style rule, and inserting the target style rule with the added attribute prefix into the style sandbox corresponding to the target tenant.

[0014] On another front, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the following steps are performed: in response to a micro-application being loaded, obtaining the tenant identifier corresponding to the micro-application, determining the target tenant based on the tenant identifier, and creating a style sandbox for the target tenant; in response to a style rule insertion operation corresponding to the target tenant being received during micro-frontend runtime, parsing the style rule insertion operation to determine the target style rule in the style rule insertion operation, and detecting whether the target style rule belongs to the global style rules based on a preset feature library, wherein the micro-frontend includes multiple micro-applications, and the target style rule includes preset configured style rules, style rules generated by dynamic scripts, and / or style rules injected by third-party micro-applications; in response to the target style rule not belonging to the global style rules, inserting the target style rule into the style sandbox; in response to the target style rule belonging to the global style rules, adding an attribute prefix corresponding to the tenant identifier to the target style rule, and inserting the target style rule with the added attribute prefix into the style sandbox corresponding to the target tenant.

[0015] The aforementioned style isolation method, apparatus, device, and storage medium include the following steps: In response to a micro-application being loaded, obtaining the tenant identifier corresponding to the micro-application; determining the target tenant based on the tenant identifier; and creating a style sandbox for the target tenant. In response to a style rule insertion operation received during micro-frontend runtime, parsing the style rule insertion operation to determine the target style rule in the insertion operation; and detecting whether the target style rule belongs to global style rules based on a preset feature library. The micro-frontend includes multiple micro-applications, and the target style rule includes preset configured style rules, dynamically generated script style rules, and / or style rules injected by third-party micro-applications. In response to the target style rule not belonging to global style rules, inserting the target style rule into the style sandbox. In response to the target style rule belonging to global style rules, adding an attribute prefix corresponding to the tenant identifier to the target style rule, and inserting the target style rule with the added attribute prefix into the style sandbox corresponding to the target tenant. Thus, precise style isolation can be achieved through the sandbox, and intelligent handling of global style pollution can be achieved by dynamically adding tenant attribute prefixes to global style rules. The combination of these two approaches balances flexibility and security. Attached Figure Description

[0016] To more clearly illustrate the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0017] Figure 1 This is a flowchart illustrating the style isolation method in one embodiment; Figure 2This is a system schematic diagram of a style isolation method in one embodiment; Figure 3 This is a schematic diagram of the global selector protection mechanism of the style isolation method in one embodiment; Figure 4 This is a structural block diagram of a style isolation device in one embodiment; Figure 5 This is an internal structural diagram of a computer device in one embodiment. Detailed Implementation

[0018] To make the objectives, technical solutions, and advantages of this application clearer, the technical solutions in the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0019] It should be understood that, in the description of this application, unless the context explicitly requires it, words such as "including" or "comprising" throughout the specification should be interpreted as including rather than exclusive or exhaustive; that is, meaning "including but not limited to".

[0020] It should also be understood that the terms "first," "second," etc., are used for descriptive purposes only and should not be construed as indicating or implying relative importance. Furthermore, in the description of this application, unless otherwise stated, "a plurality of" means two or more.

[0021] It should be noted that the terms "S1," "S2," etc., are used only for descriptive purposes and do not specifically refer to the order or sequence, nor are they intended to limit this application. They are merely for the convenience of describing the method of this application and should not be construed as indicating the sequential order of the steps. Furthermore, the technical solutions of the various embodiments can be combined with each other, but this must be based on the ability of those skilled in the art to implement them. When the combination of technical solutions is contradictory or impossible to implement, it should be considered that such a combination of technical solutions does not exist and is not within the scope of protection claimed in this application.

[0022] In one embodiment, such as Figure 1 As shown, a style isolation method is provided, including the following steps: S101: In response to the loading of a micro-application, obtain the tenant identifier corresponding to the micro-application, determine the target tenant based on the tenant identifier, and create a style sandbox for the target tenant.

[0023] Here, micro-applications are the basic building blocks of the micro-frontend architecture; they are smaller, simpler units that can be developed, tested, deployed, and run independently.

[0024] In the SaaS field, a tenant refers to a group of users who share the same application instance, and their data and configurations are logically isolated from each other.

[0025] Here, style sandboxes are used to restrict the scope of HTML (Hyper Text Markup Language) and CSS styles to a specific sandbox or container.

[0026] One tenant corresponds to one micro-application, and one micro-application corresponds to one style sandbox.

[0027] The style sandbox can be the Shadow DOM sandbox. The Shadow DOM is part of the Web Components standard and is designed to build encapsulated, independent DOM trees.

[0028] Tenant identifiers can be obtained from URLs (Uniform Resource Locators), user sessions, or configurations.

[0029] The changes take effect dynamically when a tenant accesses the application.

[0030] Specifically, a ShadowDOM sandbox is automatically created for each tenant's micro-application. Each micro-application includes HTML structure, CSS styles, and JavaScript logic.

[0031] S102: In response to the micro-frontend runtime receiving the style rule insertion operation corresponding to the target tenant, parse the style rule insertion operation to determine the target style rule in the style rule insertion operation, and detect whether the target style rule belongs to the global style rule based on the preset feature library. The micro-frontend includes multiple micro-applications, and the target style rule includes the preset configured style rule, the style rule generated by the dynamic script, and / or the style rule injected by the third-party micro-application.

[0032] Here, micro-frontend architecture breaks down a large, monolithic frontend application into multiple micro-applications, and then combines these micro-applications into a complete system for the end user.

[0033] Here, style rule insertion is a technique for dynamically adding CSS style rules to a document or a specific style container.

[0034] Methods for inserting style rules can include inserting direct text content, using the CSS Style Sheet API, inserting rules one by one, and replacing existing styles.

[0035] Here, global style rules are CSS style rules defined at the document level. These rules have global scope and can affect all matching elements in the document, including elements outside the Shadow DOM and some elements that may penetrate into the Shadow DOM.

[0036] Specifically, style rules can originate from pre-configured settings, dynamically generated scripts, or be injected by unpredictable third-party micro-applications during the loading process.

[0037] S103: In response to the target style rule not being a global style rule, insert the target style rule into the style sandbox.

[0038] S104: In response to the target style rule being a global style rule, add an attribute prefix corresponding to the tenant identifier to the target style rule, and insert the target style rule with the added attribute prefix into the style sandbox corresponding to the target tenant.

[0039] The attribute prefix can be [data-tenant="xxx"].

[0040] Specifically, when a micro-application is loaded, the system creates a Shadow DOM container for the micro-application at runtime and injects its styles into it. At the same time, by hijacking native APIs such as CSSStyleSheet.insertRule, it dynamically analyzes and rewrites any CSS rules that attempt to be inserted, adding tenant prefixes to them. This can achieve isolation at runtime and is completed in real time in the browser's memory.

[0041] It should be noted that this application can achieve precise style isolation through sandboxing, and intelligently handle global style pollution by dynamically adding tenant attribute prefixes to global style rules. The combination of the two can balance flexibility and security, while avoiding the runtime computation overhead of CSS-in-JS based on native Web Components technology.

[0042] In some specific implementations, in response to the loading of a micro-application, the tenant identifier corresponding to the micro-application is obtained, the target tenant is determined based on the tenant identifier, and a style sandbox is created for the target tenant, including: Based on the tenant identifier, determine whether the target tenant has a corresponding style sandbox; In response to the existence of a style sandbox, the style sandbox corresponding to the target tenant is invoked; In response to the absence of a style sandbox, create a corresponding style sandbox for the target tenant.

[0043] In one embodiment, a CSS variable proxy layer is established within the Shadow DOM. All internal styles use these proxy variables, which are then mapped to global CSS variables defined on the tenant's page, allowing for dynamic theme adjustments.

[0044] This avoids style chaos or resource conflicts caused by repeated creation, and prevents the repeated addition or overwriting of style rules that may be caused by repeated creation of the sandbox.

[0045] In some specific implementations, in response to the absence of a style sandbox, a corresponding style sandbox is created for the target tenant, including: Create a style sandbox architecture corresponding to the target tenant; Based on the tenant identifier of the target tenant, obtain the theme configuration of the target tenant and generate a stylesheet string; Write the stylesheet string into the style sandbox architecture to obtain the style sandbox corresponding to the target tenant.

[0046] Here, the stylesheet string is a text string containing CSS style rules, which exists as a string in the JavaScript code.

[0047] The style sandbox architecture is universal.

[0048] The main configuration can include color, font, spacing, etc.

[0049] Specifically, the process involves obtaining the tenant identifier (tenantId), creating a style sandbox for the tenant, retrieving the theme configuration using getThemeConfig(tenantId), converting the theme configuration into a stylesheet string using the generateStyleString function, and finally writing the stylesheet string into the Shadow DOM. <style>元素中。

[0050] 在一个实施例中，在识别新租户时动态构建样式沙箱架构，可以支持运行时多租户扩展。

[0051] 如此，实现物理级样式隔离。

[0052] 在一些具体实施方式中，根据目标租户的租户标识，获取目标租户的主题配置并生成样式表字符串，包括：根据租户标识和主题配置，生成缓存标识；检测缓存中是否存在缓存标识对应的样式字符串；响应于存在样式字符串，调用缓存中的样式字符串；响应于不存在样式字符串，生成样式表字符串。

[0053] 其中，只要主题版本不变，同一租户的样式就可以直接使用缓存，避免重复生成。

[0054] 其中，可以通过预缓存热门租户或分层缓存策略进行缓存。分层缓存策略可以包括内存缓存、磁盘缓存和远程缓存的结合。

[0055] 具体地，首次生成样式后，以租户ID和主题版本为键缓存，下次发起相同请求时，直接返回缓存结果。

[0056] 如此，避免为同一主题配置的重复计算和字符串拼接操作，减少CPU计算和内存占用。

[0057] 在一些具体实施方式中，在响应于微前端运行时接收到目标租户对应的样式规则插入操作，解析样式规则插入操作之前，方法还包括：初始化全局样式拦截器；通过全局样式拦截器中的多层拦截网，拦截任一样式规则插入操作。

[0058] 其中，多层拦截网可以由DOM监听、CSSOM接口劫持与现有样式表扫描构成。

[0059] 具体地，拦截DOM动态插入操作（针对<style>与<link>标签）、劫持CSSOM编程接口（针对JavaScript动态操作）和扫描与重写现有样式表（针对页面初始加载的样式）。

[0060] 如此，全面捕获所有潜在样式注入行为，实现对样式规则的全面管控。

[0061] 在一些具体实施方式中，响应于微前端运行时接收到目标租户对应的样式规则插入操作，解析样式规则插入操作，包括：建立租户执行上下文；拦截样式规则插入操作，根据租户执行上下文，确定样式规则插入操作对应的目标租户。

[0062] 其中，可以支持同页面多租户共存（如嵌入式预览、多工作区）场景下的精准样式归属。

[0063] 具体地，在执行任一租户的应用程序代码前，先将该租户的唯一标识（如tenantId）设置到一个基座服务管理的全局变量（例如window.currentTenantId）或一个其他可全局访问的存储中；在基座服务层，重写（或包装）原生的CSSOM（CSSObjectModel，CSS对象模型）方法，如CSSStyleSheet.prototype.InsertRule和CSSStyleSheet.prototype.deleteRule；当这些被重写的方法被调用时，从上述全局变量中获取当前正在执行的租户标识，此时发起的CSS规则插入操作，即被定义为当前租户的样式规则插入操作。

[0064] 在一个实施例中，还可以为在为租户创建Shadow DOM沙箱时，同时为该沙箱创建一个代理（Proxy）或重写后的CSS Style Sheet方法集合；将专用的CSSOM操作接口注入到该租户的Shadow DOM内部的document或window对象中；拦截器固有租户信息，持有其所属沙箱的tenant Id，无需依赖外部全局变量。

[0065] 如此，精准关联样式与租户，避免因上下文错乱导致样式写入错误沙箱，保障隔离准确性。

[0066] 在一些具体实施方式中，解析样式规则插入操作，以确定样式规则插入操作中的目标样式规则，基于预设特征库，检测目标样式规则是否属于全局样式规则，包括：解析目标样式规则，得到选择器部分和样式声明部分；解析选择器部分，得到由空格分隔的简单选择器序列，并检查序列中的第一个简单选择器是否存在于预设特征库中；若存在于预设特征库中，确定目标样式规则属于全局样式规则。

[0067] 其中，预定义模式库可以包括html, body, :root, *, 无作用域类名等。

[0068] 具体地，将目标CSS规则解析为结构化的对象模型，分离其选择器部分与样式声明部分；遍历选择器部分，对识别出的每一个全局选择器，在其前添加属性前缀 [data-tenant="当前租户ID"]，以将其作用域限定在当前租户的沙箱容器内；使用重写后的选择器与原始的样式声明，重构为一条新的、符合CSS标准的规则字符串。

[0069] 如此，自动检测全局样式规则，无需开发人员手动标记，减少了因人为失误导致隔离失效的风险。

[0070] 在一个实施例中，图2为本申请实施例中的系统示意图，如图2所示，系统包括：隔离执行层、应用呈现层和基座服务层。

[0071] 具体地，隔离执行层中包括各租户的Shadow DOM沙箱，如租户A Shadow DOM沙箱、租户B Shadow DOM沙箱和租户…Shadow DOM沙箱。

[0072] 具体地，应用呈现层中包括应用实例、组件库，如微应用A实例及组件库、微应用B实例及组件库和微应用…实例及组件库。

[0073] 具体地，基座服务层中包括前缀注入器、沙箱管理器和样式缓存。其中，样式缓存提供缓存样式至沙箱管理器，沙箱管理器从样式缓存中获取或生成样式，沙箱管理器和前缀注入器向隔离执行层注入防护规则管理。

[0074] 示例性的，动态沙箱创建机制可以包括：Class SandboxManager{ / / 为微应用创建样式沙箱createSandbox(appElement,tenantId){ / / 创建封闭模式的ShadowRootconst shadowRoot=appElement.attachShadow({mode:'closed'}); / / 注入租户专属样式const styleSheet=this.generateTenantStyles(tenantId);shadowRoot.innerHTML=`<style>${styleSheet}< / style> <slot>< / slot> `; / / Bind sandbox metadata shadowRoot.host.dataset.tenant=tenantId; return shadowRoot; } / / Generate tenant stylesheet generateTenantStyles(tenantId){ const theme=this.themeService.get(tenantId); return` / * Base layer inheritance * / :host{ --spacing-md:var(--base-spacing-md); --border-radius:var(--base-radius); } / * Business layer isolation * / .btn-primary{ background:${theme.primaryColor}; border-color:${theme.primaryColor}; } .header{background:${theme.headerBg}} `; } } In one embodiment, Figure 3 This is a schematic diagram of the global selector protection mechanism in the embodiments of this application, such as... Figure 3 As shown, the global selector protection mechanism process includes: intercepting CSS insertion operations, determining whether a global selector is included, inserting it as is if not, adding a tenant prefix if yes, inserting the processed rule, and completing the process.

[0075] For example, a global selector protection mechanism may include: Class PrefixInjector{ constructor(){ / / Intercept insertRule operation this.hookCSSOM(); } hookCSSOM(){ const originalInsertRule=CSSStyleSheet.prototype.insertRule; CSSStyleSheet.prototype.insertRule=function(rule,index){ / / Identify global selector const globalSelectors=['body','html','div','*']; const tenantId=this.getTenantId(); / / Automatically add tenant prefix const processedRule=globalSelectors.reduce((r,selector)=>{ const regex=newRegExp(`(^|[^.])${selector}([^a-zA-Z0-9])`,'g'); return r.replace(regex,`$1[data-tenant="${tenantId}"]${selector}$2`); },rule); return originalInsertRule.call(this,processedRule,index); }.bind(this); } getTenantId(){ / / Get the current tenant from the execution context return window.currentTenantId; } } It should be understood that, although Figures 1-3 The steps in the flowchart are shown sequentially as indicated by the arrows, but these steps are not necessarily executed in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order in which these steps are executed, and they can be performed in other orders. Figures 1-3 At least some of the steps in the process may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these sub-steps or stages is not necessarily sequential, but can be executed in turn or alternately with other steps or at least some of the sub-steps or stages of other steps.

[0076] In one embodiment, such as Figure 4As shown, a style isolation device is provided, comprising: a first processing module 401, configured to, in response to a micro-application being loaded, obtain the tenant identifier corresponding to the micro-application, determine the target tenant based on the tenant identifier, and create a style sandbox for the target tenant; a second processing module 402, configured to, in response to a micro-frontend receiving a style rule insertion operation corresponding to the target tenant, parse the style rule insertion operation to determine the target style rule in the style rule insertion operation, and, based on a preset feature library, detect whether the target style rule belongs to global style rules, wherein the micro-frontend includes multiple micro-applications, and the target style rule includes preset configured style rules, dynamically generated style rules, and / or style rules injected by third-party micro-applications; a third processing module 403, configured to, in response to a target style rule not belonging to global style rules, insert the target style rule into the style sandbox; and a fourth processing module 404, configured to, in response to a target style rule belonging to global style rules, add an attribute prefix corresponding to the tenant identifier to the target style rule, and insert the target style rule with the added attribute prefix into the style sandbox corresponding to the target tenant.

[0077] As a preferred implementation, in this embodiment of the application, the first processing module 401 is specifically used to: determine whether a corresponding style sandbox exists for the target tenant based on the tenant identifier; in response to the existence of a style sandbox, call the style sandbox corresponding to the target tenant; in response to the absence of a style sandbox, create a corresponding style sandbox for the target tenant.

[0078] As a preferred implementation, in this embodiment of the application, the first processing module 401 is further configured to: create a style sandbox architecture corresponding to the target tenant; obtain the theme configuration of the target tenant and generate a style sheet string based on the tenant identifier of the target tenant; and write the style sheet string into the style sandbox architecture to obtain the style sandbox corresponding to the target tenant.

[0079] As a preferred implementation, in this embodiment of the application, the first processing module 401 is further configured to: generate a cache identifier based on the tenant identifier and theme configuration; detect whether a style string corresponding to the cache identifier exists in the cache; in response to the existence of a style string, call the style string in the cache; in response to the absence of a style string, generate a style sheet string.

[0080] In a preferred embodiment of this application, the device further includes an interception module, which is specifically used to: initialize a global style interceptor; and intercept any style rule insertion operation through a multi-layered interception network in the global style interceptor.

[0081] As a preferred implementation, in this embodiment of the application, the second processing module 402 is specifically used to: establish a tenant execution context; intercept the style rule insertion operation, and determine the target tenant corresponding to the style rule insertion operation based on the tenant execution context.

[0082] As a preferred implementation, in this embodiment of the application, the second processing module 402 is further configured to: parse the target style rule to obtain a selector part and a style declaration part; parse the selector part to obtain a sequence of simple selectors separated by spaces, and check whether the first simple selector in the sequence exists in a preset feature library; if it exists in the preset feature library, determine that the target style rule belongs to a global style rule.

[0083] For specific limitations regarding the style isolation device, please refer to the limitations on the style isolation method above, which will not be repeated here. Each module in the aforementioned style isolation device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device in hardware form, or stored in the memory of a computer device in software form, so that the processor can call and execute the operations corresponding to each module.

[0084] In one embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as follows: Figure 5 As shown, the computer device includes a processor, memory, network interface, display screen, and input devices connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The network interface is used to communicate with external terminals via a network connection. The computer program, when executed by the processor, implements a style isolation method. The display screen can be an LCD screen or an e-ink display screen. The input devices can be a touch layer covering the display screen, buttons, a trackball, or a touchpad mounted on the computer device casing, or an external keyboard, touchpad, or mouse, etc.

[0085] Those skilled in the art will understand that Figure 5 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0086] Embodiments of this application also provide a computer-readable storage medium storing a computer program, wherein the computer program is configured to execute the steps in any of the above-described style isolation method embodiments at runtime.

[0087] In one exemplary embodiment, the aforementioned computer-readable storage medium may include, but is not limited to, various media capable of storing computer programs, such as a USB flash drive, read-only memory (ROM), random access memory (RAM), portable hard disk, magnetic disk, or optical disk.

[0088] Embodiments of this application also provide a computer program product, which includes a computer program that, when executed by a processor, implements the steps in any of the above-described style isolation method embodiments.

[0089] Embodiments of this application also provide another computer program product, including a non-volatile computer-readable storage medium storing a computer program, which, when executed by a processor, implements the steps in any of the above-described isolation method embodiments.

[0090] Those skilled in the art will further recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of the various examples have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0091] The foregoing has provided a detailed description of a style isolation method, apparatus, table parsing system, and computer device provided in this application. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the embodiments above are only intended to aid in understanding the method and core ideas of this application. It should be noted that those skilled in the art can make various improvements and modifications to this application without departing from its principles, and these improvements and modifications also fall within the protection scope of the claims of this application.

Claims

1. A style isolation method, characterized in that, The method includes: In response to the loading of a micro-application, the tenant identifier corresponding to the micro-application is obtained, the target tenant is determined based on the tenant identifier, and a style sandbox is created for the target tenant; In response to receiving a style rule insertion operation corresponding to the target tenant during the micro-frontend runtime, the style rule insertion operation is parsed to determine the target style rule in the style rule insertion operation. Based on a preset feature library, it is detected whether the target style rule belongs to the global style rule. The micro-frontend includes multiple micro-applications, and the target style rule includes preset configured style rules, dynamically generated style rules, and / or style rules injected by third-party micro-applications. In response to the fact that the target style rule does not belong to the global style rule, the target style rule is inserted into the style sandbox; In response to the fact that the target style rule belongs to the global style rule, an attribute prefix corresponding to the tenant identifier is added to the target style rule, and the target style rule with the added attribute prefix is ​​inserted into the style sandbox corresponding to the target tenant.

2. The style isolation method according to claim 1, characterized in that, In response to the loading of the micro-application, the process includes obtaining the tenant identifier corresponding to the micro-application, determining the target tenant based on the tenant identifier, and creating a style sandbox for the target tenant, including: Based on the tenant identifier, determine whether the target tenant has a corresponding style sandbox; In response to the existence of the style sandbox, the style sandbox corresponding to the target tenant is invoked; In response to the absence of the style sandbox, a corresponding style sandbox is created for the target tenant.

3. The style isolation method according to claim 2, characterized in that, The step of creating a corresponding style sandbox for the target tenant in response to the absence of the style sandbox includes: Create a style sandbox architecture corresponding to the target tenant; Based on the tenant identifier of the target tenant, obtain the theme configuration of the target tenant and generate a style sheet string; Write the stylesheet string into the style sandbox architecture to obtain the style sandbox corresponding to the target tenant.

4. The style isolation method according to claim 3, characterized in that, The step of obtaining the theme configuration of the target tenant and generating a stylesheet string based on the tenant identifier of the target tenant includes: Generate a cache identifier based on the tenant identifier and the topic configuration; Check if the style string corresponding to the cache identifier exists in the cache; In response to the existence of the style string, the style string in the cache is invoked; In response to the absence of the style string, the style sheet string is generated.

5. The style isolation method according to claim 1, characterized in that, Before parsing the style rule insertion operation received by the micro-frontend runtime corresponding to the target tenant, the method further includes: Initialize the global style interceptor; The global style interceptor uses a multi-layered interception network to intercept any style rule insertion operation.

6. The style isolation method according to claim 1, characterized in that, The response to receiving the style rule insertion operation corresponding to the target tenant during the micro-frontend runtime, and parsing the style rule insertion operation, includes: Establish tenant execution context; The style rule insertion operation is intercepted, and the target tenant corresponding to the style rule insertion operation is determined based on the tenant execution context.

7. The style isolation method according to claim 1, characterized in that, The process of parsing the style rule insertion operation to determine the target style rule in the style rule insertion operation, and detecting whether the target style rule belongs to the global style rule based on a preset feature library, includes: Parse the target style rule to obtain the selector part and the style declaration part; The selector portion is parsed to obtain a sequence of simple selectors separated by spaces, and the existence of the first simple selector in the sequence is checked to see if it exists in the preset feature library. If the target style rule exists in the preset feature library, it is determined that the target style rule belongs to the global style rule.

8. A type of isolation device, characterized in that, The device includes: The first processing module is used to respond to the loading of the micro-application, obtain the tenant identifier corresponding to the micro-application, determine the target tenant based on the tenant identifier, and create a style sandbox for the target tenant; The second processing module is used to respond to the style rule insertion operation corresponding to the target tenant received during the micro-frontend runtime, parse the style rule insertion operation to determine the target style rule in the style rule insertion operation, and detect whether the target style rule belongs to the global style rule based on the preset feature library. The micro-frontend includes multiple micro-applications, and the target style rule includes preset configured style rules, dynamically generated style rules and / or style rules injected by third-party micro-applications. The third processing module is used to insert the target style rule into the style sandbox in response to the fact that the target style rule does not belong to the global style rule. The fourth processing module is used to add an attribute prefix corresponding to the tenant identifier to the target style rule in response to the target style rule belonging to the global style rule, and insert the target style rule with the added attribute prefix into the style sandbox corresponding to the target tenant.

9. A computer 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 executes the computer program, it implements the steps of the method according to any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 7.

Images