Method and device for combining and sorting components

Abstract

The invention relates to the technical field of Web front-end development, and particularly provides a method and device for combining and sorting components, and the method comprises the following steps: S1, defining component structures and styles; s2, defining a single sorting item component data structure; s3, defining a sorting group container component data structure; and S4, defining an inter-component communication mechanism. Compared with the prior art, the method has the advantages that the time for a developer to repeatedly develop the component can be greatly saved, the development efficiency is improved, in addition, a user can modify the default style of the component according to the own product style, and the expansibility is better.

Description

Technical Field

[0001] The present invention relates to the technical field of Web front-end development, and specifically provides a method and device for combining sorting components. Background Art

[0002] Vue is a JavaScript framework for building user interfaces. It is built on standard HTML, CSS, and JavaScript, and provides a declarative, component-based programming model. Vue3 is the latest version of the framework. It has significantly improved performance through source code upgrades, such as using Proxy instead of defineProperty to achieve responsiveness, rewriting the implementation of virtual DOM and Tree-Shaking, etc., which is reflected in the reduction of application packaging size and memory usage by nearly 50%, the initial rendering speed of the application increased by about 50%, and the update rendering speed doubled.

[0003] The specific content of the concept of front-end componentization is to separate a part of the page (such as buttons, forms, dialog boxes, etc.), encapsulate the model layer (Model), view layer (View) and view model layer (ViewModel) of this part into a component, and expose some functions and properties for external calls. Componentization focuses more on the UI part. Each component has independent HTML, CSS, JS / TS code. It can be placed anywhere on the page as needed, or it can be combined with other components to form a new component. A page is a combination of various components and can be assembled as needed. The biggest purpose of componentization is to increase the reusability of the code, reduce the coupling of various functions of the system, improve the aggregation of functions, facilitate the division of labor and cooperation and synchronous development among developers, and ultimately improve development efficiency and reduce development costs. Component development has become the mainstream trend of front-end frameworks. Mature frameworks such as Vue, React and Angular already have excellent componentization mechanisms.

[0004] Communication between front-end components is data exchange and state synchronization between components. It is an indispensable mechanism in component-based development. It solves core issues such as data sharing, decoupling and reuse, dynamic interaction, and state management between components. Its principle is mainly based on the concept of data flow, which can be unidirectional or bidirectional. Unidirectional data flow usually flows from parent components to child components, while bidirectional data flow supports bidirectional data transmission between parent and child components.

[0005] The UI component library is a collection of packaged UI components. It provides a wealth of packaged, reusable UI components, such as icons, buttons, selection boxes, input boxes, forms, and other small elements that make up the interface. For engineering projects with low customization and personalization, it is a common strategy for enterprises to use component libraries for rapid development. However, the current mainstream component libraries, such as Ant Design, ElementPlus, and NG-ZORRO, do not implement sorting components. For the demand for ascending / descending sorting and display according to different classification items, developers usually need to spend some time developing sorting components. Summary of the invention

[0006] The present invention aims at the above-mentioned deficiencies of the prior art and provides a method for combining and sorting components with strong practicability.

[0007] A further technical task of the present invention is to provide a device for combining and sorting components that is reasonably designed, safe and applicable.

[0008] The technical solution adopted by the present invention to solve its technical problem is:

[0009] A method for combining and sorting components, comprising the following steps:

[0010] S1. Define component structure and style;

[0011] S2. Define a single sort item component data structure;

[0012] S3, define the sorting group container component data structure;

[0013] S4. Define the communication mechanism between components.

[0014] Furthermore, in step S1, two components, WSortGroup.vue and WSort.vue, are generated, wherein WSortGroup.vue is a sorting group container component, and WSort.vue is a sorting item component, and the entire combined sorting component is composed of the sorting group container component and the sorting item component.

[0015] Furthermore, the WSort.vue component defines the page content structure and style of a single sorting item, which is composed of a sorting field text identifier and ascending and descending identifier icons, and uses w-sort, w-sort-label, w-sort-icon and w-sort-icon-active classes to define the style of a single sorting item;

[0016] The w-sort class, as the top-level style of the sorting item, defines the size, inner and outer margins of the sorting item, and the page arrangement position of the sorting field text and the sorting icon;

[0017] The w-sort-label class defines the size and color of the sort field text;

[0018] The w-sort-icon class defines the size, color and position of the sort icon;

[0019] The w-sort-icon-active class defines the activation style of the sort icon in the current sort state.

[0020] Furthermore, the WSortGroup.vue component serves as a parent component that accommodates several WSort.vue components. It uses the slot mechanism in Vue3 to receive a custom sorting group. It has no additional page element content and uses the w-sort-group class to define the arrangement position and relative spacing of several sorting items in the container.

[0021] Further, in step S2, the sort item components include type, asc, desc, isActive, and toggleValueAndType;

[0022] The type field is used as an identification field of the sorting method of the sorting items, indicating how the sorting items are sorted;

[0023] The asc field is used as an ascending sorting identification field for the sorting items;

[0024] The desc field is used as a sorting identification field for descending order of sorting items;

[0025] The isActive field is used as an identifier of the activation status of the sorting item. This field is effective when the sorting component has multiple sorting items. When there is only one sorting item, the value of this field should always be true.

[0026] The toggleValueAndType attribute is used as an internal listening event for the sorting item. When a sorting click event occurs, this event is triggered and the relevant sorting information is passed to the parent component WSortGroup.vue.

[0027] Among them, the type, asc, and desc fields are configuration item fields, which are the attributes exposed by the sort item component and are used to reference other components of the sort item component for initialization configuration.

[0028] Further, in step S3, the sorting group container component includes defaultType, defaultValue, onSort, sortType and sortValue;

[0029] The defaultType field is used as a default sorting mode identification field of the combined sorting component, and is used to reference the initial value of the component setting of the combined sorting component;

[0030] The defaultValue field is used as a default sort type identification field of the combined sort component, and is used to reference the initial value of the component setting of the combined sort component;

[0031] The onSort field is a method field for obtaining backend data items, which is used to reference the callback method of the component setting sorting event of the combined sorting component. When the sorting method changes, the method for obtaining backend data items is called;

[0032] The sortType field is used as an identification field of the current sorting method;

[0033] The sortValue field serves as an identification field of the current sort type.

[0034] Furthermore, in step S4, during the use of the combined sorting component, two data flows will occur, namely, data is transferred from the parent component to the child component and from the child component to the parent component.

[0035] Furthermore, there are four types of inter-component communications depending on the communicating parties;

[0036] The first is that the referencer of the combined sorting component passes the initialization configuration item field to the sorting group container component;

[0037] The second place is that the referencer of the combined sorting component passes the initialization configuration item field to the sorting item component;

[0038] The third is that the sorting group container component initializes the sorting item component according to the default sorting configuration passed by the referrer, and subsequently manages the unified status of each sorting item;

[0039] The fourth place is that when the user clicks on a sorting item component and a sorting event is triggered, the sorting item component transmits the corresponding sorting information to the sorting group container component;

[0040] The first three communication scenarios are all about communication from parent components to child components, and the fourth communication scenario is about communication from child components to parent components.

[0041] Furthermore, according to the first to fourth communication scenarios, the following communication mechanisms are defined:

[0042] The props mechanism ensures that the referencer of the composite sorting component passes the initialization configuration item fields to the sorting group container component and passes the initialization configuration item fields to the sorting item component;

[0043] The dependency injection mechanism is used to ensure that the sorting group container component initializes the sorting item component;

[0044] The emits mechanism is used to ensure that the sorting item component passes the corresponding sorting information to the sorting group container component.

[0045] An apparatus for combining and sequencing components, comprising: at least one memory and at least one processor;

[0046] The at least one memory is used to store a machine-readable program;

[0047] The at least one processor is configured to call the machine-readable program to execute a method for combining and sequencing components.

[0048] Compared with the prior art, the method and device for combining and sorting components of the present invention have the following outstanding beneficial effects:

[0049] The present invention fills the gap in the existing UI component library. Since the existing UI component library lacks the implementation of the combination sorting component, the present invention will have the opportunity to fill this gap. It also provides great convenience and good reference for developers who are looking for this function or design. And for the current front-end projects based on frameworks such as React and Angular, when there is a need to develop a combination sorting component, it can provide a clear reference idea.

[0050] To solve user needs, in many application scenarios, there is a need to use combined sorting to display several data in different orders, and the present invention will provide a good solution.

[0051] The present invention is a ready-to-use component that can be easily and quickly introduced and used in Vue3 projects, thereby improving development efficiency. In addition, it supports secondary development to meet personalized needs. BRIEF DESCRIPTION OF THE DRAWINGS

[0052] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0053] Attached Figure 1 is a flow chart of a method for combining sorting components;

[0054] Attached Figure 2 It is a schematic diagram of the structure in a method of combining and sorting components;

[0055] Attached Figure 3 It is a schematic diagram of the communication process in a method of combining sorting components. DETAILED DESCRIPTION

[0056] In order to enable those skilled in the art to better understand the solution of the present invention, the present invention is further described in detail below in conjunction with specific implementation methods. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0057] A best embodiment is given below:

[0058] like Figure 1 As shown, a method for combining sorting components in this embodiment is implemented based on the Vue3 framework, using the grammatical rules and communication mechanism of Vue3, but the implementation idea can be applied to frameworks such as Vue2 or React, Angular, etc., and has the following steps:

[0059] S1. Define component structure and style;

[0060] like Figure 2 As shown, two components, WSortGroup.vue and WSort.vue, are generated, where WSort.vue is a sorting item component and WSortGroup.vue is a sorting group container component. The entire combined sorting component is composed of a sorting group container component and a sorting item component.

[0061] The WSort.vue component defines the page content structure and style of a single sort item, which is composed of the sort field text identifier and ascending and descending icon identifiers, and uses classes such as w-sort, w-sort-label, w-sort-icon, and w-sort-icon-active to define the style of a single sort item.

[0062] The w-sort class is the top-level style of the sorting item. It defines the size of the sorting item, the inner and outer margins, and the page arrangement position of the sorting field text and the sorting icon.

[0063] The w-sort-label class defines the size and color of the sort field text;

[0064] The w-sort-icon class defines the size, color, position, etc. of the sort icon;

[0065] The w-sort-icon-active class defines the activation style of the sort icon in the current sort state, such as color.

[0066] The WSortGroup.vue component is the parent component that holds several WSort.vue components. It mainly uses the slot mechanism in Vue3 to receive custom sorting groups. It has no additional page element content and uses the w-sort-group class to define the arrangement position and relative spacing of several sorting items in the container.

[0067] This application provides a set of default styles. In addition, users can adjust the styles according to their own project styles and set target styles by setting custom style classes.

[0068] S2. Define the component data structure of a single sort item (i.e. WSort.vue component);

[0069] The sorting item component mainly includes attributes such as type, asc, desc, isActive, toggleValueAndType, etc.

[0070] The type field is used as the identification field of the sorting method of this sorting item, indicating how this sorting item is sorted;

[0071] The asc field is used as the ascending sort identification field for this sort item;

[0072] The desc field is used as the identification field for descending sorting of this sort item;

[0073] The isActive field is used as an identifier of the activation status of the sorting item. This field is effective when the sorting component has multiple sorting items. When there is only one sorting item, the value of this field should always be true.

[0074] The toggleValueAndType attribute serves as the internal listening event of the sort item. This event is triggered when a sort click event occurs, and the relevant sort information is passed to the parent component WSortGroup.vue.

[0075] Among them, the type, asc, desc and other fields are used as configuration item fields, which are the attributes exposed by the sorting item component and are used to initialize the configuration of other components that reference this component.

[0076] S3. Define the data structure of the sorting group container component (i.e. WSortGroup.vue component);

[0077] The sorting group container component mainly includes defaultType, defaultValue, onSort, sortType, sortValue and other attributes.

[0078] The defaultType field is used as the default sorting method identification field of the combined sorting component, and is used to set the initial value of the component that references this combined sorting component;

[0079] The defaultValue field is used as the default sort type (ascending / descending sort) identification field of the combined sort component, and is used to set the initial value of the component that references this combined sort component;

[0080] The onSort field is a method field for obtaining backend data items. It is used to set the callback method of the sorting event for the component that references this combined sorting component. This method is called when the sorting method changes.

[0081] The sortType field is used as the identification field of the current sorting method;

[0082] The sortValue field is used as the identification field of the current sort type.

[0083] Among them, defaultType, defaultValue, onSort and other fields are used as configuration item fields, which are the properties exposed by the sorting group container component and are used to initialize the configuration of other components that reference this component.

[0084] S4. Define the communication mechanism between components;

[0085] like Figure 3 As shown, during the use of the combined sorting component, two data flows will occur, namely, data is passed from the parent component to the child component and from the child component to the parent component.

[0086] There are four types of inter-component communications depending on the communicating parties;

[0087] The first is that the referencer of the combined sorting component passes the initialization configuration item fields to the sorting group container component, namely the default sorting mode, default sorting type, sorting callback method and other fields;

[0088] The second place is that the referencer of the combined sorting component passes the initialization configuration item fields to the sorting item component, namely the sorting item identifier, ascending sort identifier, descending sort identifier and other fields;

[0089] The third is that the sorting group container component initializes the sorting item component according to the default sorting configuration passed by the referrer, including the relevant sorting activation state style, and the subsequent unified state management of each sorting item;

[0090] The fourth is that when the user clicks on a sorting item component and the sorting event is triggered, the sorting item component transmits the corresponding sorting information, that is, the sorting method, sorting type, etc., to the sorting group container component.

[0091] The first three communication scenarios are all about communication from parent components to child components, and the fourth communication scenario is about communication from child components to parent components.

[0092] Based on the above analysis, the following communication mechanisms are defined for the above four communication scenarios:

[0093] Adopt Vue3's props mechanism to ensure that the referencer of the combined sorting component passes the initialization configuration item fields to the sorting group container component and passes the initialization configuration item fields to the sorting item component;

[0094] Adopt Vue3's dependency injection mechanism to ensure that the sorting group container component initializes the sorting item component;

[0095] The emits mechanism of Vue3 is used to ensure that the sorting item component passes the corresponding sorting information to the sorting group container component.

[0096] Based on the above method, a device for combining and sorting components in this embodiment includes: at least one memory and at least one processor;

[0097] The at least one memory is used to store a machine-readable program;

[0098] The at least one processor is configured to call the machine-readable program to execute a method for combining and sequencing components.

[0099] The above-mentioned specific implementations are only specific cases of the present invention. The patent protection scope of the present invention includes but is not limited to the above-mentioned specific implementations. Any technical solutions that conform to the above-mentioned specific implementations of the present invention and any appropriate changes or substitutions made by ordinary technicians in the relevant technical field shall fall within the patent protection scope of the present invention.

[0100] Although 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 present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A method for combining and sorting components, characterized in that: The steps are as follows: S1. Define component structure and style; S2. Define a single sort item component data structure; S3, define the sorting group container component data structure; S4. Define the communication mechanism between components.

2. A method for combining and sequencing components according to claim 1, characterized in that: In step S1, two components, WSortGroup.vue and WSort.vue, are generated. The WSortGroup.vue is a sorting group container component, and the WSort.vue is a sorting item component. The entire combined sorting component is composed of the sorting group container component and the sorting item component.

3. A method for combining and sequencing components according to claim 2, characterized in that: The WSort.vue component defines the page content structure and style of a single sort item, which is composed of a sort field text identifier and ascending and descending identifier icons, and uses w-sort, w-sort-label, w-sort-icon and w-sort-icon-active classes to define the style of a single sort item; The w-sort class, as the top-level style of the sorting item, defines the size, inner and outer margins of the sorting item, and the page arrangement position of the sorting field text and the sorting icon; The w-sort-label class defines the size and color of the sort field text; The w-sort-icon class defines the size, color and position of the sort icon; The w-sort-icon-active class defines the activation style of the sort icon in the current sort state.

4. A method for combining and sequencing components according to claim 3, characterized in that: The WSortGroup.vue component serves as a parent component that holds several WSort.vue components. It uses the slot mechanism in Vue3 to receive a custom sorting group. It has no additional page element content and uses the w-sort-group class to define the arrangement position and relative spacing of several sorting items in the container.

5. A method for combining and sequencing components according to claim 4, characterized in that: In step S2, the sort item components include type, asc, desc, isActive, and toggleValueAndType; The type field is used as an identification field of the sorting method of the sorting items, indicating how the sorting items are sorted; The asc field is used as an ascending sorting identification field for the sorting items; The desc field is used as a sorting identification field for descending order of sorting items; The isActive field is used as an identifier of the activation status of the sorting item. This field is effective when the sorting component has multiple sorting items. When there is only one sorting item, the value of this field should always be true. The toggleValueAndType attribute is used as an internal listening event for the sorting item. When a sorting click event occurs, this event is triggered and the relevant sorting information is passed to the parent component WSortGroup.vue. Among them, the type, asc, and desc fields are configuration item fields, which are the attributes exposed by the sort item component and are used to reference other components of the sort item component for initialization configuration.

6. A method for combining and sequencing components according to claim 5, characterized in that: In step S3, the sorting group container component includes defaultType, defaultValue, onSort, sortType and sortValue; The defaultType field is used as a default sorting mode identification field of the combined sorting component, and is used to reference the initial value of the component setting of the combined sorting component; The defaultValue field is used as a default sort type identification field of the combined sort component, and is used to reference the initial value of the component setting of the combined sort component; The onSort field is a method field for obtaining backend data items, which is used to reference the callback method of the component setting sorting event of the combined sorting component. When the sorting method changes, the method for obtaining backend data items is called; The sortType field is used as an identification field of the current sorting method; The sortValue field serves as an identification field of the current sort type.

7. A method for combining and sequencing components according to claim 6, characterized in that: In step S4, during the use of the combined sorting component, two data flows will occur, namely, data is transferred from the parent component to the child component and from the child component to the parent component.

8. A method for combining and sequencing components according to claim 7, characterized in that: There are four types of inter-component communications depending on the communicating parties; The first is that the referencer of the combined sorting component passes the initialization configuration item field to the sorting group container component; The second place is that the referencer of the combined sorting component passes the initialization configuration item field to the sorting item component; The third is that the sorting group container component initializes the sorting item component according to the default sorting configuration passed by the referrer, and subsequently manages the unified status of each sorting item; The fourth place is that when the user clicks on a sorting item component and a sorting event is triggered, the sorting item component transmits the corresponding sorting information to the sorting group container component; The first three communication scenarios are all about communication from parent components to child components, and the fourth communication scenario is about communication from child components to parent components.

9. A method for combining and sequencing components according to claim 8, characterized in that: According to the first to fourth communication scenarios, the following communication mechanisms are defined: The props mechanism ensures that the referencer of the composite sorting component passes the initialization configuration item fields to the sorting group container component and passes the initialization configuration item fields to the sorting item component; The dependency injection mechanism is used to ensure that the sorting group container component initializes the sorting item component; The emits mechanism is used to ensure that the sorting item component passes the corresponding sorting information to the sorting group container component.

10. A device for combining and sorting components, characterized in that: include: at least one memory and at least one processor; The at least one memory is used to store a machine-readable program; The at least one processor is configured to call the machine-readable program to execute the method according to any one of claims 1 to 9.

Images