Detailed explanation of 6 different levels of component reusability concepts

This article will give you a detailed introduction to the concept of component reusability at six different levels. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

#We all want to write less code while also doing more. To achieve this, we build components so that they can be reused multiple times.

Some components only require basic reusability, while others require more complex refactoring techniques before we can fully reuse it.

There are 6 different levels of reusability concepts. Let’s experience them first, and we will talk about them one by one in subsequent updates.

1. Templating

With templating, we wrap some highly repetitive code in its own component instead of copying and pasting it all around code.

When we reuse the component (instead of using the code directly), it gives us two benefits:

• It will be much easier to make changes in the future , since we only need to change it in one place

• We don’t have to remember where each duplicate code was copied

This is the most The basic and most commonly talked about form of reusability.

2. Configurable

For some components, we need to modify their working methods according to needs, such as:

The Button component has a main version by default and a version with an icon. But instead of creating a completely new component for each version, we specify props to switch between different types.

Adding thesepropsusually does not add a lot of complexity to the component, and at the same time, it gives us more flexibility in using the component.

Note: This is different from using prop to save state or data, such as a loading prop or a disabled prop.

3. Adaptability

The biggest problem with configurability is a lack of foresight. We need to anticipate future needs and build them into the component by placing the corresponding prop.

However, if your components are adaptable enough, you won't need to change them to handle future needs. In order to make our components sufficiently

adaptable

, we can use slots to achieve it. For example, we can use the

default slot

instead of the text passed in to the Button component: <pre class='brush:php;toolbar:false;'>&lt;!-- Button.vue --&gt; &lt;template&gt; &lt;button class=&quot;btn btn--default&quot; @click=&quot;$emit(&amp;#39;click&amp;#39;)&quot; &gt; &lt;slot /&gt; &lt;/button&gt; &lt;/template&gt;</pre> Now we are not limited to whether the type passed in is

string

or number. If we want to add

loading

without modifying the Button component, we can do this: <pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;Button&gt; &lt;img src=&quot;/static/imghwm/default1.png&quot; data-src=&quot;spinner.svg&quot; class=&quot;lazy&quot; v-if=&quot;loading&quot; /&gt; Click Me &lt;/Button&gt; &lt;/template&gt;</pre>

4. Inverse Transformation

In addition to passing the full markup block to our child component via the

slot

, we can also pass a set of instructions on how to render. It's like we cook from a recipe instead of ordering takeout. When we follow a recipe, it takes more work, but we can make it at our own pace. We can make adjustments at any time, or we can abandon the non-recipe process entirely.

We use

scope slots

to add greater flexibility to our components.

5. Extension

Through

Adaptability

and Reversibility, we have some necessary technical foundations, these Skills maximize component reusability. The next step is to apply these techniques to the entire component so that we can more easily extend its behavior.

We use

named slots

to add one or more extension points in the component. While Adaptability and Reversibility by themselves give us one option for extending behavior, having multiple extension points gives us many different options. Here, we have a

Modal

component which contains header, default and footer: <pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div class=&quot;modal&quot;&gt; &lt;slot name=&quot;header&quot;&gt; &lt;h2 id=&quot;nbsp-title-nbsp&quot;&gt;{{ title }}&lt;/h2&gt; &lt;/slot&gt; &lt;!-- Default slot for main content --&gt; &lt;slot /&gt; &lt;slot name=&quot;footer&quot;&gt; &lt;Button @click=&quot;closeModal&quot;&gt; Close &lt;/Button&gt; &lt;/slot&gt; &lt;/div&gt; &lt;/template&gt;</pre> This is a fairly simple extension example where we already have a few options for extending this component:

Just override
• default slot

  to add Our content

can be overwritten by the slot name. The content of
• header

can be overwritten by the slot name. The content of
• footer

  is still mainly based on buttons of different styles. The slots of

• header

  and footer have been updated. Mostly for customizing

You don't have to extend the behavior of this component, but you can extend parts of it. Either way, we get a lot of flexibility and a lot of code reusability.

6. Nesting

The more advanced reusability on

Extension

is nesting. We can use multiple basic components as a basis. Nesting layers within layers may sound crazy at first, but it's very useful, especially in medium to large applications.

We start with a basic component that has a fairly common functionality. The next component is more specific, extending the base component in several ways. Then continue to expand upwards based on the previous Basic Components until we have the final component that completes the actual work.

This is similar to how we go from the very common

Animal to the more specific Mammal(Mammal), and then Dog(Dog), and finally ends in the Poodle(Poodle) way. If all we need is the Poodle component, it seems that our basic component is a waste of time. But is different in large applications. We need to make multiple changes on the same basic concept to meet different personalized needs. At this time, this basic groupThe idea of ​​nested pieces is very important.

We can extend the

Dog component to get the Corgi and Beagle components. Or extend the Mammal component to get the Cat component, so you can add Tiger and Lion Components.

Summary

The above is an overview of the 6 reusability levels. Of course, it is very likely that some content will be missed, but basically it can provide us with an encapsulated component. The general idea is also a very good way.

Original address: https://news.knowledia.com/US/en/the-6-levels-of-reusability-7ad7fc58842eb67fc320c8e11305e1010a11f251?source=rss

Author: Michael Thiessen

Translation address: https://segmentfault.com/a/1190000039699016

For more programming-related knowledge, please visit:

Programming Teaching! !

The above is the detailed content of Detailed explanation of 6 different levels of component reusability concepts. For more information, please follow other related articles on the PHP Chinese website!