Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to design components". In daily operation, I believe many people have doubts about how to design components. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to design components"! Next, please follow the editor to study!

First, write in front

Today's web development is divided into web back-end development and web front-end development through front-end separation technology. It is worth pointing out that web front-end development is no longer the traditional development mode, but has become web client development. Students who have experience in client development should know the difference between the two. Client development focuses on:

Application lifecycle

Componentization

Development Mode and Packaging method

Componentization is the most important content of client development. Designing a set of component system with high reuse and good expansibility can significantly improve the development efficiency and reduce the maintenance cost in the later stage.

Second, a design case of note-taking component

Take the note app I am using as an example. How can the reading and writing area of the note shown above be abstracted into a component? Let's analyze it step by step.

1. The simplest api

Let's give the component a name (it's important) and call it Note. Whether in the reading state or editing state, the component displays the contents of the note, because the note object should be passed in through the component's interface, because we designed the first api for the component:

Property indicates whether the type is required data note object data object is

Next, let's simply use this component:

To be compatible with vue and react readers, this page uses JSX syntax

Const note = {title: how do I make a component? .md, content:}

In this way, a minimalist api note component is done, its interface is very simple, only need to provide a data attribute, you can display the notes, and you can click to edit to write.

In general, if there are no more requirements, our note components will be designed here. * * when designing components, be sure to follow the principle of minimization, that is, throwing as few interfaces as possible. * * because there may be many users using components, once the component author accidentally throws out an unreasonable interface, it is almost impossible to modify it later (users can only be reminded by marking outdated methods, but this is often helpless).

two。 Meet a variety of situations of data acquisition

Now, the user of the component can use the note component through a very concise api, but now there is a problem: some component users only get the id of the note and want to use the component by passing it directly into the id.

At this point, as component authors, we assessed that this requirement was reasonable, so we extended the api of the note component:

Attribute indicates whether the type is required with default values data note object object no nulldataId note object idstring no null

You can now use the component by passing in id:

Const noteId = 123

Note that both attributes in api are optional because you don't know which attribute the user will pass in. For the sake of program rigor, you should verify that neither parameter is passed within the component and tell the caller by throwing an error.

This is a component design technique that makes invocation easier by supporting multiple data sources. However, this design also has its disadvantages. If the extension of this compatibility is too much, the internal logic of the component will become complex, and the api will also become difficult to understand. Therefore, we should be careful not to overdo the api extension of compatibility.

3. Compatible with different modes

The use of the component is as elegant and simple as ever, but now some users have put forward new requirements: because the component supports both reading and editing modes, and when using it, it is not editable for other people's notes. can only one reading mode be supported in a specified scenario?

The note-taking component supports both reading and editing because of its internal support for two modes. Therefore, it is reasonable that the caller only wants to use one mode. So, we continue to extend the component's api:

Property indicates whether the default mode mode is required for the type. The first item of the array is used as the initial mode. The parameter cannot be empty. The array array No [write, read]

Now, for users who only want to use read mode, you can call:

Const note = {} const mode = [read]

When designing api, we supported more situations while meeting the requirements. First of all, the user may only use edit mode, because the mode parameter supports arbitrary combination of various modes, so this situation can be satisfied. In addition, if the component extends more schemas later, the api can still meet the requirements, just adding more schema items to the mode array. A better design here is that it is also necessary to determine which pattern is the initial pattern when multiple patterns are used, so taking the first term of the mode array as the initial pattern in multiple patterns not only meets the requirements, but also achieves the principle of minimizing api design.

Now, we have extended the needs of users to support not only reading patterns, but also arbitrary combinations of various patterns and initial patterns, but this is not enough. Component designers should think of a longer-term situation for the requirements. For this example, we can also extend a pattern change event for the component. Allows the caller to capture when the note component switches from read-> edit or edit-> read (this combination will increase as the pattern expands):

Event description indicates that the callback parameter modeChange is triggered when the mode is switched (from: string, to: string) from indicates the mode before the switch, and to indicates the mode after the switch

The caller may do some specific work when catching a mode switch event:

Function handleModeChange (from, to) {/ /...}

4. More support

Editing notes in the editor is of the html or markdown type, and the note component supports exporting notes as an PDF document. Therefore, at design time, we can abstract some of the capabilities of the component as api, and extend the api of the component again:

Method explains whether the parameter exportPDF export notes to PDF file-toggleFullscreen toggles full screen display (value: boolean)

When designing components, we can design the capabilities of predictable components as api. It should be noted that the parameters and return values of the method are also part of api and should be designed carefully.

In addition to extending the capabilities of the component, we can also extend the view of the component. Notice the toolbar to the right of the read button? We assume that this part of the view is not a note-taking component, but is rendered through the api extension, which is the sub-view design of the component, which is called the slot in the componentization of the web front end. We can expand the slot of a toolbar for the note component:

Slot description parameters toolbar toolbar subview {data}

When the caller wants to expand the toolbar of the note component, you can use:

Const note = {}

In this way, callers can render what they want in the toolbar according to their own needs.

III. Four elements of component design

The above case describes the whole process of component design, and designs a component with high reuse and good expansibility step by step by analyzing the needs of users (or the requirements that may arise in the future). If you are a novice in component design, how should you think and design a good component?

1. Design first, then implement

We discuss the design of components throughout the article, but in practice, many friends will complete the production of a component by designing while implementing, which is unreasonable, because of the limitations of their own ability and vision, implementation may interfere with your design. For the following two classic contradictions, I hope readers can choose the latter and focus on the pursuit of rationality.

This is more convenient to achieve, it is better to throw this parameter and let the user pass it in!

This design is more reasonable, although it may be more difficult to achieve, but I can learn documents, ask others to achieve it, or let others directly achieve it.

* * it is more difficult to ask a problem than to solve it. * * Design is difficult to implement, and you should spend 70% of your time designing rather than implementing it. Some designers do not even participate in the implementation, and the identities of designers and implementers are changing at any time, and the thoughtful implementers themselves are designers.

two。 Four elements of component design

Attribute

Method

Event

Subview (slot)

The above cases basically cover these four elements, which together constitute the api of the component. It is important to note that in addition to the basic four elements, we also need to note that these are also part of the component api:

The type of the property, whether it is required, and the default value (no longer change after the attribute type is determined)

Parameters of the method, return value (changes need to be taken into account)

Parameters of the event callback function

Local parameters that can be obtained by the slot

In the design, we should be careful to face every element of api, which link has a design defect, it is like a pain in the throat for the caller.

IV. Ultimate thinking: object-oriented

Although we describe the method of component design through a series of theories, it is still difficult for beginners to design a good component, it takes a lot of experience to design a good component, and beginners often consider it incomprehensible. or because of the lack of understanding of the requirements, it is impossible to predict future changes.

In spite of this, beginners still have to patiently learn the design of components. After a period of accumulation, I summed up the ultimate thinking of designing components. Applying the idea of object-oriented to component design will get twice the result with half the effort.

In the field of development, learning to think is more important than working hard. When we apply this theory to component design, how to design a component through object-oriented thinking?

Although we emphasize the use of object-oriented thinking to design components, but as if object-oriented thinking is more advanced than component design, we certainly do not recommend that you use more obscure theories to guide component design. Here, we personify the object-oriented and extract a way of thinking of connecting ideas in the natural world.

Let's use this method to design a courier's component:

First of all, the delivery guy has his basic information, which is the attribute of the component, including his employer, length of service, name, contact information and so on. In addition, the express delivery guy has some unique behaviors, such as sending express delivery, receiving parcels, etc., we can extract this part into the component method, for example, we call the express delivery guy's method of receiving parcels, which has two parameters. the first parameter is what I want to send, that is, the package, and the second parameter is the express bill, which describes the relevant information of delivery. In addition to the basic information and some behavior, the courier component also has some unique events. When our package arrives, he will call us. Here, the component throws an event of express arrival. The parameters of the event are the express order and the package. The express order describes the delivery information of the package, and the package is the recipient's thing described in the express order. Finally, does the courier component have a child view? Yes. In addition to being called by our ordinary users, the package will also be called by express companies. Different delivery companies will package delivery boys in different ways (for example, through different logo of different clothes). Therefore, when invoking this component, express companies will transfer their clothes into a sub-view called costume, so that delivery boys of different companies will have different costumes.

You can use the idea of natural world association to think about all the problems related to object-oriented and componentization. As long as the computer world is still built by human beings, we can still perceive the computer world according to the rules of the natural world.

The binary world has never been cold and ruthless, and every binary string is integrated into the encoder's mode of thinking and values.

At this point, the study on "how to design components" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.