Component operation method and system for low-code platform

Abstract

The invention discloses a component operation method and system of a low-code platform, and belongs to the technical field of electrical digital data processing.The method comprises the following steps that a sandbox isolation environment is set for a component; loading the component, and establishing a second window for the component; performing style isolation, action range isolation and code isolation on the component; running the component in the second window; and monitoring the component based on the proxy mode. Through a plurality of isolation modes such as a sandbox, an independent second window, style isolation, action range isolation, code isolation and monitoring in operation, the component is operated on a low-code platform, the reuse rate of the component is improved, an external component is isolated from a main application, the operation performance and stability of the main application are guaranteed, and the service life of the main application is prolonged. The error report or crash of the main application caused by the error of the component is avoided; and the component does not pollute the main application.

Description

Technical Field

[0001] The present invention relates to the field of electronic digital data processing technology, and in particular to a component operation method and system of a low-code platform. Background Art

[0002] Low-code platforms provide a way to quickly build applications without writing full code. However, the capabilities of the current platform's native components are limited and cannot fully meet user needs. Users need to extend functionality through custom code. However, the learning cost of custom components is high, and the learning curve of custom components is steep. Users need to spend a lot of time and energy to master them; the components lack a reuse mechanism, resulting in code duplication and difficulty in management. In addition, most custom component technologies are based on iframes, which have scenario limitations and performance bottlenecks, affecting user experience. Summary of the invention

[0003] In response to the above-mentioned technical problems existing in the prior art, the present invention provides a component operation method and system for a low-code platform, which references components on a safe basis and establishes a component reuse mechanism, which can avoid the impact of components on the main application to a large extent.

[0004] The present invention discloses a component operation method of a low-code platform, comprising the following steps: setting a sandbox isolation environment for the component; loading the component and establishing 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 mode.

[0005] Preferably, the method of running the component comprises: Parse and run external component code based on Babel parser, and render based on React18; It also includes component uninstallation methods: After uninstalling a component, the sandbox isolation environment and listening agent are eliminated, and the corresponding resources are released.

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

[0007] Preferably, the method for monitoring the component includes: In proxy mode, register the listener; Through the listener, the events of the component are intercepted and monitored; It also includes exception handling methods: Based on the listener, listen for error events and error log records; Based on the error events and error log records, a friendly error prompt message is displayed to the user; determining whether the component is in a stable state; If so, roll back the component to the stable state or reset the component state; If not, the component is uninstalled and the allocated resources are cleaned up.

[0008] Preferably, the component reloading method 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 an external component; if so, synchronizing state information with the external component after the component is restored.

[0009] Preferably, style, scope, and code isolation based on iframe and WebComponent; Iframe-based isolation methods include: Insert the iframe tag into the page and 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; Restrict iframe permissions based on sandbox attributes; The iframe document and the main application page transmit and interact with each other based on the postMessage API. WebComponent-based isolation methods include: Define custom elements based on JavaScript, where the 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; Define the component's HTML template based on the template tag and apply it in the node tree; Encapsulate the CSS style of the component based on the style tag; Define and trigger custom events within the component, and interact with external components through the custom events.

[0010] Preferably, Iframe is used to provide overall isolation; each module in the component is componentized using WebComponent; The Iframe and the main application's main page communicate and exchange information through the postMessage API. Each componentized module communicates with each other through custom events and properties.

[0011] Preferably, the method for implementing 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 prefix of the style selector; 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.

[0012] 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; locally storing multiple versions of the component and their corresponding dependencies based on a browser database; and matching and locating dependencies loaded in the cache based on a dependency query algorithm.

[0013] The present invention also provides a system for implementing the above method, including an isolation module, a running module and a monitoring module; the isolation module is used to set a sandbox isolation environment for the component; load the component and establish 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 monitoring module is used to monitor the component based on the proxy mode.

[0014] Compared with the prior art, the beneficial effects of the present invention are: through multiple isolation methods such as sandbox, independent second window, style isolation, scope isolation, code isolation, and running monitoring, the components are run on a low-code platform, the reuse rate of the components is improved, the external components are isolated from the main application, the running performance and stability of the main application are guaranteed, and the main application is avoided from reporting errors or crashes due to component errors; it is ensured that the components do not pollute the main application. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] Figure 1 It is a flow chart of the component operation method of the low-code platform of the present invention; Figure 2 It is a flow chart of the method of exception handling; Figure 3 It is a system logic block diagram of the present invention. DETAILED DESCRIPTION

[0016] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0017] The present invention is further described in detail below in conjunction with the accompanying drawings: A method for running components of a low-code platform, such as Figure 1 As shown, the following steps are included: Step 101: Obtain the component to be run.

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

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

[0020] When the component is loaded, the component can also be parsed to extract the component code and corresponding dependencies, and the data parsing results can be converted and packaged.

[0021] Step 104: Perform style isolation, scope isolation, and code isolation on the components.

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

[0023] Step 106: Based on the proxy mode, monitor and intercept the component.

[0024] Step 107: When the component cannot be run or the component is finished running, uninstall the component.

[0025] Through various isolation methods such as sandbox, independent second window, style isolation, scope isolation, code isolation, and running monitoring, components are run on a low-code platform to improve the reuse rate of components, isolate external components from the main application, and ensure the running performance and stability of the main application, avoiding errors or crashes of the main application due to component errors; ensuring that components do not pollute the main application.

[0026] In step 105, the method for running the component includes: parsing and running the code of the component based on the Babel parser, and rendering the running of the component based on React18.

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

[0028] In step 103, the method for establishing the second window includes: A second window is established, and a sequence number is assigned to the second window based on the node tree (shadow-DOM, DOM).

[0029] The second window is mounted in the node tree to avoid direct interaction with the first window of the main application. Each second window is assigned a unique serial number dom ID. When multiple windows pop up, they are executed under the dom id to avoid mutual influence. The second window can be managed based on the Popupmanager tool. The present invention can automatically generate a unique dom ID. When multiple windows pop up, they are executed under the dom id to avoid mutual influence.

[0030] When loading the component, a method for creating a cache for the component may also be used: Step 311: Mark each version of the component based on a hash value or a unique identifier.

[0031] Through precise version control, ensure that the required version can be loaded correctly when updating or rolling back. Use hash or unique identifier technology to ensure that each request can accurately hit the corresponding version in the cache.

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

[0033] Step 313: Based on the dependency query algorithm, the dependencies loaded in the cache are matched and located. The algorithm is used to quickly match and locate cached component dependencies to reduce repeated loading.

[0034] Improve component loading and operation efficiency through effective use of local cache, reduce network latency, and improve user experience and application response speed.

[0035] In step 104, style, scope, and code are isolated based on iframe and WebComponent.

[0036] Among them, the Iframe-based isolation methods include: Step 401: Insert an iframe tag into the page ( <iframe> ), create an iframe document.

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

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

[0039] Step 404: Limit the permissions of the iframe based on the sandbox attribute to enhance security. For example :<iframe sandbox="allow-scripts">< / iframe> .

[0041] Step 405: The iframe document and the main application page perform information transmission and interaction based on the postMessage API.

[0042] WebComponent-based isolation methods include: Step 411: Define a custom element based on JavaScript, where the custom element inherits from the HTML element.

[0043] Step 412: 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.

[0044] Step 413: Based on the template tag ( <template>) defines the HTML template of the component and applies it in the node tree (Shadow DOM).

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

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

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

[0048] 基于作用域实现样式隔离的方法：步骤421：为组件的样式选择器添加命名空间前缀。

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

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

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

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

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

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

[0055] 步骤106中，对所述组件进行监听的方法包括：步骤601：在代理模式(proxy)下，注册监听器。

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

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

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

[0059] 步骤603：对异常进行处理，如图2，处理的方法包括：步骤611：基于监听器，监听错误事件和错误日志记录。

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

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

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

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

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

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

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

[0067] 步骤616：组件卸载后，还可以对组件进行再加载，再加载的方法包括以下步骤：步骤621：重新设置组件的沙箱隔离环境，确保其回到初始状态。

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

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

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

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

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

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

[0074] 本发明还提供一种用于实现上述方法的组件运行系统，如图3所示，包括隔离模块1、运行模块2和监听模块3；所述隔离模块1用于为组件设置沙箱隔离环境；加载所述组件，并为组件建立第二窗口；对所述组件进行样式隔离、作用域隔离、以及代码隔离；所述运行模块2用于在所述第二窗口中运行所述组件；所述监听模块3用于基于代理模式，对所述组件进行监听。

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

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

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

Claims

1. A component operation method of a low-code platform, characterized in that: The following steps are involved: Set up a sandbox isolation environment for components; Loading the component and establishing a second window for the component; Performing style isolation, scope isolation, and code isolation on the components; running the component in the second window; Based on the proxy mode, the components are monitored.

2. The component operation method according to claim 1, characterized in that: The method of running the component includes: Parse and run the components based on the Babel parser and render them based on React18; It also includes component uninstallation methods: 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 establishing a second window include: A second window is established, and a sequence number is assigned to the second window based on the node tree.

4. The component operation method according to claim 1, characterized in that: The method for monitoring the component includes: In proxy mode, register the listener; Through the listener, the events of the component are intercepted and monitored; It also includes exception handling methods: Based on the listener, listen for error events and error log records; Based on the error events and error log records, a friendly error prompt message is displayed to the user; determining whether the component is in a stable state; If so, roll back the component to the stable state or reset the component state; If not, the component is uninstalled and the allocated resources are cleaned up.

5. The component operation method according to claim 4, characterized in that: It also includes component reloading methods: Reset the sandbox isolation environment of the component; Clear the global state and variables of the sandbox isolation environment; Reload component dependencies; Determine whether there is a state synchronization mechanism between the component and the external component; If yes, after the component is restored, the status information is synchronized with the external component.

6. The component operation method according to claim 1, characterized in that: Isolation of styles, scopes, and codes based on Iframe and WebComponent; Iframe-based isolation methods include: Insert the Iframe tag into the page and 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; Restrict Iframe permissions based on sandbox attributes; The Iframe document and the main application page transmit and interact with each other based on the postMessage API. WebComponent-based isolation methods include: Define custom elements based on JavaScript, where the 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; Define the component's HTML template based on the template tag and apply it in the node tree; Encapsulate the CSS style of the component based on the style tag; Define and trigger custom events within the component, and interact with external components through the custom events.

7. The component operation method according to claim 6, characterized in that: Use Iframe to provide overall isolation; use WebComponent to componentize the modules within the component; The Iframe and the main application's main page communicate and exchange information through the postMessage API. Modules within each componentized component communicate with each other through custom events and properties.

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

9. The component operation method according to claim 6, characterized in that: Also included is a method for creating a cache for the component: tagging each version of the component based on a hash value or a unique identifier; Based on the browser database, multiple versions of the component and their corresponding dependencies are stored locally; Based on the dependency query algorithm, match and locate the dependencies loaded in the cache.

10. A component operation system, characterized in that: Includes isolation module, operation module and monitoring module; The isolation module is used to set a sandbox isolation environment for the component; load the component and establish 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 monitoring module is used to monitor the component based on the proxy mode.

Images