组件的可重用性，6个级别的见解!

作者：Michael Thiessen
译者：前端小智
来源：news

点赞再看，微信搜索【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

github 地址：https://github.com/qq44924588...

我们所有人都希望编写更少的代码，同时也要做更多的事情。为了实现这一点，我们构建了组件，以便可以多次重用它们。

有些组件只需要基本的可重用性，而另一些则需要更复杂的重构技术，我们才能充分复用它。

这里有6个不同级别的可重用性概念，大家先来体会体会，后续更新会一个一个的讲。

1.模板化

通过模板化，我们将一些重复性高的代码包装在其自己的组件中，而不是在周围到处复制和粘贴代码。

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

1. 将来进行更改就会容易得多，因为我们只需要在一个地方更改
2. 我们不必记住每个重复代码复被复制到了哪些地方

这是最基本的，也是最经常谈论的可重用性形式。

2. 可配置

对于某些组件，我们需要根据需求对它们的工作方式进行修改，如:

Button组件默认有一个主版本，也有一个带有图标版本。但我们没有为每个版本创建全新的组件，而是指定 props 做到不同类型之间切换。

添加这些props通常不会给组件增加很大的复杂度，同时，又能给我们在使用组件方面带来更多在的灵活性。

注意:这不同于使用prop来保存状态或数据，比如loading prop 或disabled prop。

3.适应性

可配置的最大问题是缺乏远见。 我们需要预见将来的需求，并通过放置对应的 prop 将它们构建到组件中。

但是，如果你的组件具有足够适应性，则无需更改组件即应对未来的需求。

为了让我们的组件具有足够的适应性，我们可以使用 插槽 来实现。

例如，我们可以使用默认的插槽来代替在传入Button组件的 text ：

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

现在我们不局限于传入的类型是 string 还是 number。

如果我们想在不修改 Button 组件的情况下添加loading ，我们可以这样做:

<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>

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

1. 只需覆盖default slot即可添加我们的内容
2. 可以通过插槽名来覆盖 header 的内容
3. 可以通过插槽名来覆盖 footer 的内容，其内容还是以不同风格按钮为主
4. header和 footer的插槽更多是用于自定义

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

6. 嵌套

在扩展之上更高级重用性就是嵌套， 我们可以多个基本组件为基础， 一层嵌套一层，一开始可能听起来很疯狂，但它非常有用，特别是在大中型应用程序中。

我们从一个通过基础组件开始，该组件的功能相当普遍。 下一个组件就更加具体，以几种方式扩展了基础组件。 然后不断以前面基础组件为底往上扩展，直到我们拥有完成实际工作的最终组件。

这类似我们从非常普通的动物(Animal )到更特定的哺乳动物(Mammal )，然后是狗(Dog )，最后止于贵宾犬(Poodle)的方式。 如果我们需要的只是贵宾犬(Poodle)组件，看上去，我们整这么基础组件就是浪费时间。但是在大型应用程序中就不一样了，我们需要在相同的基本概念上进行多次更改，来满足不同的个性化需求，这时这种以基础组件嵌套的思想就很重要。

我们可以扩展犬类(Dog)组件来获得柯基犬(Corgi )和比格犬(Beagle)组件。或者扩展哺乳动物(Mammal )组件以获得猫(Cat )组件，这样就可以添加老虎(Tiger)和狮子(Lion)组件。

总结

以上是6个可重用性级别一些概述，当然很有可能会错过一些内容，但基本是可以为我们封装组件提供了一个大致思路，也是很不错的方式。

人才们的 【三连】 就是小智不断分享的最大动力，如果本篇博客有任何错误和建议，欢迎人才们留言，最后，谢谢大家的观看。

---

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：https://news.knowledia.com/US...

交流

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复福利，即可看到福利，你懂的。