CN115658046B - Method and device for developing modularized UI (user interface) interaction component based on Web technology - Google Patents
Method and device for developing modularized UI (user interface) interaction component based on Web technology Download PDFInfo
- Publication number
- CN115658046B CN115658046B CN202211593514.3A CN202211593514A CN115658046B CN 115658046 B CN115658046 B CN 115658046B CN 202211593514 A CN202211593514 A CN 202211593514A CN 115658046 B CN115658046 B CN 115658046B
- Authority
- CN
- China
- Prior art keywords
- component
- dom
- style
- shadow
- document
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Abstract
The invention provides a method, a system, a device and a medium for developing a modularized UI interactive component based on a Web technology, which are suitable for constructing a Web project with high performance, high stability, high usability and high complexity, and comprise the following steps: registering a new component, determining a defined component name and a defined component behavior class, creating a shadow DOM inside the component and specifying a shadow style, then giving the shadow DOM and the shadow style to a shadow root element in a template character string form to finish the creation of the shadow DOM, setting an open mode to open the shadow DOM, wherein the shadow DOM can be accessed by an external document page; when the created UI interactive component is inserted into a document DOM, external style registration is carried out for access of a shadow DOM inside the component; monitoring related events of the components, specific attribute changes of document DOM and element attributes in the components; the UI interaction component removes the registered external styles and listening events when it is removed from the document DOM.
Description
Technical Field
The invention relates to the technical field of Web front ends, in particular to a method, a system, a device and a storage medium for developing a modularized UI interactive component based on Web technology.
Background
In the current Web environment, widely used UI components can be roughly divided into traditional UI components, framework UI components and native UI components, but they all have obvious limitations for constructing a Web project with high performance, high stability, high usability and high complexity, and the prior art has the following defects:
1. legacy UI component: the traditional UI component is formed by packaging based on HTML native tags, can be used across frames, and has high interaction flexibility. But the method has a fatal defect that the logic and the style of the traditional UI component are exposed to a public scope, so the traditional UI component is easy to invade and modify. When a plurality of components are nested to form a complex component, document object model resources (DOM) required by the complex component are rapidly expanded, so that the load is increased when the Web environment operates, and the difficulty is increased for operations such as management and multiplexing of the components. The method is not suitable for constructing the Web project with high performance and high stability due to the defects of easy tampering, poor performance, difficult management and difficult reuse.
2. Framework UI component: the framework UI component is developed based on the template form and internal interface given by the front-end framework and cannot be used across frameworks. Although the components can be built in a modularized mode and the decoupling degree between the components is high, the writing of the components is dependent on the characteristics of the framework template, the UI interaction is limited by the internal programming interface of the framework, and the rules under the specified version of the framework must be followed when the components are maintained in a later period. In addition, different front-end frameworks have different life cycles and rendering modes for registering, calling, destroying and the like of UI components created based on the front-end frameworks, the difficulty of compatibility of a set of universal UI components among the front-end frameworks is very high, the visible complexity is improved even if the front-end frameworks are compatible, and the initial purpose of packaging the UI components is violated. Due to the defects of limited writing mode, poor compatibility between frames and high later maintenance difficulty, the method is not suitable for constructing the high-complexity Web project.
3. Native UI component: the native UI component is formed by packaging based on a Web component technology, has the advantages of high packaging degree, strong reusability, good operation efficiency and the like, but still has the following defects: the component style can prevent the external modification of the component because of the anti-pollution property, so the developed component style is difficult to unify; the interior of the component is lack of fine-grained life cycle control, and refined operation scheduling is difficult; because of the high degree of internal packaging, the logic of the entire assembly needs to be re-carded when adding functions to the assembly. Due to the defects of complex pattern injection, simple life cycle and high expansion difficulty, the method is not suitable for constructing the Web project with high usability.
Disclosure of Invention
In order to solve the technical problems, the invention provides a method, a system, a device and a storage medium for developing a modularized UI interactive component based on a Web technology, which are easy to create and operate, can be expanded, follow modularized specifications, can realize cross-frame and independent use, are beneficial to improving development efficiency and user experience, and are suitable for constructing Web projects with high performance, high stability, high usability and high complexity.
The technical scheme is as follows: a method for developing a modular UI interaction component based on Web technology comprises the following steps:
and (3) component registration: registering a new component, determining a defined component name and a defined component behavior class, creating a shadow DOM inside the component and specifying a shadow style, then giving the shadow DOM and the shadow style to a shadow root element in a template character string form to finish the creation of the shadow DOM, setting an open mode to open the shadow DOM, wherein the shadow DOM can be accessed by an external document page;
a component calling stage: when the created UI interaction component is inserted into the document DOM, the following operations are performed, including: performing external style registration for access by a shadow DOM inside the component; monitoring the related events of the components; monitoring specific attribute changes of a document DOM; monitoring the element attribute in the component;
and (3) component extinction stage: the UI interaction component removes the registered external styles and listening events when removed from the document DOM.
Further, in a component registration phase, for a component with a slot element, adding a slot attribute to a component sub-element tag with the same name as a slot name of a named slot, wherein the component sub-element tag is an element tag created in a shadow DOM of the component in the component registration phase;
for the condition that the slot element has a single component of a child node, writing the extracted slot selector pattern into a created style label, setting a component name attribute for the style label as a mark of a set global pattern, and then taking the style label as a child element of a document head label;
for the condition of nesting of components, extracting a slot selector pattern, checking a parent node of the nested component, creating a new style label if the parent node has the attribute of a shadow root element, writing the extracted slot selector pattern into the created style label, and endowing the style label to the shadow root element of the parent node;
for a component series comprising a main component and accessory components, adding common attributes and common methods to the main component for use by the accessory components.
Further, an external style is registered only when the created UI interaction component is inserted into the document DOM for the first time for access by a shadow DOM inside the component, and the count of a redundancy prevention counter for controlling the generation of the external style is increased by 1; when the UI interaction component is removed from the document DOM, the registered external style is removed, and the redundancy prevention counter count for controlling the generation of the external style is set to be reduced by 1.
Furthermore, when monitoring the related events of the components, the related events on the shadow DOM in the components are monitored, the detailed data of the package events are converted to obtain new events, the new events are distributed to the external document, and interaction is formed between the new events and the external document DOM.
Further, when monitoring the change of the specific attribute of the document DOM, the component or the internal element style of the component is synchronously changed when the specific attribute of the document DOM changes.
Furthermore, an element attribute observation array in the component is set as required, and the monitored attribute is processed when changed in a corresponding callback function, wherein the changed attribute comprises the addition, deletion and modification of the attribute of the component.
Further, in the component registration stage, a resource unifying method is adopted to perform base64 coding on picture resources in the component, and icons in the iconfont icon library are used in a unifying manner for the icons of the component.
Furthermore, in the component registration stage, an auxiliary interface is set, and the auxiliary interface is used for storing an auxiliary function module in the component, and supporting component style rendering and component function realization.
A system for developing modular UI interaction components based on Web technologies, comprising:
a registration module for creating component structures, styles, the registration module comprising:
the device comprises a component initialization unit, a component identification unit and a shadow DOM (document object model) starting unit, wherein the component initialization unit is used for registering a new component, determining a defined component name and a defined component behavior class, creating a shadow DOM inside the component and specifying a shadow style, then giving the shadow DOM and the shadow style to a shadow root element in a template character string form to complete creation of the shadow DOM, setting an open mode to start the shadow DOM, and enabling the shadow DOM to be accessed by an external document page;
the slot binding unit is used for processing the component with the slot element and adding a slot attribute to a component sub-element label with the same slot name as the slot name;
a global pattern injection unit for processing the single component and the nested component having child nodes,
for the condition that the slot element has a single component of a child node, writing the extracted slot selector pattern into a created style label, setting a component name attribute for the style label as a mark of a set global pattern, and then taking the style label as a child element of a document head label;
for the condition of nesting of components, extracting a slot selector pattern, checking a parent node of the nested component, creating a new style label if the parent node has the attribute of a shadow root element, writing the extracted slot selector pattern into the created style label, and endowing the style label to the shadow root element of the parent node;
a common method unit for processing a component series including a main component and subsidiary components, the main component being added with a common attribute and a common method for use by the subsidiary components;
the auxiliary interface unit is used for storing an auxiliary function module in the assembly, and supporting assembly style rendering and assembly function realization;
a calling module, the calling module comprising:
the external style processing unit is used for registering external styles when the created UI interactive components are inserted into the document DOM;
the monitoring event creating unit is used for monitoring related events of the components, monitoring specific attribute changes of the document DOM and monitoring element attributes in the components;
a casualty module for resource cleaning when removing components, the casualty module comprising:
an external style removal unit for removing the registered external style when the UI interaction component is removed from the document DOM;
and a listening event removing unit for removing event listening when the UI interaction component is removed from the document DOM.
A computer device, comprising: comprising a processor, a memory, and a program;
the program is stored in the memory, and the processor calls the program stored in the memory to execute the method for developing the modular UI interaction component based on the Web technology.
A computer-readable storage medium for storing a program for executing the above-described method for developing a modular UI interaction component based on Web technology.
Compared with the prior art, the invention can obtain the following beneficial effects: the method for developing the modularized UI interactive component based on the Web technology has the advantages of simple creation mode, no additional dependence and no need of compiling for use; the control of the life cycle of the component is more convenient than that of the original component, and the control granularity is finer; the device can be used across a frame, and supports various types of projects such as Angular, react, vue, native and the like; the module constructed by the method is highly modularized, and the code is convenient to maintain; the problems that the sub-element styles of the slots cannot be acquired, the head style labels cannot be accessed during component nesting and the like can be solved, and the code structure of the component series is optimized; the method can form a complete UI interaction framework facing the Web operating system, can bring good interaction perception to users, and brings easy use experience to developers.
Drawings
FIG. 1 is a schematic diagram illustrating steps of a method for developing a modular UI interaction component based on Web technologies according to the present invention;
FIG. 2 is a block diagram of a system for developing a modular UI interaction component based on Web technologies according to the present invention;
FIG. 3 is a flowchart of a process of a global pattern injection unit;
FIG. 4 is a diagram illustrating an internal structure of a computer device according to an embodiment.
Detailed Description
Referring to fig. 1, a method for developing a modular UI interaction component based on Web technology, which is applicable to a Web operating system, such as kylin mobile operating system, comprises the following steps:
step 1: and (3) component registration: in the component registration stage, the method is used for creating component structure and style, and comprises the following steps:
and (3) component registration: registering a new component, determining a defined component name and a defined component behavior class, creating a shadow DOM (shadow DOM) inside the component and specifying a shadow style, then assigning the shadow DOM and the shadow style to a shadow Root element (shadow Root) in the form of a template character string to complete the creation of the shadow DOM, setting an open mode to open the shadow DOM, wherein the shadow DOM can be accessed by an external document page, the external document page accesses the shadow DOM by a javaScript method, the shadow DOM comprises an internal self-defined shadow tree, the shadow Root element (shadow Root) is a Root node of the shadow tree, the shadow DOM, namely the whole component, is attached to the external document DOM by the shadow host, and the shadow style comprises a shadow tree style and a shadow host style.
In the component registration phase, for a component with a slot element, adding a slot attribute to a component sub-element tag with the same name as a slot name of a named slot, wherein the component sub-element tag is an element tag created in a shadow DOM of the component in the component registration phase; the step of adding the slot property when using the component can be omitted.
In the component registration stage, there is a problem that the pattern cannot be correctly matched when the slot element has a child node. Because the slot selector can only match the first-level child node of the slot, the first-level child node of the slot is a slot element, and the child node which cannot match the next slot element needs to extract the pattern to ensure the integrity of the component pattern, and then the extracted pattern is injected into the global or parent component pattern. Referring to fig. 3, the following two cases are mainly distinguished:
case 1: for the condition that a slot element has a single component of a child node, detecting that a parent node of the component does not have the attribute of a ShadowRoot shadow root element, and showing that the component does not belong to component nesting, extracting a slot selector pattern by using a regular expression, calling a single component global pattern processing unit, writing the extracted pattern into a created style label, setting a component name attribute for the style label as a mark of the set global pattern, and then using the style label as a child element of a document head label. The global style flag is set to prevent the style from being repeatedly added when the same component is called. At initial run time, it is determined whether the global pattern exists to determine whether a subsequent flow is to proceed.
Case 2: when the components are nested, detecting that a parent node of the component has a Shadowroot shadow root element attribute, wherein a slot element is a nested component, and a child element of the nested component is a slot element child node. Considering that when the component is nested, due to the isolation effect of the shadow DOM, the nested component can have the problem that the style tag in the head tag of the document cannot be accessed, so that a new style tag can be created by calling, the extracted slot selector pattern is written into the style tag, and the style tag is assigned to the shadow root element of the parent node.
For a component series which comprises a main component and auxiliary components, adding common attributes and common methods for the auxiliary components; the components can be operated externally through the public attributes and methods, the public methods are defined in the main component, direct calling of the auxiliary components is facilitated, the code amount can be greatly reduced, construction of the light-weight UI component is facilitated, the code amount can be greatly reduced, and construction of the light-weight UI component is facilitated.
In the component registration stage, an auxiliary interface can be further arranged, wherein the auxiliary interface is used for storing an auxiliary function module in the component, and supporting component style rendering and component function realization.
Step 2: a component calling stage: when inserting a component into the document DOM, the following steps need to be performed:
when the created UI interaction component is inserted into the document DOM, the following operations are performed, including:
step 201: the method comprises the steps of performing external style registration for access of a shadow DOM inside a component, isolating internal elements of the component from the outside by virtue of the anti-pollution characteristic of the shadow DOM, and enabling the structure, the style and the behavior inside the component not to be influenced by the outside, wherein sometimes the component styles need to be adjusted to adapt to the overall style during development, however, the external styles used for controlling the component cannot be directly acquired through a style selector in a shadow tree, for example, the character sequence of an external document is different, and the positions of some elements inside the component need to be correspondingly different. This can only be handled by means of an external pattern. By registering the external style, the specific method is to dynamically acquire the external CSS attribute, set the custom CSS attribute to penetrate through the shadow tree, and thereby the internal element of the component may acquire the external style, for example, define a "— left" attribute in the external style, perform style setting, and dynamically acquire the external style in the style of the shadow tree in a "var (minus left, input)" manner.
In one embodiment, to ensure that the style tag corresponding to the external style will only be added to the document DOM once, the external style is registered only when the created UI interaction component is first inserted into the document DOM.
The components provided by the method of the invention need to use a specified interface when being added to and removed from the document DOM, the interface can be called for many times when the components are repeatedly added to or removed from the document, and the function for registering the external style is called in the specified interface. In order to prevent external styles from being repeatedly added to the component in the component calling process and causing the rapid expansion of the DOM structure of the component, a redundancy prevention counter is arranged. The increase of 1 in the anti-redundancy counter when added to the document and the decrease of 1 in the anti-redundancy counter when removed from the document are relied upon to ensure that the external styles are eventually registered only once.
In the embodiment, in the component registration stage, a resource unifying method is adopted to perform base64 coding on the picture resources in the component, so that the problems of complexity in the component resource introduction process, slow loading and the like can be effectively solved, unnecessary http requests are reduced, icons in an iconfont icon library are uniformly used for the component icons, the size, color and format of the icons can be customized, and the management is convenient.
Step 202: monitoring component related events: monitoring related events on a shadow DOM in the assembly, converting detail data of a wrapping event to obtain a new event, dispatching the new event to an external document, and forming interaction with the document DOM.
For example, after a certain sub-element in the component is clicked, the external document needs to replace the background picture according to the picture provided by the component. By monitoring the click event on the sub-element, in order to better fit the element event characteristics, the click event is converted into a self-defined change-background event for distribution, and the event detail data comprises the picture size and the picture url. The developer monitors the event when calling the component in the external document, and according to the transmitted data, the processing mode is stated in the event callback for further processing, here, the background picture is replaced according to the picture size and url, so that the component and the external document generate interaction.
Step 203: when the change of the document DOM specific attribute is monitored, the component or the internal element style of the component is synchronously changed when the document DOM specific attribute is changed.
In the embodiment, a MutationObserver interface is called to carry out event proxy, the change of a document DOM structure is monitored, for example, when the character arrangement direction (dir) of the whole document is changed, the change can be transmitted to the inside of the component, and the component changes the component style according to the change. Specifically, the method is realized by setting corresponding attributes of internal elements of the component in the interface callback function, wherein the attributes correspond to corresponding css.
Step 204: monitoring the element attribute in the component, setting an element attribute observation array in the component as required, and processing the monitored attribute when the monitored attribute changes in a corresponding callback function, wherein the change comprises the addition, deletion and modification of the attribute of the component. For example, whether a component contains a color attribute is monitored, and if the attribute exists, the color field in the component shadow style is changed.
And step 3: and (3) component extinction stage: when the UI interaction component is removed from the document DOM, the registered external styles and the listening events are removed, and the fact that the component is completely removed from the DOM is guaranteed. Correspondingly, in the embodiment, when the UI interaction component is removed from the document DOM, the registered external styles are removed, and the anti-redundancy counter count for controlling the generation of the external styles is reduced by 1.
Referring to fig. 2, in an embodiment of the present invention, there is further provided a system for developing a modular UI interaction component based on Web technologies, including:
a registration module 100 for creating component structures, styles, the registration module 100 comprising:
a component initialization unit 101, configured to register a new custom element, determine a defined component name and a component behavior class, attach a shadow DOM to the custom element, specify a shadow style, and assign the shadow DOM and the shadow style to a shadow root element;
a slot binding unit 102, configured to process a component with a slot element, and add a slot attribute to a component sub-element tag having the same slot name as the slot name;
a global pattern injection unit 103 for processing the single component and the nested component having child nodes,
for the condition that the slot element has a single component of a child node, writing the extracted slot selector pattern into a created style label, setting a component name attribute for the style label as a mark of a set global pattern, and then taking the style label as a child element of a document head label;
for the condition of nesting of components, extracting a slot selector pattern, checking a parent node of the nested component, creating a new style label if the parent node has the attribute of a shadow root element, writing the extracted slot selector pattern into the created style label, and endowing the style label to the shadow root element of the parent node;
a common method unit 104 for processing a component series including a main component and subsidiary components, the main component being added with common attributes and common methods for use by the subsidiary components;
the auxiliary interface unit 105 is used for storing an auxiliary function module in the component, and supporting component style rendering and component function realization;
the calling module 200, the calling module 200 comprising:
an external style processing unit 201, configured to register an external style when the created UI interaction component is inserted into the document DOM;
a monitoring event creating unit 202, configured to monitor events related to the component, monitor specific attribute changes of a document DOM, and monitor element attributes in the component;
the extinction module 300, the extinction module 300 includes:
an external style removal unit 301 for removing a registered external style when the UI interaction component is removed from the document DOM;
a listening event removing unit 302 for removing event listening when the UI interaction component is removed from the document DOM.
The global pattern injection unit 103 is used for handling the problem that the pattern cannot be correctly matched when a slot element has a child node. Because the slot selector can only match the first-level child node of the slot, the first-level child node of the slot is a slot element, and the child node which cannot match the next slot element needs to extract the pattern in order to ensure the integrity of the pattern of the component, and then the extracted pattern is injected into the global or parent component pattern. This unit is used to handle the following two cases:
for the condition that a slot element has a single component of a child node, a global style injection unit detects that a parent node of the component does not have a ShadowRoot shadow root element attribute, the component does not belong to component nesting, a regular expression is used by the global style injection unit to extract a slot selector style, a single component global style processing unit is called, the extracted style is written into a created style label, a component name attribute is set for the style label to serve as a mark of the set global style, and then the style label is used as a child element of a document head label. The global style flag is set to prevent the style from being repeatedly added when the same component is called. When the global pattern injection unit is initially operated, whether the global pattern exists or not is judged to determine whether the subsequent process of the global pattern injection unit is carried out or not.
When the components are nested, the global style injection unit detects that a parent node of the component has a shadow root element attribute, a slot element is a nested component, and a child element of the nested component is a slot element child node. When the assembly is used in a nested mode, due to the isolation effect of the shadow DOM, the nested assembly cannot access the style tag in the head tag of the document, so the global style injection unit calls the assembly nested global style processing unit to create a new style tag, the extracted slot selector style is written into the style tag, and the style tag is assigned to the shadow root element of the parent node.
In the following, a component series implementation method is described by taking a dialog series component as an example, in the dialog series component, dialog is a main component, and dialog-action (behavior dialog), dialog-alert (alert dialog), dialog-select (selection dialog), dialog-prompt (prompt dialog), and dialog-menu (menu dialog) are accessory components. The concrete implementation is as follows:
the main component dialog creates a component structure and a component style through the component initialization unit 101;
the main component dialog stores a public method through the public method unit 104, the public method is a method which can be called by all auxiliary components of the main component dialog, and the writing in the main component is to avoid the repeated writing of codes of the same method in the auxiliary components, reduce the code amount and construct a lightweight group;
when the main component dialog is initialized, a global pattern injection module 103 is called in a constructor to register an external pattern, and when the main component is added into the document DOM, a shadow DOM is created and opened, so that the component series can avoid the conflict between the operation of opening the shadow DOM by an auxiliary component and the main component;
the auxiliary component dialog-alert and the like inherit the main component dialog;
when the auxiliary component dialog-alert and the like are initialized by the component initialization unit 101, calling the external style registered by the global style injection unit 103 in the constructor, and creating and opening a shadow DOM;
when the attached component with the slot is added into the document, calling the slot binding unit 102 to process the component sub-elements;
the accessory component calls the common method of the main component dialog deposit through the common method unit 104.
The UI component build ends, which needs to be used next in the Web application. Taking the dialog-alert component as an example, the use steps of the component are described as follows:
introducing js files corresponding to UI components;
loading a component, and statically creating the UI component in an HTML form or dynamically creating the UI component by js according to the UI component use rule so as to instantiate the component;
the method provided by the component is called to acquire and set the attribute, and monitor the component-related event dispatched by the monitored event creating unit 202.
Finally, when the UI interaction component is removed from the document DOM, the registered external style is removed by the external style removing unit 301, and the event listening is removed by the listening event removing unit 302.
The present invention extends the complexity of an extensible single component, which is described below with reference to the header component as an example.
The created header component may be used for a title bar of the Web application. In order to expand the complexity of the components and create a header component with stronger interactivity and usability, a variable interactive layout module is specially added in the component registration stage, and the variable interactive layout module can select component layout styles according to input layout types when a user calls the components. The layouts are classified into left-middle-right layouts (i.e., icon-title-icon), left-right layouts (title-icon or icon-title). In addition, a FontFit module is added in the registration stage, and the FontFit module is used for realizing the self-adaption of the size of the title characters. When the title content changes, the component calculates the title width, and the FontFit module determines an appropriate font and font size according to the incoming title content, the title width and the configuration items, so as to ensure that the title characters in the component are displayed in a centered mode. Through the monitoring event creating unit, according to the icon button triggering behavior, the head component is divided into a return type, a closing type and a menu type, and an action event is added to the corresponding element of the icon and is sent out. When the application program monitors the event, corresponding processing is carried out, for example, for a closing type head component, a developer calls a closing interface to close the application.
The longitudinal expansion of the invention can realize multi-layer nesting of components. The problem that the slot element processing and the slot element patterns cannot be correctly matched is the biggest difficult problem of component nesting and component multilayer nesting, and the problem can be easily solved by the global pattern injection unit and the binding slot unit provided by the invention.
The internal interactive logic and the style of the UI component created by the method are defined in the component behavior class, so that the UI component is prevented from being exposed to the outside, is not easy to be tampered, and is easy to manage and reuse. The external pattern processing unit, the global pattern injection unit, the binding slot unit, the redundancy prevention counter and the resource unifying method provided by the invention are not only beneficial to constructing a light document DOM, but also can expand the complexity of a single component through horizontal expansion, and can realize multilayer nesting of the components through vertical expansion; the defects that a traditional UI component is easy to tamper, poor in performance, difficult to manage and difficult to reuse are effectively overcome, and the method is suitable for construction of high-performance and high-stability Web projects and is suitable for an kylin mobile operating system.
The Web UI component constructed by the method is simple in writing mode and independent of a frame, so that the Web UI component is not limited by a frame version and does not have other additional dependence, can be used without compiling and is convenient for later maintenance. The assembly can be used across frames, has strong universality, supports Angular, react, vue and native projects, and effectively solves the problems of limited writing mode of frame UI assemblies, poor compatibility among frames and high later maintenance difficulty. The method can form a complete UI interaction framework facing the Web operating system, and is more suitable for constructing high-complexity Web projects in the kylin mobile operating system.
The Web UI component constructed by the invention is highly modularized, and each function of the component is compiled in different modules, so that the whole structure and logic of the component can be conveniently understood, the functions of the component can be more easily expanded, and the later maintenance difficulty of codes can be reduced. The control of the life cycle of the component is more convenient than that of the original component, the control granularity is finer, and the fine operation scheduling is convenient. The external style processing unit, the global style injection unit and the redundancy prevention counter are beneficial to solving the problem that the original UI component cannot unify the overall style due to the fact that the external style is difficult to obtain. The method effectively solves the problems of complex pattern injection of the native UI component, simple life cycle and high expansion difficulty, and is more suitable for constructing the high-usability Web project in the kylin mobile operating system.
Therefore, the method and the device can bring good interactive perception to the user and bring easy use experience to developers.
In an embodiment of the present invention, there is also provided a computer apparatus, including: comprising a processor, a memory, and a program;
a program is stored in the memory, and the processor calls the program stored in the memory to perform the above-described method for developing a modular UI interaction component based on Web technology.
The computer apparatus may be a terminal, and its internal structure diagram may be as shown in fig. 4. The computer device comprises a processor, a memory, a network interface, a display screen and an input device which are connected through a bus. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device comprises a nonvolatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of an operating system and computer programs in the non-volatile storage medium. The network interface of the computer device is used for connecting and communicating with an external terminal through a network. The computer program is executed by a processor to implement a method for developing a modular UI interaction component based on Web technologies. The display screen of the computer device can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covered on the display screen, a key, a track ball or a touch pad arranged on a shell of the computer device, an external keyboard, a touch pad or a mouse and the like.
The Memory may be, but is not limited to, a Random Access Memory (RAM), a Read Only Memory (ROM), a Programmable Read-Only Memory (PROM), an Erasable Read-Only Memory (EPROM), an electrically Erasable Read-Only Memory (EEPROM), and the like. The memory is used for storing programs, and the processor executes the programs after receiving the execution instructions.
The processor may be an integrated circuit chip having signal processing capabilities. The Processor may be a general-purpose Processor, and includes a Central Processing Unit (CPU), a Network Processor (NP), and the like. The Processor may also be other general purpose processors, digital Signal Processors (DSPs), application Specific Integrated Circuits (ASICs), field Programmable Gate Arrays (FPGAs) or other Programmable logic devices, discrete Gate or transistor logic devices, discrete hardware components, etc. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like. The various methods, steps, and logic blocks disclosed in the embodiments of the present application may be implemented or performed. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
It will be appreciated by those skilled in the art that the configuration shown in fig. 4 is a block diagram of only a portion of the configuration associated with the present application, and is not intended to limit the computing device to which the present application may be applied, and that a particular computing device may include more or fewer components than shown, or may combine certain components, or have a different arrangement of components.
In an embodiment of the present invention, there is also provided a computer-readable storage medium for storing a program for executing the above-described method for developing a modular UI interaction component based on Web technology.
As will be appreciated by one of skill in the art, embodiments of the present invention may be provided as a method, computer apparatus, or computer program product. Accordingly, embodiments of the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, embodiments of the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
Embodiments of the present invention are described with reference to flowchart illustrations of methods, systems, computer apparatus, or computer program products according to embodiments of the invention. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing terminal to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing terminal, create means for implementing the functions specified in the flowchart.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing terminal to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart.
The method, the system, the computer device and the application of the computer readable storage medium for developing the modular UI interaction component based on the Web technology are described in detail, and specific examples are applied to explain the principle and the implementation of the invention, and the description of the embodiments is only used to help understand the method and the core idea of the invention; meanwhile, for a person skilled in the art, according to the idea of the present invention, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present invention.
Claims (9)
1. A method for developing a modular UI interactive component based on Web technology is characterized by comprising the following steps:
and (3) component registration: registering a new component, determining a defined component name and a defined component behavior class, creating a shadow DOM inside the component and specifying a shadow style, then giving the shadow DOM and the shadow style to a shadow root element in a template character string form to finish the creation of the shadow DOM, setting an open mode to open the shadow DOM, wherein the shadow DOM can be accessed by an external document page;
a component calling stage: when the created UI interaction component is inserted into the document DOM, the following operations are performed, including: performing external style registration for access by a shadow DOM inside the component; monitoring the related events of the components; monitoring the change of the specific attribute of the document DOM; monitoring the element attributes in the components, setting an element attribute observation array in the components as required, and processing the monitored attributes when the monitored attributes change in corresponding callback functions, wherein the change comprises the addition, deletion and modification of the attributes of the components;
and (3) component extinction stage: when the UI interaction component is removed from the document DOM, removing the registered external styles and the monitoring events;
in the component registration stage, for a component with slot elements, adding a slot attribute to a component sub-element tag with the same name as a slot name of a named slot, wherein the component sub-element tag is an element tag created in a shadow DOM of the component in the component registration stage;
for the condition that the slot element has a single component of a child node, writing the extracted slot selector pattern into a created style label, setting a component name attribute for the style label as a mark of a set global pattern, and then taking the style label as a child element of a document head label;
for the condition of nesting of components, extracting a slot selector pattern, checking a parent node of the nested component, creating a new style label if the parent node has the attribute of a shadow root element, writing the extracted slot selector pattern into the created style label, and endowing the style label to the shadow root element of the parent node;
for a component series comprising a main component and auxiliary components, adding common attributes and common methods to the main component for the auxiliary components to use;
the UI interaction component internal interaction logic, styles are defined in the component behavior class.
2. The method for developing a modular UI interaction component based on Web technology of claim 1, characterized in that: registering an external style only when the created UI interactive component is inserted into a document DOM for the first time, wherein the external style is used for being accessed by a shadow DOM in the component, and setting a corresponding increase of the count of a redundancy prevention counter for controlling the generation of the external style; when the UI interaction component is removed from the document DOM, the registered external style is removed, and the anti-redundancy counter for controlling the generation of the external style is set to be correspondingly reduced.
3. The method for developing a modular UI interaction component based on Web technology of claim 1, characterized in that: when monitoring the related events of the component, the related events on the shadow DOM in the component are monitored, the detail data of the package events are converted to obtain new events, the new events are distributed to the external document, and interaction is formed between the new events and the DOM of the external document.
4. The method for developing a modular UI interaction component based on Web technology of claim 1, characterized in that: when the change of the document DOM specific attribute is monitored, the component or the internal element style of the component is synchronously changed when the document DOM specific attribute is changed.
5. The method for developing a modular UI interaction component based on Web technology of claim 1, characterized in that: in the component registration stage, a resource unifying method is adopted to carry out base64 coding on picture resources in the component, and icons in the iconfont icon library are used in a unifying mode for the icons of the component.
6. The method for developing a modular UI interaction component based on Web technology of claim 1, characterized in that: and in the component registration stage, setting an auxiliary interface, wherein the auxiliary interface is used for storing an auxiliary function module in the component, and supporting the rendering of the component style and the realization of the component function.
7. A system for developing a modular UI interactive component based on Web technology is characterized in that: the method comprises the following steps:
a registration module for creating component structures, styles, the registration module comprising:
the device comprises a component initialization unit, a component identification unit and a shadow DOM (document object model) starting unit, wherein the component initialization unit is used for registering a new component, determining a defined component name and a defined component behavior class, creating a shadow DOM inside the component and specifying a shadow style, then giving the shadow DOM and the shadow style to a shadow root element in a template character string form to complete creation of the shadow DOM, setting an open mode to start the shadow DOM, and enabling the shadow DOM to be accessed by an external document page;
the slot binding unit is used for processing a component with slot elements and adding slot attributes to component sub-element tags with the same slot names, wherein the component sub-element tags are element tags created in a shadow DOM of the component in a component registration stage;
a global pattern injection unit for processing the single component and the nested component having child nodes,
for the condition that the slot element has a single component of a child node, writing the extracted slot selector pattern into a created style label, setting a component name attribute for the style label as a mark of a set global pattern, and then taking the style label as a child element of a document head label;
for the condition of nesting of components, extracting a slot selector pattern, checking a parent node of the nested component, creating a new style label if the parent node has the attribute of a shadow root element, writing the extracted slot selector pattern into the created style label, and endowing the style label to the shadow root element of the parent node;
a common method unit for processing a component series including a main component and subsidiary components, the main component being added with a common attribute and a common method for use by the subsidiary components;
the auxiliary interface unit is used for storing an auxiliary function module in the assembly, and supporting assembly style rendering and assembly function realization;
a calling module, the calling module comprising:
the external style processing unit is used for registering external styles when the created UI interactive components are inserted into the document DOM;
a monitoring event creating unit, which is used for monitoring the related events of the components, monitoring the change of the specific attribute of the document DOM, monitoring the attribute of the element in the components, setting an observation array of the attribute of the element in the components according to the requirement, and processing the monitored attribute when the monitored attribute changes in the corresponding callback function, wherein the changed attribute comprises the addition, deletion and modification of the attributes of the components;
a casualty module for resource cleaning when removing components, the casualty module comprising:
an external style removal unit for removing the registered external style when the UI interaction component is removed from the document DOM;
a listening event removing unit for removing event listening when the UI interaction component is removed from the document DOM;
the UI interaction component internal interaction logic, styles are defined in the component behavior class.
8. A computer device, comprising: comprising a processor, a memory, and a program;
the program is stored in the memory, and the processor calls the program stored in the memory to execute the method for developing the modular UI interaction component based on Web technologies as claimed in claim 1.
9. A computer-readable storage medium characterized by: the computer-readable storage medium stores a program for executing the method for developing a modular UI interaction component based on Web technology of claim 1.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211593514.3A CN115658046B (en) | 2022-12-13 | 2022-12-13 | Method and device for developing modularized UI (user interface) interaction component based on Web technology |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211593514.3A CN115658046B (en) | 2022-12-13 | 2022-12-13 | Method and device for developing modularized UI (user interface) interaction component based on Web technology |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115658046A CN115658046A (en) | 2023-01-31 |
| CN115658046B true CN115658046B (en) | 2023-03-21 |
Family
ID=85020086
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211593514.3A Active CN115658046B (en) | 2022-12-13 | 2022-12-13 | Method and device for developing modularized UI (user interface) interaction component based on Web technology |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115658046B (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112667307A (en) * | 2020-11-26 | 2021-04-16 | 常州微亿智造科技有限公司 | Extension method and extension device based on el-tabs |
| CN113778393A (en) * | 2021-03-22 | 2021-12-10 | 北京沃东天骏信息技术有限公司 | Component generation method, device, computer system and computer-readable storage medium |
| CN113835693A (en) * | 2021-09-15 | 2021-12-24 | 欧电云信息科技(江苏)有限公司 | Code generation method and device, electronic equipment and storage medium |
| CN114064033A (en) * | 2021-11-17 | 2022-02-18 | 招商局金融科技有限公司 | Front-end component development method and device, electronic equipment and readable storage medium |
| CN115421693A (en) * | 2022-09-02 | 2022-12-02 | 金蝶征信有限公司 | Method and device for realizing micro front-end architecture, computer equipment and storage medium |
Family Cites Families (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108304179A (en) * | 2016-10-08 | 2018-07-20 | 阿里巴巴集团控股有限公司 | The method and device of pattern is introduced in a kind of Web Components components |
| US10599752B2 (en) * | 2018-02-26 | 2020-03-24 | Servicenow, Inc. | Web page acquisition and rendering with inter-component data binding |
| CN111382388B (en) * | 2020-03-19 | 2023-10-24 | 中国银行股份有限公司 | Method and system for bottom element bottom suction control by using CSS |
| CN111625236A (en) * | 2020-04-30 | 2020-09-04 | 平安国际智慧城市科技股份有限公司 | Front-end development method and device based on componentization, electronic equipment and storage medium |
| US11748243B2 (en) * | 2021-04-27 | 2023-09-05 | Salesforce, Inc. | Intelligent generation of page objects for user interface testing |
| CN114116078A (en) * | 2021-11-29 | 2022-03-01 | 深圳壹账通创配科技有限公司 | Application data processing method, device, equipment and medium based on micro front end |
| CN114297549A (en) * | 2021-12-08 | 2022-04-08 | 网易（杭州）网络有限公司 | Component processing method and device |
| CN114721651A (en) * | 2022-04-13 | 2022-07-08 | 浪潮软件科技有限公司 | Native HTML carousel component method and device |
-
2022
- 2022-12-13 CN CN202211593514.3A patent/CN115658046B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112667307A (en) * | 2020-11-26 | 2021-04-16 | 常州微亿智造科技有限公司 | Extension method and extension device based on el-tabs |
| CN113778393A (en) * | 2021-03-22 | 2021-12-10 | 北京沃东天骏信息技术有限公司 | Component generation method, device, computer system and computer-readable storage medium |
| CN113835693A (en) * | 2021-09-15 | 2021-12-24 | 欧电云信息科技(江苏)有限公司 | Code generation method and device, electronic equipment and storage medium |
| CN114064033A (en) * | 2021-11-17 | 2022-02-18 | 招商局金融科技有限公司 | Front-end component development method and device, electronic equipment and readable storage medium |
| CN115421693A (en) * | 2022-09-02 | 2022-12-02 | 金蝶征信有限公司 | Method and device for realizing micro front-end architecture, computer equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115658046A (en) | 2023-01-31 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104090749B (en) | A kind of WinCE Product Interface theme upgrades transform process method and system | |
| EP2530583B1 (en) | Computer-implemented method, system and computer program product for displaying a user interface component | |
| US8392877B1 (en) | System and method of application development using replaceable self-contained components (RSCCS) | |
| US8527943B1 (en) | System and method of application development | |
| CN110020307B (en) | Drawing method and device for client end view | |
| US7827527B1 (en) | System and method of application development | |
| US8321834B2 (en) | Framework for automatically merging customizations to structured code that has been refactored | |
| US20110016423A1 (en) | Generating widgets for use in a graphical user interface | |
| US8839192B2 (en) | System and method for presentation of cross organizational applications | |
| KR20020035567A (en) | Object property meta model emulator for legacy data structures | |
| CN111831387A (en) | Page processing method, device and equipment | |
| Bishop et al. | Developing principles of GUI programming using views | |
| CN111736884A (en) | Componentization method and system | |
| CN116974620A (en) | Application program generation method, operation method and corresponding device | |
| CN112306486A (en) | Interface generation method and device, server and storage medium | |
| CN114217789A (en) | Function component expansion method, device, equipment, storage medium and program product | |
| CN115658046B (en) | Method and device for developing modularized UI (user interface) interaction component based on Web technology | |
| Hussey et al. | Comparing the MVC and PAC architectures: a formal perspective | |
| Samaan et al. | Task models and interaction models in a multiple user interfaces generation process | |
| CN104267954A (en) | Generation method and device for units included in user interface | |
| CN115080046A (en) | Multi-component abstract association fusion method and device in page design | |
| CN116340680A (en) | Display equipment and control method for managing life cycle of plug-in object | |
| CN113626016A (en) | Front-end and back-end separated reusable component based on Vue + Element UI + Koa2 | |
| Chaubey et al. | The integrated development environment (IDE) for application development: Android studio and its tools | |
| US7634721B1 (en) | Composite component architecture using javaserver pages (JSP) tags |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |