Cross-framework business component implementation method and device, program product and electronic equipment

Abstract

The invention belongs to the technical field of front-end development, and provides a cross-framework business component implementation method and device, a program product and electronic equipment. The implementation method comprises the following steps: packaging more than one Mitril service component provided for the outside into a preset front-end component basic class, and generating a Mitril virtual DOM (Document Object Model) based on the more than one packaged Mitril service component, the preset front-end component basic class inheriting a CompentController class; the Mitril virtual DOM is converted into a Vue recognizable template, and the Mitril virtual DOM is converted into the Vue recognizable And the third party calls more than one Mitril service component provided for the outside through the Vue recognizable template. According to the method and the device, the adaptation from the Mitril framework to the third-party framework during operation is realized through the virtual DOM conversion technology, the third-party framework coexistence is supported while the development normal form of the Mitril framework is reserved, the reusability of the Mitril service component is improved, and the Mitril service component is supported to be called in a vue framework in a cross-framework manner.

Description

Technical Field

[0001] The present invention relates to the field of front-end development technology, and in particular to a method, device, program product and electronic device for implementing a cross-framework business component. Background Art

[0002] Mithril is a lightweight front-end development framework favored by some developers for its concise API, efficient performance, and extremely small size. In the past, many front-end projects were developed using the Mithril technology stack, and over time, a large number of mature business components have been developed. With technological advancements and evolving business needs, iterative development requires the use of third-party frameworks (such as the Vue framework). To prevent the secondary development of business components in Mithril framework projects, some Mithril business components need to be directly used (reused) in third-party frameworks, which requires front-end integration.

[0003] Related technologies use micro-frontend embedding for front-end integration, encapsulating individual business components in different front-end projects. By embedding micro-frontends, pages can be used across projects, enabling independent development of a single front-end project. However, micro-frontend embedding has the following drawbacks:

[0004] First, there is the difficulty of sharing a memory instance, especially in scenarios involving map applications that require global instances. The memory isolation mechanism between different frameworks makes it impossible to effectively share global instances, thus affecting the normal function of components.

[0005] Secondly, the micro-frontend embedding method also faces browser compatibility issues. In order to ensure the normal display and use of business components in different browsers, additional modifications to the browser system are required, which undoubtedly increases the complexity and cost of development.

[0006] Finally, Mithril's virtual DOM structure differs fundamentally from Vue's template syntax. Mithril uses JavaScript functional programming to generate its virtual DOM, while Vue uses HTML-based template syntax. This difference prevents Mithril components from being directly used within the Vue framework, often requiring developers to completely rewrite or redevelop their components, significantly reducing development efficiency and increasing code maintenance costs.

[0007] Therefore, how to achieve seamless migration and reuse of Mithril business components to the Vue framework has become a technical problem that needs to be solved urgently in front-end development. Summary of the Invention

[0008] The present application aims to at least solve the technical problems existing in the prior art and provide a method, device, program product and electronic device for implementing a cross-framework business component.

[0009] In the first aspect, the present application provides a method for implementing a cross-framework business component, including: encapsulating one or more Mithril business components provided to the outside into a preset front-end component base class, generating a Mithril virtual DOM based on the encapsulated one or more Mithril business components, wherein the preset front-end component base class inherits the ComponentController class; converting the Mithril virtual DOM into a Vue-recognizable template; and a third party calling the one or more Mithril business components provided to the outside through the Vue-recognizable template.

[0010] Further preferably, the vnodeToHTML tool is used to convert the Mithri l virtual DOM into a template recognizable by Vue.

[0011] Further preferably, the converting of the Mithril virtual DOM into a Vue recognizable template includes: parsing all DOM nodes in the tree structure of the Mithril virtual DOM to obtain node types of all DOM nodes, where the node types include element nodes, text nodes, and business component nodes; statically converting the DOM nodes of the Mithril virtual DOM according to the node types to obtain a static conversion structure; and performing dynamic behavior marking in the static conversion structure to obtain a Vue recognizable template.

[0012] Further preferably, parsing all DOM nodes in the tree structure of the Mithril virtual DOM includes: traversing and parsing the DOM nodes in the tree structure of the Mithril virtual DOM from top to bottom using a depth-first recursive strategy.

[0013] Further preferably, the DOM nodes of the Mithril virtual DOM are statically converted according to the node type to obtain a static conversion structure, including: for element nodes, directly mapping the tag name of the element node to an HTML tag, converting the static attributes in the element node attributes to an HTML attribute string, and recursively executing the direct mapping of the tag name of the child node to an HTML tag and the conversion of the static attributes of the child node to an HTML attribute string for the child nodes of the element node; for text nodes, inserting the text content of the text node into the parent element node of the text node; for business component nodes, creating a business component instance and calling the business component VIEW method, and recursively converting to an HTML structure based on the returned virtual DOM.

[0014] Further preferably, the dynamic behavior marking in the static conversion structure is performed to obtain a Vue-recognizable template, including: for the event binding attributes in all element nodes, generating a unique identifier for the event handler corresponding to the event binding attribute, associating the event handler with the identifier and storing it in a global registry, replacing the event binding attribute with the corresponding dynamic marking attribute, and the dynamic marking attribute corresponding to the event binding attribute includes the identifier of the event handler corresponding to the event binding attribute.

[0015] Further preferably, the method further includes: when the Vue business component is mounted, scanning the dynamic tag attributes in the Vue-recognizable template, and obtaining the event handler corresponding to each dynamic tag attribute from the global registry, and binding an event listener to the event handler; when the event listener listens to the state change event of the Mithril business component, triggering a forced update or differential update of the Vue business component.

[0016] In the second aspect, the present application also provides a cross-framework business component implementation device, which is used to implement a cross-framework business component implementation method provided in the first aspect of the present application, including: a class encapsulation and virtual DOM generation module, which encapsulates one or more Mithril business components provided to the outside into a preset front-end component base class, and generates a Mithril virtual DOM based on the encapsulated one or more Mithril business components, wherein the preset front-end component base class inherits the ComponentController class; a conversion module, which converts the Mithril virtual DOM into a Vue-recognizable template; and a calling module, in which a third party calls one or more Mithril business components provided to the outside through the Vue-recognizable template.

[0017] In a third aspect, the present application also provides a computer program product, including a computer program, characterized in that when the computer program is executed by a processor, it implements the steps of a method for implementing a cross-framework business component provided in the first aspect of the present application.

[0018] In a fourth aspect, the present application also provides an electronic device, comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute a method for implementing a cross-framework business component provided in the first aspect of the present application.

[0019] The beneficial technical effects of the present application are: encapsulating one or more Mithril business components that can be provided to the outside world in a front-end project under the Mithril framework into a preset front-end component base class that inherits the ComponentController class, realizing the vue conversion of the Mithril business component, and converting the Mithril business component into a Vue-compatible format; then converting the Mithril virtual DOM into a Vue-recognizable template, establishing an association between the Mithril virtual DOM and the Vue-recognizable template, realizing Mithril business component state change monitoring and synchronous update, and a third party calls one or more Mithril business components provided to the outside world through the Vue-recognizable template under the Vue framework. This application realizes the runtime adaptation of the Mithril framework to a third-party framework (especially the Vue framework) through virtual DOM conversion technology, retains the development paradigm of the Mithril framework while supporting the coexistence of third-party frameworks, improves the reusability of Mithril business components, and supports cross-frame calls to Mithril business components in the Vue framework, avoiding secondary development of business components; a two-way update synchronization mechanism implemented through static conversion structures, dynamic behavior tags, and event monitoring ensures that business components maintain their original functions and performance when used across frameworks; and solves the memory sharing and browser compatibility issues that exist in micro-frontend embedding solutions. Compared with the existing technology, this application does not require additional system modifications, overcomes the essential differences between the Mithril and Vue frameworks, realizes cross-framework reuse of components, and greatly improves development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] Figure 1 It is a flowchart of a method for implementing a cross-framework business component in a preferred embodiment of the present invention;

[0021] Figure 2 It is a process diagram of a method for implementing a cross-framework business component in an example of the present invention;

[0022] Figure 3 This is a schematic diagram of a node type identification process in an example of the present invention;

[0023] Figure 4 This is a schematic diagram of the structure of a device for implementing a cross-framework business component in a preferred embodiment of the present invention;

[0024] Figure 5 It is a structural diagram of an electronic device in a preferred embodiment of the present invention. DETAILED DESCRIPTION

[0025] The following describes embodiments of the present invention in detail. Examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are intended only to explain the present invention and are not to be construed as limiting the present invention.

[0026] In the description of the present invention, it should be understood that the terms "longitudinal", "transverse", "up", "down", "front", "back", "left", "right", "vertical", "horizontal", "top", "bottom", "inside", "outside", etc., indicating the orientation or position relationship, are based on the orientation or position relationship shown in the accompanying drawings, and are only for the convenience of describing the present invention and simplifying the description, rather than indicating or implying that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore cannot be understood as limiting the present invention.

[0027] In the description of the present invention, unless otherwise specified and limited, it should be noted that the terms "installed", "connected" and "connected" should be understood in a broad sense. For example, it can be a mechanical connection or an electrical connection, or it can be the internal communication between two components. It can be a direct connection or an indirect connection through an intermediate medium. For ordinary technicians in this field, the specific meanings of the above terms can be understood according to the specific circumstances.

[0028] The present invention provides a method for implementing a cross-framework business component, and the execution subject of the method includes but is not limited to at least one of the electronic devices such as a server, a terminal, etc. that can be configured to execute the method provided in the embodiment of the present application. In other words, the implementation method of the cross-framework business component can be executed by software or hardware installed on a terminal device or a server device. The server includes but is not limited to: a single server, a server cluster, a cloud server or a cloud server cluster, etc. The server can be an independent server, or it can be a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content distribution networks (CDNs), and big data and artificial intelligence platforms.

[0029] In a preferred embodiment, Figure 1 A flowchart showing the implementation of cross-framework business components. Figure 2 This diagram shows the implementation process of a cross-framework business component in an example. The implementation method of a cross-framework business component includes:

[0030] Step S1: Encapsulate one or more Mithril business components provided to the outside into a preset front-end component base class, and generate a Mithril virtual DOM based on the encapsulated one or more Mithril business components, wherein the preset front-end component base class inherits the ComponentController class;

[0031] Step S2, convert the Mithril virtual DOM into a Vue recognizable template;

[0032] In step S3, the third party calls one or more Mithril business components provided to the outside through the Vue-recognizable template.

[0033] In the current front-end development environment, different front-end frameworks each have their own advantages and applicable scenarios. The Mithril framework is known for its lightweight and high performance, while the Vue framework is popular for its ease of use and rich ecosystem. However, when a project requires the use of components from both frameworks, direct integration often faces compatibility issues due to the differences between the frameworks. The cross-framework business component implementation method provided in this embodiment solves the technical problem that Mithril business components cannot be directly used in the Vue framework.

[0034] In this implementation, the Mithril business components provided to the public are encapsulated into a pre-defined front-end component base class. This can include one or more Mithril business components, such as a query component or a navigation component. The pre-defined front-end component base class has a specific class structure that inherits from the ComponentController class. The ComponentController class is a controller class that provides basic functionality such as component lifecycle management, state management, and event handling.

[0035] During the encapsulation process, the properties, methods, and events of Mithril business components need to be mapped to the pre-set front-end component base class. For example, for a Mithril form component, its form validation methods and submit events can be encapsulated into the pre-set front-end component base class. Once encapsulated, the Mithril virtual DOM is generated based on these encapsulated Mithril business components.

[0036] Mithril virtual DOM is a lightweight JavaScript object used by the Mithril framework to describe UI structure. It adopts a tree structure and includes multiple DOM nodes of different types.

[0037] After generating the Mithril virtual DOM, it needs to be converted into a template that Vue can recognize. The Vue framework uses HTML-based template syntax, which is different from Mithril's virtual DOM structure. The conversion process requires mapping the structure, properties, and events of the Mithril virtual DOM to Vue's template syntax.

[0038] After the conversion is complete, third-party applications can call the Mithril business components provided to the public through Vue-recognizable templates. This means that business components that were previously only available in the Mithril framework can now be seamlessly integrated and used in the Vue framework. Third-party applications can use these converted Mithril business components just like ordinary Vue components, including passing properties and listening for events.

[0039] In a preferred embodiment, in step S2, the Mithril virtual DOM is converted into a template recognizable by Vue using the vnodeToHTML tool. vnodeToHTML is a tool specifically used to convert a virtual DOM into an HTML string. It can efficiently parse the structure of the virtual DOM and generate the corresponding HTML markup language.

[0040] In a preferred embodiment, in step S2, converting the Mithril virtual DOM into a Vue recognizable template includes:

[0041] Step S21: Parse all DOM nodes in the Mithril virtual DOM tree structure to obtain node types of all DOM nodes, including element nodes, text nodes, and business component nodes.

[0042] Step S22, statically converting the DOM nodes of the Mithril virtual DOM according to the node type to obtain a static conversion structure;

[0043] Step S23: Perform dynamic behavior marking in the static conversion structure to obtain a Vue-recognizable template.

[0044] In this embodiment, the tree structure of Mithril virtual DOM includes three types of nodes: element nodes, text nodes and business component nodes. When traversing to any DOM node, it is necessary to identify its node type. Figure 3 The node type identification process in an example is shown.

[0045] In this embodiment, the element node is the node corresponding to the HTML tag, which is the main building block of the DOM tree. It has a tag name tag (such as div, p). The element node can also contain the attribute attrs, and can also nest child nodes children (such as child element nodes, text nodes). The attributes of the element node are divided into static attributes and event binding attributes (i.e. dynamic attributes). Static attributes include standard HTML attributes (id, class, style, etc.), framework reserved attributes (key, oninit, etc.) and custom data attributes (data-*, aria-*, etc.). Event binding attributes are special attributes used to respond to specific user interactions (such as clicks, inputs, etc.). They are attributes on HTML elements prefixed with on, which are used to specify JavaScript code to be executed when a specific event is triggered. For example, onclick represents a mouse click, onmouseover represents a mouse hover, onkeydown represents a keyboard key press, onsubmit represents a form submission, and onchange represents a change in input value (such as selecting a drop-down box). The following is an example of an element node:

[0046]

[0047] In this implementation, a text node is the plain text content within an element node. It is a pure string or number, has no tags, cannot contain child nodes, and is a leaf node located at the end of the DOM tree. The following are two examples of a text node:

[0048] Example 1

[0049] / / Directly embedded text content

[0050] "Hello World"

[0051] Example 2

[0052]

[0053]

[0054] In this implementation, a business component node includes a tag name (tag), which points to an object / constructor that contains lifecycle methods and a view rendering function (view). Check if the tag type is function or object. Below are two examples of business component nodes.

[0055] Example 1

[0056]

[0057] Example 2

[0058]

[0059] In this embodiment, preferably, in step S21, parsing all DOM nodes in the Mithril virtual DOM tree structure includes: traversing and parsing the DOM nodes in the Mithril virtual DOM tree structure from top to bottom using a depth-first recursive strategy. Specifically, the Mithril virtual DOM tree is input, and each DOM node is recursively traversed from top to bottom using a depth-first recursive strategy. The child nodes of each DOM node are recursively parsed until a leaf node (the deepest node with no child nodes) is reached. After completing the child node parsing, the parent node is returned, and sibling nodes are processed to ensure that each DOM node in the virtual DOM tree is completely traversed and parsed.

[0060] In this embodiment, preferably, during the parsing process, not only the node type of each DOM node is identified, but also its attributes and content. For example, for element nodes, its tag name, attributes, event binding attributes, and child nodes need to be extracted; for text nodes, its text content needs to be extracted; and for business component nodes, its component type, attributes, and child components need to be extracted.

[0061] In a preferred embodiment, in step S22, static conversion is performed on the DOM nodes of the Mithril virtual DOM according to the node type to obtain a static conversion structure, including:

[0062] Step S221: For element nodes, directly map the tag name of the element node to an HTML tag, convert the static attributes in the element node attributes to HTML attribute strings, and recursively map the tag name of the child node to an HTML tag and convert the static attributes of the child node to HTML attribute strings for the child nodes of the element node, thus generating a nested HTML structure. Static attributes of element nodes refer to attributes that do not depend on component state or props, such as standard HTML attributes: id, class, style, etc.; framework reserved attributes: key, oninit, etc.; custom data attributes: data-*, aria-*, etc. The following is an example of an element node and the static conversion structure (i.e., HTML template) obtained after its static conversion:

[0063]

[0064]

[0065] Step S222: For text nodes, the text content of the text node is inserted into the parent element node of the text node without attribute processing. For example, for a node containing the text "Hello, World!", after static conversion, "Hello, World!" is directly inserted into the HTML of its parent element. It should be noted that the text content may contain HTML special characters such as <, >, &, etc. These characters need to be HTML entity encoded. The following is an example of a text node (i.e., input) and the static conversion structure (i.e., output) obtained after its static conversion:

[0066] Text nodes:

[0067] / / enter

[0068] "name:xx <script>alert(1)< / script> "

[0069] / / output

[0070] name:xx<script> alert(1)< / script>;

[0071] Step S223, for the business component node, create a business component instance and call the business component VIEW method, and recursively convert it to HTML structure based on the returned virtual DOM. The conversion rule of the component node is not to generate HTML directly, but to create a component instance and call its view method. Recursively convert the returned virtual DOM into HTML. Specifically, first create a business component instance, which usually involves instantiating the component class and passing in the necessary properties and states. Then, call the VIEW method of the business component to obtain the virtual DOM rendered by the component. Recursively convert it to HTML structure based on the returned virtual DOM. This means that the static conversion process is performed again on the virtual DOM rendered by the component until all nodes are converted to HTML.

[0072] The static structure conversion method of this embodiment defines the mapping rules for Mithril virtual DOM nodes to Vue template elements. It can convert the static part of Mithril virtual DOM into HTML structure, providing a foundation for subsequent dynamic behavior markup. This mapping rule can preserve the structure and style of Mithril components while preparing for Vue framework integration.

[0073] In a preferred embodiment, in step S23, dynamic behavior marking is performed in the static conversion structure to obtain a Vue-recognizable template, including:

[0074] For all event binding attributes (such as onclick and oninput) in element nodes, a unique identifier is generated for the event handler corresponding to the event binding attribute. The event handler and identifier are associated and stored in a global registry. The event binding attribute is then replaced with the corresponding dynamic tag attribute. The dynamic tag attribute corresponding to the event binding attribute includes the identifier of the event handler corresponding to the event binding attribute. This process is called dynamic behavior tagging. For example, replacing the event binding attribute data-onclick with the corresponding dynamic tag attribute "handler_123" is represented as: data-onclick="handler_123".

[0075] In this implementation, dynamic behavior markup is the process of converting the dynamic parts of the Mithril virtual DOM (such as event binding, conditional rendering, list rendering, etc.) into instructions and attributes that Vue can recognize. The focus is on the processing of event binding attributes.

[0076] Specifically, the detailed process of step S23 is as follows:

[0077] First, traverse all element nodes and identify event binding attributes in their properties. Event binding attributes usually start with "on", such as onclick, onchange, onsubmit, etc.

[0078] For each identified event binding attribute, generate a unique identifier for its corresponding event handler. The identifier can be a UUID or other string that uniquely identifies the event handler. For example, for a click event handler, the identifier "click_handler_123456" can be generated.

[0079] Then, the event handlers and their identifiers are stored in a global registry. The global registry can be a JavaScript object or a Map that stores the mapping between all event handlers and their identifiers.

[0080] Finally, replace the event binding attribute with a dynamic tag attribute. A dynamic tag attribute is a special attribute that contains the identifier of the event handler and is used to bind events in Vue components.

[0081] In this way, Mithril's event binding mechanism can be converted to Vue's event binding mechanism, allowing the interactive behaviors of Mithril business components to function properly within the Vue framework. This dynamic behavior tagging approach not only preserves the functionality of Mithril components but also enables seamless integration with Vue's event system. Dynamic behavior tokenization converts dynamic elements such as event handlers into serializable identifiers.

[0082] In this embodiment, the Vue recognizable template obtained in step S23 combines the static structure and dynamic tags. The Vue recognizable template is an HTML string that conforms to the Vue template syntax. The following is an example of the process of obtaining a Vue recognizable template:

[0083] (1) A Mithril virtual DOM:

[0084] (2) The conversion process includes:

[0085] Static structure conversion:

[0086] Element node: div→ ,button→ <button>

[0087] Attribute processing:

[0088] Static attributes (id, class, data-*) are retained directly

[0089] Dynamic attributes (onclick, onmouseenter) are replaced with tag attributes

[0090] Text nodes: direct insertion, automatic escape of special characters

[0091] Dynamic Behavior Tokenization

[0092] Event Handler Transformation:

[0093] onclick→data-event-click="evt_cl ick"

[0094] onmouseenter→data-event-mouseenter="evt_hover"

[0095] Store events in the global registry:

[0096] EventRegistry.set('evt_click,()=>console.log('Clicked')); EventRegistry.set('evt_hover,()=>console.log('Hovered'));

[0097] (3) Vue-recognizable template generated after conversion:

[0098]

[0099]

[0100] In a preferred embodiment, the implementation method of the cross-framework business component of the present application further provides a two-way update synchronization mechanism, namely, a runtime behavior injection step, including:

[0101] Event proxy initialization: When the Vue business component is mounted, scan the dynamic tag attributes (such as data-onclick) in the Vue-recognizable template, obtain the event handler corresponding to each dynamic tag attribute from the global registry, bind the event listener to the event handler, and dynamically bind the event listener through the DOM API.

[0102] State synchronization mechanism: When the event listener listens to the state change event of the Mithril business component (such as redraw), it triggers the forced update or differential update of the Vue business component.

[0103] The specific implementation steps of the state synchronization mechanism include:

[0104] 1. Mithril side change monitoring

[0105] (1) Rewrite Mithril's redraw method. When redraw is called, a state change event is triggered.

[0106] (2) Component status update monitoring, which packages the component status update method and compares the current and previous data. If there is a change, a status update event is triggered.

[0107] 2. Vue side update trigger system

[0108] (1) Establish component association and associate the original Mithril component with the generated Vue component.

[0109] (2) Establish a dual-mode update decision tree in Vue. Receive state change events, determine whether to update the root node or child nodes, and call different update strategies, differential update or forced update.

[0110] In this embodiment, a dual-channel communication protocol is defined:

[0111] Props / Events: Vue's standard parent-child communication interface (external);

[0112] Mithril Stream: Internally uses Mithril's streaming state management (internal).

[0113] In this embodiment, when the Vue business component is mounted, the event handler generated in the dynamic behavior tagging phase needs to be connected to the Vue component's event system. This process includes scanning the dynamic tag attributes in the Vue-recognizable template and binding the corresponding event handler for each dynamic tag attribute.

[0114] The specific steps are as follows:

[0115] First, in the mounted lifecycle hook of the Vue component, all elements in the component template are scanned to identify dynamic tag attributes. Dynamic tag attributes are generated in the previous dynamic behavior tag phase and are used to identify event bindings.

[0116] For each identified dynamic tag attribute, its corresponding event handler is obtained from the global registry. The global registry stores the mapping relationship between all event handlers and their identifiers, and the corresponding event handler can be found by the identifier.

[0117] Then, bind an event listener to the event handler. An event listener is a function that is called when a specific event occurs and performs the corresponding operation. In this embodiment, the event listener is mainly used to monitor the state change events of the Mithril business component.

[0118] When the event listener listens to the state change event of the Mithril business component, it needs to trigger the update of the Vue business component. The state change event may be caused by user interaction (such as clicking a button, entering text, etc.) or other factors (such as network request completion, timer triggering, etc.).

[0119] Updating Vue components can be achieved in two ways: forced update or differential update.

[0120] Forced updates refer to re-rendering the entire component, which is usually achieved by calling the $forceUpdate method of the Vue instance. Forced updates are simple and straightforward, but may cause performance issues, especially for large components.

[0121] Differential updates only update the parts that have changed, which is usually achieved through Vue's responsiveness system. Differential updates have better performance, but you need to ensure that state changes can be detected by Vue's responsiveness system.

[0122] In this embodiment, a suitable update method can be selected according to specific circumstances. For example, for simple state changes, a forced update can be used; for complex state changes, a differential update can be used.

[0123] Through the above mechanism, event processing and state synchronization between Mithril business components and Vue components can be achieved, so that Mithril business components can work normally in the Vue framework and seamlessly integrate with Vue's component system.

[0124] The present invention also discloses a cross-framework business component implementation device for implementing the above-mentioned cross-framework business component implementation method, see Figure 4 In a preferred embodiment, the device comprises:

[0125] The class encapsulation and virtual DOM generation module encapsulates one or more Mithril business components provided to the outside into a preset front-end component base class, and generates a Mithril virtual DOM based on the encapsulated one or more Mithril business components. The preset front-end component base class inherits the ComponentController class.

[0126] The conversion module converts Mithril virtual DOM into Vue recognizable templates;

[0127] Calling module: A third party can call one or more Mithril business components provided to the outside world through a Vue-recognizable template.

[0128] In this embodiment, the class encapsulation and virtual DOM generation module, the conversion module and the calling module respectively correspond to step S1, step S2 and step 3 of the implementation method of the cross-framework business component, and are not described in detail here.

[0129] The present invention also discloses a computer program product, including a computer program, which, when executed by a processor, implements the steps of the implementation method of the above-mentioned cross-framework business component provided by the present invention. The computer program product should be understood as a software product that mainly implements its solution through a computer program, such as a program product integrated in the cloud or a software library.

[0130] The present invention also discloses an electronic device. In one embodiment, the electronic device includes at least one processor; and a memory connected to the at least one processor; wherein,

[0131] The memory stores a computer program that can be executed by the at least one processor. The computer program is executed by the at least one processor so that the at least one processor can execute the implementation method of the cross-framework business component provided by the present invention.

[0132] like Figure 5 FIG2 is a schematic diagram of the structure of an electronic device that implements a method for implementing a cross-framework service component according to an embodiment of the present invention. The electronic device may include a processor 10, a memory 11, a communication bus 12, and a communication interface 13. It may also include a computer program stored in the memory 11 and executable on the processor 10, such as a program for implementing a method for implementing a cross-framework service component.

[0133] Among them, in some embodiments, the processor 10 can be composed of an integrated circuit, for example, it can be composed of a single packaged integrated circuit, or it can be composed of multiple integrated circuits packaged with the same or different functions, including one or more central processing units (CPUs), microprocessors, digital processing chips, graphics processors, and a combination of various control chips. The processor 10 is the control core (Control Unit) of the electronic device, and uses various interfaces and lines to connect the various components of the entire electronic device. It executes or executes the programs or modules stored in the memory 11 (for example, the implementation method of the cross-framework business component, etc.), and calls the data stored in the memory 11 to perform various functions of the electronic device and process data.

[0134] The memory 11 includes at least one type of readable storage medium, and the readable storage medium includes a flash memory, a mobile hard disk, a multimedia card, a card-type memory (for example, an SD or DX memory, etc.), a magnetic memory, a disk, an optical disk, etc. In some embodiments, the memory 11 may be an internal storage unit of an electronic device, such as a mobile hard disk of the electronic device. In other embodiments, the memory 11 may also be an external storage device of an electronic device, such as a plug-in mobile hard disk, a smart memory card (SmartMediaCard, SMC), a secure digital (SecureDigital, SD) card, a flash card (FlashCard), etc. equipped on the electronic device. Furthermore, the memory 11 may also include both an internal storage unit and an external storage device of the electronic device. The memory 11 can be used not only to store application software and various types of data installed in the electronic device, such as the code of the implementation method program of the cross-framework business component, but also to temporarily store data that has been output or is to be output.

[0135] The communication bus 12 may be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus. The bus may be divided into an address bus, a data bus, a control bus, etc. The bus is configured to enable communication between the memory 11 and at least one processor 10, etc.

[0136] The communication interface 13 is used for communication between the above-mentioned electronic device and other devices, including a network interface and a user interface. Optionally, the network interface may include a wired interface and / or a wireless interface (such as a WI-FI interface, a Bluetooth interface, etc.), which is generally used to establish a communication connection between the electronic device and other electronic devices. The user interface may be a display (Display), an input unit (such as a keyboard (Keyboard)), optionally, the user interface may also be a standard wired interface, a wireless interface. Optionally, in some embodiments, the display may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, and an OLED (Organic Light-Emitting Diode, organic light-emitting diode) touch device, etc. Among them, the display may also be appropriately referred to as a display screen or a display unit, for displaying information processed in the electronic device and for displaying a visual user interface.

[0137] Figure 5 Only the electronic device with components is shown, and it can be understood by those skilled in the art that Figure 5 The structure shown does not limit the electronic device, and may include fewer or more components than shown in the figure, or combine certain components, or arrange the components differently.

[0138] For example, although not shown, the electronic device may further include a power source (such as a battery) for powering various components. Preferably, the power source may be logically connected to at least one processor 10 via a power management device, thereby implementing functions such as charge management, discharge management, and power consumption management through the power management device. The power source may further include any components such as one or more DC or AC power sources, a recharging device, a power failure detection circuit, a power converter or inverter, a power status indicator, etc. The electronic device may also include various sensors, Bluetooth modules, Wi-Fi modules, etc., which will not be described in detail here.

[0139] It should be understood that the embodiment is for illustration only and the scope of the patent application is not limited to this structure.

[0140] Furthermore, if the module / unit integrated into the electronic device is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. The computer-readable storage medium can be volatile or non-volatile. For example, the computer-readable medium may include: any entity or device capable of carrying the computer program code, a recording medium, a USB flash drive, a mobile hard drive, a magnetic disk, an optical disk, a computer memory, or a read-only memory (ROM).

[0141] Throughout this specification, references to terms such as "one embodiment," "some embodiments," "example," "specific example," "one implementation," "a preferred implementation," or "some examples" indicate that the specific features, structures, materials, or characteristics described in conjunction with that embodiment or example are included in at least one embodiment or example of the present invention. In this specification, schematic representations of these terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples.

[0142] While embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions, and variations may be made to the embodiments without departing from the principles and spirit of the invention, and that the scope of the invention is defined by the claims and their equivalents.< / button>

Claims

1. A method for implementing a cross-framework business component, characterized in that: include: Encapsulate one or more externally provided Mithril business components into a preset front-end component base class, and generate a Mithril virtual DOM based on the encapsulated one or more Mithril business components, wherein the preset front-end component base class inherits the ComponentController class; Convert Mithril virtual DOM to Vue-recognizable template; A third party calls one or more Mithril business components provided to the outside world through a Vue-recognizable template.

2. A method for implementing a cross-framework business component according to claim 1, characterized in that: Use the vnodeToHTML tool to convert Mithri l virtual DOM into a Vue-recognizable template.

3. A method for implementing a cross-framework business component as described in claim 1 or 2, characterized in that: The conversion of Mithril virtual DOM into Vue recognizable template includes: Parse all DOM nodes in the Mithri l virtual DOM tree structure and obtain the node types of all DOM nodes, including element nodes, text nodes, and business component nodes; Perform static conversion on the DOM nodes of Mithril virtual DOM according to the node type to obtain the static conversion structure; Perform dynamic behavior marking in the static conversion structure to obtain a Vue-recognizable template.

4. A method for implementing a cross-framework business component according to claim 3, characterized in that: The parsing of all DOM nodes in the Mithril virtual DOM tree structure includes: traversing and parsing the DOM nodes in the Mithril virtual DOM tree structure from top to bottom using a depth-first recursive strategy.

5. A method for implementing a cross-framework business component according to claim 3, characterized in that: The static conversion of the DOM nodes of the Mithril virtual DOM according to the node type to obtain the static conversion structure includes: For element nodes, the tag names of the element nodes are directly mapped to HTML tags, and the static attributes in the element node attributes are converted into HTML attribute strings. Then, the tag names of the child nodes are directly mapped to HTML tags and the static attributes of the child nodes are converted into HTML attribute strings, which are recursively executed on the child nodes of the element node. For a text node, insert the text content of the text node into the parent element node of the text node; For a business component node, create a business component instance and call the business component VIEW method, and recursively convert it into an HTML structure based on the returned virtual DOM.

6. A method for implementing a cross-framework business component according to claim 3, characterized in that: The dynamic behavior marking in the static conversion structure to obtain a Vue-recognizable template includes: For the event binding attributes in all element nodes, a unique identifier is generated for the event handler corresponding to the event binding attribute, the event handler is associated with the identifier and stored in a global registry, and the event binding attribute is replaced with the corresponding dynamic tag attribute, where the dynamic tag attribute corresponding to the event binding attribute includes the identifier of the event handler corresponding to the event binding attribute.

7. A method for implementing a cross-framework business component according to claim 6, characterized in that: The method further comprises: When the Vue business component is mounted, the dynamic tag attributes in the Vue-recognizable template are scanned, and the event handler corresponding to each dynamic tag attribute is obtained from the global registry, and the event listener is bound to the event handler; When the event listener listens to the state change event of the Mithril business component, it triggers a forced update or differential update of the Vue business component.

8. A cross-framework business component implementation device, used to implement a cross-framework business component implementation method according to any one of claims 1 to 7, characterized in that: include: The class encapsulation and virtual DOM generation module encapsulates one or more Mithril business components provided to the outside into a preset front-end component base class, and generates a Mithril virtual DOM based on the encapsulated one or more Mithril business components, wherein the preset front-end component base class inherits the ComponentController class; The conversion module converts Mithril virtual DOM into Vue recognizable templates; Calling module: A third party can call one or more Mithril business components provided to the outside world through a Vue-recognizable template.

9. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of any one of the methods of claims 1 to 7 are implemented.

10. An electronic device, characterized in that: The electronic device comprises: at least one processor; and, A memory communicatively connected to the at least one processor; wherein the memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor to enable the at least one processor to execute a method for implementing a cross-framework business component as described in any one of claims 1 to 7.

Images