对于组件的可重用性，大佬给出来6个级别的看法，一块儿过目一下！

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

点赞再看，微信搜索 【大迁世界】 关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub github.com/qq449245884… 上已经收录，文章的已分类，也整理了不少个人文档，和教程资料。

咱们全部人都但愿编写更少的代码，同时也要作更多的事情。为了实现这一点，咱们构建了组件，以即可以屡次重用它们。

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

这里有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。

原文：news.knowledia.com/US/en/the-6…

---

交流

文章每周持续更新，能够微信搜索 【大迁世界 】 第一时间阅读，回复 【福利】 有多份前端视频等着你，本文 GitHub github.com/qq449245884… 已经收录，欢迎Star。