The Six Levels of Reusability

栏目: IT技术 · 发布时间: 4年前

内容简介:We all want to write less code, but get more done.

This is an excerpt from my upcoming course Reusable Components

The Six Levels of Reusability

We all want to write less code, but get more done.

To make this happen, we build our components so they can be reused more than just once.

Some components only need basic reusability.

Others need far more complex techniques to get the most out of them.

I've identified 6 different levels of reusability, but there may be more that I've missed.

Here is a basic overview of the levels. My upcoming course, Reusable Components , explores each one and how to get the most out of them.

1. Templating

Instead of copy + pasting code around everywhere, with this technique we wrap it up inside it's own component.

When we reuse the component — and not the code directly — it gives us two benefits:

  1. Making changes in the future is much easier to do, since we only have to do it one place
  2. We don't have to remember the dozens (or hundreds) of places we've copied that code to

This is the most basic, and most often talked about form of reusability.

But the higher levels get a lot more interesting...

2. Configuration

With some components we'll need to have variations on how they work.

A Button component might have a primary version, as well as an icon-only version. But instead of creating entirely new components for each of these versions, we use props to switch between the different types.

Adding in these props doesn't usually add much to a component, but gives us far more flexibility in how that component can be used. Neat-o.

Note: This is different than using props for state or data, such as a loading prop or a disabled prop.

3. Adaptability

The biggest problem with configuration is lack of foresight. You need to anticipate future needs and build them into the component by putting in those props.

But if you make your component adaptable , it can allow for use cases that were never even thought of — without needing to change the component.

We do this by passing a chunk of markup from the parent to the component using a slot.

For example, instead of using a text prop in a Button component, we can use the default slot:

<!-- Button.vue -->
<template>
  <button
   
    @click="$emit('click')"
  >
    <slot />
  </button>
</template>

Now we're not limited to just passing a string or number in.

If we wanted to add in a loading spinner without having to modify our Button component, we can do that:

<template>
  <Button>
    <img
      v-if="loading"
      src="spinner.svg"
    />
    Click Me
  </Button>
</template>

4. Inversion

Instead of passing a complete chunk of markup to our child component, we can pass a set of instructions for how to render.

This is like following a recipe instead of ordering takeout. When you follow a recipe it's a little more work, but you have total control over what you're making. You can tweak things as you go, or throw out the recipe altogether.

We use scoped slots to add even more flexibility to our components.

5. Extension

With Adaptability and Inversion we have the necessary techniques to maximize the reusability of our components.

The next step is to apply these techniques all throughout our component so we can more easily extend it's behaviour.

We use named slots to add in one or more extension points in our component. Where Adaptability and Inversion on their own only give us one option to extend behaviour, having multiple extension points gives us many different options.

Here we have a Modal component with a header , default , and a footer :

<template>
  <div>
    <slot name="header">
      <h2>{{ title }}</h2>
    </slot>

    <!-- Default slot for main content -->
    <slot />

    <slot name="footer">
      <Button @click="closeModal">
        Close
      </Button>
    </slot>
  </div>
</template>

This is a fairly simple example of Extension, but we already have several options for extending this component:

  1. Just override the default slot to add in our content
  2. Add in content but also override the header slot
  3. Content and just the footer slot to add different buttons
  4. Content and both header and footer slots for something more custom

(We could add more if we didn't use the default slot, but that's unlikely here)

You don't have to extend the behaviour of this component, or you can extend parts of it. Either way, you get a lot of flexibility and a lot of code reuse.

6. Nesting

We'll take Extension to it's conclusion by passing these extension points through one or more layers of components.

It may sound crazy at first, but it's extremely useful, especially in medium to large applications.

You start with a base component that's fairly general in what it does. The next component is a little more specific, extending the base component in a few ways. Then on and on until you have the final component that does the real work.

It's exactly how we go from a very general Animal to a more specific Mammal and then Dog and eventually land on a Poodle . If all we need is a Poodle component, we're wasting our time here, but in large applications we need lots of variations on the same basic idea.

We can extend the Dog component to get a Corgi and a Beagle component. Or extend the Mammal component to get a Cat component, which lets us then add in Tiger and Lion components.

This is the most advanced application of reusability that I have come across. I use this technique a lot in my own work.

Conclusion

These are the 6 levels of reusability that I've come across.

I might have missed some, and I certainly wouldn't say that this is an exhaustive list, but it's complete enough to be useful.

A short article like this doesn't do them justice, but I go into them in much more depth in my upcoming course,Reusable Components.

Subscribe to my email list in order to get weekly updates and previews of the course!


以上所述就是小编给大家介绍的《The Six Levels of Reusability》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据结构与算法

数据结构与算法

卓滋德克 / 陈曙晖 / 清华大学出版社 / 2003-4-1 / 69.00

本书是一本介绍数据结构与算法的优秀书籍。 本书系统介绍了C++面向对象程序设计、算法复杂度、链表、栈、队列、递归、树、图、排序和查找算法、散列技术、数据压缩算法、内存管理等内容;尤其对递归算法进行了深入剖析。在附录中详细介绍了大O符号与标准模板库:在大多数章中提供了相应的实例分析和程序设计作业。 本书适合作为计算机软件专业或其他相关专业的教科书。对于需要参加计算机考试,......一起来看看 《数据结构与算法》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

html转js在线工具
html转js在线工具

html转js在线工具