关于javascript:组件的可重用性6个级别的见解

8次阅读

共计 2690 个字符，预计需要花费 7 分钟才能阅读完成。

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

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

最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。

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

咱们所有人都心愿编写更少的代码，同时也要做更多的事件。为了实现这一点，咱们构建了组件，以便能够屡次重用它们。

有些组件只须要根本的可重用性，而另一些则须要更简单的重构技术，咱们能力充沛复用它。

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

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

当咱们重用该组件（而不是间接应用代码）时，它为咱们带来了两个益处：

未来进行更改就会容易得多，因为咱们只须要在一个中央更改
咱们不用记住每个反复代码复被复制到了哪些地方

这是最根本的，也是最常常议论的可重用性模式。

对于某些组件，咱们须要依据需要对它们的工作形式进行批改，如:

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

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

留神: 这不同于应用 prop 来保留状态或数据，比方loading prop 或disabled prop。

可配置 的最大问题是不足远见。咱们须要预感未来的需要，并通过搁置对应的 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>

除了通过 插槽 传递残缺的标记块给咱们的子组件，咱们还能够传递一组无关如何渲染的指令。

这就像咱们依据食谱来做菜，而不是叫外卖。当咱们遵循食谱时，须要做更多的工作，然而咱们齐全能够按本人的节奏来制制作，咱们能够随时进行调整，也能够齐全放弃不按食谱的流程来。

咱们应用 作用域插槽 来为咱们的组件减少更大的灵活性。

通过 适应性 和反转性，咱们领有必要的一些技术根底，这些技能能够最大限度地进步组件的可重用性。

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

咱们应用 命名插槽 在组件中增加一个或多个扩大点。仅 适应性 和反转性 自身给咱们提供了扩大行为的一种抉择，而领有多个扩大点则为咱们提供了许多不同的抉择。

这里，咱们有一个 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 slot 即可增加咱们的内容
能够通过插槽名来笼罩 header 的内容
能够通过插槽名来笼罩 footer 的内容，其内容还是以不同格调按钮为主
header和 footer的插槽更多是用于自定义

你不用扩大此组件的行为，但也能够扩大其一部分。无论哪种形式，咱们都能取得很大的灵活性和大量的代码重用性。

在扩大之上更高级重用性就是嵌套，咱们能够多个根本组件为根底，一层嵌套一层，一开始可能听起来很疯狂，但它十分有用，特地是在大中型应用程序中。

咱们从一个通过 根底组件 开始，该组件的性能相当广泛。下一个组件就更加具体，以几种形式扩大了 根底组件 。而后一直以后面 根底组件 为底往上扩大，直到咱们领有实现理论工作的最终组件。

这相似咱们从十分一般的 动物 (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 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。

正文完