可重用性的6个级别

我们所有人都希望编写更少的代码，但要做更多的事情。

为了实现这一点，我们构建了组件，以便可以多次重用它们。

一些组件只需要基本的可重用性。

其他人则需要更复杂的技术才能充分利用它们。

我已经确定了6个不同级别的可重用性，但是可能还有更多我错过的地方。

这是有关级别的基本概述。我即将举行的课程“ 可重用组件 ”探讨了每个组件以及如何充分利用它们。

1.模板化

通过这种技术，我们将其包装在其自己的组件中，而不是到处复制+粘贴代码。

当我们重用该组件（而不是直接使用代码）时，它给我们带来了两个好处：

将来进行更改要容易得多，因为我们只需要在一个地方做 我们不必记住将代码复制到的数十个（或数百个）地方 这是最基本的，也是最经常谈论的可重用性形式。

但是更高的级别会变得更加有趣...

2.配置

对于某些组件，我们需要对其工作方式有所不同。

甲Button组件可能有一个主版本，以及一个唯一的图标版本。但是，我们没有为每个版本创建全新的组件，而是使用道具在不同类型之间进行切换。

添加这些道具通常不会给组件增加太多，但可以为我们提供更多使用该组件的灵活性。整洁

注意：这与将loadingprop 用于状态或数据（例如prop或disabledprop）不同。

3.适应性

配置的最大问题是缺乏远见。您需要预见将来的需求，并通过放置这些道具将它们构建到组件中。

但是，如果您使组件具有适应性，则无需更改组件即可使用从未想到的用例。

我们通过使用插槽将标记的一部分从父代传递到组件来实现。

例如，我们可以使用插槽代替text在Button组件中使用道具default：

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

现在，我们不仅限于传递a string或numberin。

如果我们想添加loading微调器而不必修改我们的Button组件，则可以这样做：

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

4.反转

无需将完整的标记块传递给我们的子组件，我们可以传递一组有关如何呈现的指令。

这就像遵循食谱而不是订购外卖。当您遵循食谱时，要做的工作要多一些，但是您可以完全掌控自己的制作方式。您可以随时进行调整，也可以完全放弃该食谱。

我们使用作用域插槽来为我们的组件增加更大的灵活性。

5.扩展

通过适应性和反转性，我们拥有必要的技术，可以最大限度地提高组件的可重用性。

下一步是将这些技术应用于整个组件，以便我们更轻松地扩展其行为。

我们使用命名槽在组件中添加一个或多个扩展点。仅适应性和反转本身给我们提供了扩展行为的一种选择，而拥有多个扩展点则为我们提供了许多不同的选择。

在这里，我们有一个Modal与组件header，default以及footer：

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

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

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

这是一个相当简单的扩展示例，但是我们已经有几个扩展该组件的选项：

只需覆盖default广告位即可添加我们的内容 添加内容但也覆盖header广告位 内容和footer添加不同按钮的插槽 内容无一不header与footer插槽的东西更多的自定义 （如果不使用插槽，我们可以添加更多default，但这在这里不太可能）

您不必扩展此组件的行为，也可以扩展其一部分。无论哪种方式，您都将获得很大的灵活性和大量的代码重用性。

6.嵌套

通过将这些扩展点通过一层或多层组件，我们将得出扩展的结论。

乍一看听起来很疯狂，但是它非常有用，尤其是在大中型应用程序中。

您从一个基本组件开始，该组件的功能相当普遍。下一个组件更加具体，以几种方式扩展了基础组件。然后不断，直到您拥有完成实际工作的最终组件。

这正是我们从非常笼统的内容Animal变为更具体的内容Mammal，然后Dog最终降落到的方式Poodle。如果我们需要的只是一个Poodle组件，那么我们在这里浪费时间，但是在大型应用程序中，我们需要在相同的基本概念上进行很多改动。

我们可以扩展Dog组件以获得Corgi和Beagle。或扩展Mammal组件以获得Cat组件，然后让我们添加Tiger和Lion组件。

这是我遇到的最先进的可重用性应用程序。我用这个技术有很多在我自己的工作。

结论

这是我遇到的6个可重用性级别。

我可能会错过一些，我当然不会说这是一份详尽的清单，但是它足够完整，可以使用。

这样的简短文章并不能使他们公平，但是我将在我即将开始的课程Reusable Components中更深入地探讨它们。