Component operation method and system of a low-code platform

Abstract

The application discloses a kind of component running method and system of low code platform, belong to electric digital data processing technical field, the method includes the following steps: for component setting sandbox isolation environment;Load the component, and establish second window for component;To the component is style isolation, scope isolation and code isolation;In the second window, the component is run;Based on proxy mode, the component is monitored.Through sandbox, independent second window, style isolation, scope isolation, code isolation and monitoring in running etc. multiple isolation modes, component is run in low code platform, improve the reuse rate of component, external component is isolated from main application, guarantee the running performance and stability of main application, avoid error due to component and lead to main application error or crash;Ensure that component does not contaminate main application.

Description

Technical Field

[0001] This invention relates to the field of electronic digital data processing technology, and more specifically to a component operation method and system for a low-code platform. Background Technology

[0002] Low-code platforms offer a way to quickly build applications without writing complete code. However, the capabilities of current platform native components are limited and cannot fully meet user needs, requiring users to extend functionality through custom code. However, custom components have a high learning curve, requiring users to invest significant time and effort to master them; the lack of component reuse mechanisms leads to code duplication and management difficulties. Furthermore, most custom component technologies are based on iframes, which have scenario limitations and performance bottlenecks, impacting user experience. Summary of the Invention

[0003] In view of the above-mentioned technical problems existing in the prior art, the present invention provides a component running method and system for a low-code platform, which uses components on a safe basis and establishes a component reuse mechanism, thereby largely avoiding the impact of components on the main application.

[0004] This invention discloses a component running method for a low-code platform, comprising the following steps: setting up a sandbox isolation environment for the component; loading the component and creating a second window for the component; performing style isolation, scope isolation, and code isolation on the component; running the component in the second window; and monitoring the component based on a proxy pattern.

[0005] Preferably, the method of running the component includes:

[0006] It uses the Babel parser to parse and run external component code, and renders it using React 18.

[0007] It also includes methods for uninstalling components:

[0008] After uninstalling the component, the sandbox isolation environment and listening agent are eliminated, and the corresponding resources are released.

[0009] Preferably, the method for creating a second window includes: creating a second window and assigning a sequence number to the second window based on the node tree.

[0010] Preferably, the method for monitoring the component includes:

[0011] In proxy mode, register a listener;

[0012] The listener is used to intercept and listen to the component's events;

[0013] It also includes methods for exception handling:

[0014] Based on listeners, monitor error events and error log recording;

[0015] Based on the error events and error log records, display user-friendly error message information;

[0016] Determine whether the component has a stable state;

[0017] If so, revert the component to the stable state or reset the component state;

[0018] If not, uninstall the component and clean up the allocated resources.

[0019] Preferably, the method for reloading a component includes: resetting the sandbox isolation environment of the component; clearing the global state and variables of the sandbox isolation environment; reloading the component's dependencies; determining whether the component has a state synchronization mechanism with external components; if so, synchronizing the state information with the external components after the component recovers.

[0020] Preferably, styles, scopes, and code are isolated based on iframes and WebComponents;

[0021] Iframe-based isolation methods include:

[0022] Insert an iframe tag into the page to create an iframe document;

[0023] Load the component's content into the iframe document;

[0024] Based on the iframe document, load the component's independent HTML, CSS, and JavaScript files;

[0025] Restricting iframe permissions based on the sandbox attribute;

[0026] The iframe document and the main application's page exchange and interact with each other based on the postMessage API;

[0027] Methods based on WebComponent isolation include:

[0028] Custom elements are defined using JavaScript, and these custom elements inherit from HTML elements.

[0029] In the constructor of the custom element, a node tree is created based on this.attachShadow({ mode: 'open'}), and the node tree structure inside the component is encapsulated.

[0030] HTML templates for components are defined using the `template` tag and applied in the node tree;

[0031] CSS styles for components are encapsulated using the `style` tag;

[0032] Define and trigger custom events within the component, and interact with external components through these custom events.

[0033] Preferably, iframes are used to provide overall isolation; each module within a component is componentized using WebComponents.

[0034] The iframe and the main page of the main application exchange and interact with each other through the postMessage API;

[0035] The various componentized modules communicate with each other through custom events and properties.

[0036] Preferably, the method for achieving style isolation based on scope includes: adding a namespace prefix to the style selector of the component; performing style isolation based on the namespace prefix and the style selector prefix; encapsulating the structure of the node tree and the style of the component to obtain a second node; and isolating the style of the component based on the second node.

[0037] Preferably, the method for establishing a cache for the component includes: marking each version of the component based on a hash value or a unique identifier; storing multiple versions of the component and their corresponding dependencies locally based on a browser database; and matching and locating dependencies loaded in the cache based on a dependency query algorithm.

[0038] The present invention also provides a system for implementing the above method, including an isolation module, a running module, and a listening module; the isolation module is used to set up a sandbox isolation environment for the component; load the component and create a second window for the component; perform style isolation, scope isolation, and code isolation on the component; the running module is used to run the component in the second window; the listening module is used to listen to the component based on the proxy pattern.

[0039] Compared with the prior art, the beneficial effects of the present invention are as follows: by using multiple isolation methods such as sandboxing, independent second window, style isolation, scope isolation, code isolation, and runtime monitoring, the components run on a low-code platform, improving the reusability of the components, isolating external components from the main application, ensuring the running performance and stability of the main application, avoiding errors or crashes in the main application due to component errors, and ensuring that the components do not pollute the main application. Attached Figure Description

[0040] Figure 1This is a flowchart of the component operation method of the low-code platform of the present invention;

[0041] Figure 2 This is a flowchart of the exception handling method;

[0042] Figure 3 This is the system logic block diagram of the present invention. Detailed Implementation

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

[0044] The present invention will now be described in further detail with reference to the accompanying drawings:

[0045] A method for running components on a low-code platform, such as Figure 1 As shown, it includes the following steps:

[0046] Step 101: Obtain the components to be run.

[0047] Step 102: Set up a sandbox isolation environment for the component.

[0048] Step 103: Load the component and create a second window for the component.

[0049] During the loading of the component, the component can also be parsed, the component code and corresponding dependencies can be extracted, and the data parsing results can be transformed and packaged.

[0050] Step 104: Perform style isolation, scope isolation, and code isolation on the component.

[0051] Step 105: Based on the sandbox isolation environment, run the component in the second window.

[0052] Step 106: Based on the proxy pattern, listen to and intercept the components.

[0053] Step 107: Unload the component when it cannot run or after it has finished running.

[0054] By employing various isolation methods such as sandboxing, independent second windows, style isolation, scope isolation, code isolation, and runtime monitoring, components run on a low-code platform, improving component reusability, isolating external components from the main application, ensuring the main application's performance and stability, preventing errors or crashes in the main application due to component mistakes, and ensuring that components do not pollute the main application.

[0055] In step 105, the method for running the component includes: parsing and running the component's code based on the Babel parser, and rendering the component's execution based on React18.

[0056] In step 107, the method for unloading the component includes: after unloading the component, eliminating the sandbox isolation environment and the corresponding listening proxy mode, and releasing the corresponding resources to ensure the continuous stability of the system.

[0057] In step 103, the method for creating the second window includes:

[0058] Create a second window and assign a sequence number to it based on the node tree (shadow-DOM, DOM).

[0059] The second window is mounted in the node tree to avoid direct interaction with the main application's first window. Each second window is assigned a unique DOM ID. When multiple windows pop up, execution is performed under the specified DOM ID to avoid mutual interference. The second windows can be managed using the Popupmanager tool. This invention can automatically generate unique DOM IDs, and when multiple windows pop up, execution is performed under the specified DOM ID to avoid mutual interference.

[0060] One method for establishing a cache for the component during loading is as follows:

[0061] Step 311: Tag each version of the component based on a hash value or a unique identifier.

[0062] Precise version control ensures that the required version is correctly loaded during updates or rollbacks. Utilizing hashing or unique identifier techniques ensures that each request accurately hits the corresponding version in the cache.

[0063] Step 312: Based on the browser database (indexedDB), store multiple versions of the component and their corresponding dependencies locally.

[0064] Step 313: Based on the dependency query algorithm, match and locate dependencies loaded in the cache. This algorithm quickly matches and locates cached component dependencies, reducing duplicate loading.

[0065] By effectively utilizing local caching, we can improve component loading and runtime efficiency. This reduces network latency, enhancing user experience and application responsiveness.

[0066] In step 104, styles, scopes, and code are isolated based on iframe and WebComponent.

[0067] Among them, the methods based on iframe isolation include:

[0068] Step 401: Insert an iframe tag into the page ( <iframe> ), create an iframe document.

[0069] Step 402: Load the content of the component into the iframe document.

[0070] Step 403: Load the component's independent HTML, CSS, and JavaScript files into the iframe document. Ensure that the component and its independent files run in isolation from the first window.

[0071] Step 404: Restrict the permissions of the iframe based on the sandbox attribute to enhance security.

[0072] For example:<iframe sandbox="allow-scripts">< / iframe> .

[0073] Step 405: The iframe document and the main application's page exchange and interact with each other based on the postMessage API.

[0074] Methods based on WebComponent isolation include:

[0075] Step 411: Define a custom element based on JavaScript, which inherits from HTML elements.

[0076] Step 412: In the constructor of the custom element, create a node tree based on this.attachShadow({ mode: 'open'}) and encapsulate the node tree structure inside the component.

[0077] Step 413: Based on the template tag ( <template>Define the HTML template for the component and apply it in the node tree (Shadow DOM).

[0078] Step 414: Based on the style tag ( <style>）封装组件的CSS样式，确保样式隔离。

[0079] 步骤415：在组件内部定义和触发自定义事件，通过所述自定义事件与外部组件交互。

[0080] 在具体的实施例中，可利用Iframe提供组件的整体隔离；Iframe与主应用的主页面之间通过postMessage API进行信息传递和交互。组件内各模块使用WebComponent进行组件化；各个组件化的模块之间通过自定义事件和属性进行通信。

[0081] 基于作用域实现样式隔离的方法：

[0082] 步骤421：为组件的样式选择器添加命名空间前缀。

[0083] 例如，组件名为 MyComponent，可以为所有样式选择器添加 .my-component 前缀。这种方式确保样式只在特定的命名空间内生效。

[0084] 步骤422：基于命名空间的前缀和样式选择器的前缀进行样式隔离。

[0085] 步骤423：对节点树的结构和组件的样式进行封装，获得第二节点。

[0086] Shadow DOM 内部的样式不会影响外部文档，外部样式也不会影响到 Shadow DOM内部。

[0087] 步骤424：基于第二节点，对组件的样式进行隔离。

[0088] 通过样式作用域限制，限制在节点树之下，确保弹窗样式不污染主应用界面。

[0089] 步骤106中，对所述组件进行监听的方法包括：

[0090] 步骤601：在代理模式(proxy)下，注册监听器。

[0091] 步骤602：通过所述监听器，对组件的事件进行拦截和监听。

[0092] 可利用 JavaScript 的 Proxy 对象，拦截和代理事件监听的添加和移除操作。在第一窗口中，所有事件监听器都通过 Proxy 进行注册，在事件触发时拦截和处理这些事件。在 Proxy 中，可以实现独立的事件处理逻辑，使得弹窗的事件处理与主应用的事件处理分开。这样，即使主应用中的事件发生变化，也不会影响弹窗的正常功能。可使用event.stopPropagation() 方法阻止事件的冒泡。这样可以确保事件不会向上传递到主应用的 DOM 结构中，避免引发连锁反应。

[0093] JavaScript代码隔离：可以使用proxy技术隔离window和document对象，确保外部组件的JavaScript代码不会影响全局环境。

[0094] 步骤603：对异常进行处理，如图2，处理的方法包括：

[0095] 步骤611：基于监听器，监听错误事件和错误日志记录。

[0096] 可使用window.onerror和 window.addEventListener('unhandledrejection')来捕获同步和异步的错误，以及未处理的 Promise 拒绝。记录错误信息，包括错误消息、堆栈跟踪、发生时间等，以便后续分析和修复。

[0097] 步骤612：根据所述错误事件和错误日志记录，向用户展示友好的错误提示信息。友好的错误提示信息用于提示组件运行错误，应避免直接显示技术性错误细节。

[0098] 步骤613：判断所述组件是否有稳定状态。

[0099] 若是，执行步骤614：将组件回退到所述稳定状态或重置组件状态。

[0100] 可通过缓存机制，保存组件的稳定状态。在组件发生错误时，提供回退机制，比如重置组件状态或返回到上一个稳定状态。

[0101] 若否，执行步骤615：卸载所述组件，并清理已分配的资源。

[0102] 确保在错误处理过程中，清理已分配的资源，如事件监听器、定时器等，以防止内存泄漏。

[0103] 步骤616：组件卸载后，还可以对组件进行再加载，再加载的方法包括以下步骤：

[0104] 步骤621：重新设置组件的沙箱隔离环境，确保其回到初始状态。

[0105] 步骤621：清空沙箱隔离环境的全局状态和变量。

[0106] 步骤622：重新加载组件的依赖，确保隔离的环境恢复正常。

[0107] 步骤623：判断组件与外部组件是否有状态同步机制。

[0108] 若有，执行步骤624：所述组件恢复后，与所述外部组件同步状态信息，执行步骤103-107。确保在恢复后同步最新的状态信息。

[0109] 若否，执行步骤103-107。

[0110] 再加载后仍然出现异常，且出现异常的数次超出阈值时，可向用户发出告警信息，不再对该组件进行加载。

[0111] 本发明还提供一种用于实现上述方法的组件运行系统，如图3所示，包括隔离模块1、运行模块2和监听模块3；

[0112] 所述隔离模块1用于为组件设置沙箱隔离环境；加载所述组件，并为组件建立第二窗口；对所述组件进行样式隔离、作用域隔离、以及代码隔离；

[0113] 所述运行模块2用于在所述第二窗口中运行所述组件；

[0114] 所述监听模块3用于基于代理模式，对所述组件进行监听。

[0115] 本发明通过加载前隔离、运行时监听和拦截等隔离，以及组件卸载清理等不同除非的隔离，确保组件稳定性和安全性。通过加载前隔离，设置沙箱环境和样式隔离等，确保组件的独立性。运行时隔离中，䏍代理模式和监听器实时监控和维护隔离代码的运行状态，防止组件对全局环境的干扰。卸载后消除隔离设置，释放资源，确保主应用和系统的持续稳定。

[0116] 本发明可实现低成本引用外部组件：通过引入外部资源，实现低成本、高效的组件引用。使用iframe和webComponent技术，实现组件的作用域和样式隔离。通过proxy技术实现JavaScript代码的隔离，确保组件安全。使用Babel解析和React18渲染外部组件，确保代码执行效率和渲染效果。通过indexedDB和全局对象缓存，提高组件加载和运行速度。简化了自定义组件的引入和使用过程，降低用户的学习成本。提供统一的组件引用和缓存机制，提高组件的复用性。通过缓存机制和代码执行优化，提高组件加载和运行性能。可支持多种前端框架，满足不同用户的需求。例如，在某企业网站中引入嵌入式客服，可通过利用外部聊天组件，在企业网站中快速集成聊天功能，并保持聊天功能与企业网站相隔离，保障企业网站的稳定运行。

[0117] 以上仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。< / style> < / template>

Claims

1. A method for running components on a low-code platform, characterized in that, Includes the following steps: Set up a sandbox isolation environment for the components; Load the component and create a second window for it; The components are isolated in terms of style, scope, and code. Run the component in the second window; In proxy mode, register a listener; The listener is used to intercept and listen to the component's events; It also includes methods for exception handling: Based on listeners, monitor error events and error log recording; Based on the error events and error log records, display user-friendly error message information; Determine whether the component has a stable state; If so, revert the component to the stable state or reset the component state; If not, uninstall the component and clean up the allocated resources; Isolation of styles, scope, and code based on Iframe and WebComponent; Iframe-based isolation methods include: Insert an iframe tag into the page to create an iframe document; Load the component's content into the iframe document; Based on the iframe document, load the component's independent HTML, CSS, and JavaScript files; Restricting Iframe permissions based on the sandbox attribute; The iframe document and the main application's page exchange and interact with each other based on the postMessage API; Methods based on WebComponent isolation include: Custom elements are defined using JavaScript, and these custom elements inherit from HTML elements. In the constructor of the custom element, a node tree is created based on this.attachShadow({mode:'open'}), and the node tree structure inside the component is encapsulated. The HTML template for the component is defined based on the template tag and applied in the node tree; CSS styles for components are encapsulated using the `style` tag; Define and trigger custom events within the component, and interact with external components through these custom events; Each version of the component is tagged based on a hash value or a unique identifier; multiple versions of the component and their corresponding dependencies are stored locally based on a browser database; and dependencies loaded in the cache are matched and located based on a dependency query algorithm.

2. The component operation method according to claim 1, characterized in that, The methods for running the component include: The component is parsed and run using a Babel parser, and rendered using React 18. It also includes methods for uninstalling components: After uninstalling the component, the sandbox isolation environment and proxy mode are eliminated, and the corresponding resources are released.

3. The component operation method according to claim 1, characterized in that, Methods for creating a second window include: Create a second window and assign a sequence number to it based on the node tree.

4. The component operation method according to claim 1, characterized in that, It also includes methods for reloading components: Reset the sandbox isolation environment of the component; Clear the global state and variables of the sandbox isolation environment; Reload the component's dependencies; Determine if the component has a state synchronization mechanism with external components; If so, after the component recovers, it will synchronize its status information with the external component.

5. The component operation method according to claim 4, characterized in that, Iframes provide overall isolation; modules within components are componentized using WebComponents. The iframe and the main page of the main application exchange and interact with each other through the postMessage API; The modules within each component communicate with each other through custom events and properties.

6. The component operation method according to claim 4, characterized in that, It also includes methods for achieving style isolation based on scope: Add a namespace prefix to the style selector of the component; Style isolation is achieved based on namespace prefixes and style selector prefixes; The structure of the node tree and the style of the components are encapsulated to obtain the second node; Based on the second node, the styles of the components are isolated.

7. A component operating system, characterized in that, This includes an isolation module, a runtime module, and a monitoring module; The isolation module is used to set up a sandbox isolation environment for the component; load the component and create a second window for the component; and perform style isolation, scope isolation, and code isolation on the component. The running module is used to run the component in the second window; The listening module is used to listen to the component based on the proxy mode: in the proxy mode, a listener is registered; The listener is used to intercept and listen to component events; it also includes exception handling methods: based on the listener, it listens for error events and error log recording; Based on the error events and error log records, display user-friendly error messages; determine whether the component has a stable state; If yes, revert the component to the stable state or reset the component state; otherwise, uninstall the component and clean up the allocated resources. Isolation of styles, scope, and code based on Iframe and WebComponent; The iframe-based isolation method includes: inserting an iframe tag into the page to create an iframe document; loading the component's content into the iframe document; loading the component's independent HTML, CSS, and JavaScript files based on the iframe document; restricting the iframe's permissions based on the sandbox attribute; and exchanging information and interacting between the iframe document and the main application's page based on the postMessage API. The WebComponent-based isolation method includes: defining a custom element based on JavaScript, where the custom element inherits from an HTML element; creating a node tree based on `this.attachShadow({mode:'open'})` in the constructor of the custom element and encapsulating the node tree structure inside the component; defining the component's HTML template based on the `template` tag and applying it to the node tree; encapsulating the component's CSS styles based on the `style` tag; defining and triggering custom events inside the component, and interacting with external components through these custom events; marking each version of the component based on a hash value or unique identifier; storing multiple versions of the component and their corresponding dependencies locally based on a browser database; and matching and locating dependencies loaded in the cache based on a dependency query algorithm.

Images