6가지 수준의 구성요소 재사용성 개념에 대한 자세한 설명

이 글에서는 구성요소 재사용성의 6가지 수준에 대한 개념을 자세히 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

우리 모두는 더 적은 코드를 작성하면서 더 많은 작업을 수행하고 싶어합니다. 이를 달성하기 위해 우리는 여러 번 재사용할 수 있도록 구성요소를 구축합니다.

일부 구성 요소에는 기본적인 재사용성만 필요한 반면, 일부 구성 요소는 완전히 재사용하기 전에 더 복잡한 리팩토링 기술이 필요합니다.

재사용성 개념에는 6가지 레벨이 있습니다. 우선 이를 경험해 보고 후속 업데이트에서 하나씩 설명하겠습니다. 6个不同级别的可重用性概念，大家先来体会体会，后续更新会一个一个的讲。

1.模板化

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

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

• 将来进行更改就会容易得多，因为我们只需要在一个地方更改

• 我们不必记住每个重复代码复被复制到了哪些地方

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

2. 可配置

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

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

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

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

3.适应性

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

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

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

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

<!-- Button.vue -->
<template>
  <button
    class="btn btn--default"
    @click="$emit(&#39;click&#39;)"
  >
    <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>

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

• 只需覆盖default slot即可添加我们的内容

• 可以通过插槽名来覆盖 header 的内容

• 可以通过插槽名来覆盖 footer 的内容，其内容还是以不同风格按钮为主

• header和 footer

1. 템플릿 만들기

템플릿 기능을 사용하면 코드를 어디든 복사하여 붙여넣는 대신 자체 구성 요소에 매우 반복적인 코드를 래핑할 수 있습니다.

이 구성 요소를 재사용하면(코드를 직접 사용하는 대신) 다음 두 가지 이점을 얻을 수 있습니다.

향후 변경이 더 쉬워집니다. 한 곳에서만 변경하면 되므로 더 쉽습니다

각 중복 코드가 어디에 복사되었는지 기억할 필요가 없습니다

🎜🎜🎜이것이 가장 기본적이고 가장 자주 이야기되는 재사용 성 형태입니다. 🎜🎜🎜2. 구성 가능🎜🎜🎜일부 구성 요소의 경우 필요에 따라 작동 방식을 수정해야 합니다. 예: 🎜🎜Button 구성 요소에는 기본적으로 기본 버전이 있으며 아이콘 버전이 있는 메인 버전입니다. 그러나 각 버전마다 완전히 새로운 구성 요소를 만드는 대신 props를 지정하여 다양한 유형 간에 전환합니다. 🎜🎜이러한 props를 추가해도 일반적으로 구성 요소가 크게 복잡해지지 않으며 동시에 구성 요소를 더 유연하게 사용할 수 있습니다. 🎜🎜참고: 이는 loading prop 또는 disabled prop과 같은 상태나 데이터를 저장하기 위해 prop를 사용하는 것과 다릅니다. 🎜🎜🎜 3. 적응성 🎜🎜🎜🎜구성 가능 🎜의 가장 큰 문제는 예측력이 부족하다는 것입니다. 미래의 요구 사항을 예측하고 해당 prop를 배치하여 이를 구성 요소에 구축해야 합니다. 🎜🎜그러나 구성 요소가 🎜충분히 적응력🎜이라면 향후 요구 사항을 처리하기 위해 구성 요소를 변경할 필요가 없습니다. 🎜🎜구성 요소를 🎜적응 가능🎜으로 만들기 위해 슬롯을 사용하여 이를 달성할 수 있습니다. 🎜🎜예를 들어 Button 구성 요소에 전달된 text 대신 🎜기본 슬롯🎜을 사용할 수 있습니다. 🎜rrreee🎜이제 전달된 유형에 제한이 없습니다. 문자열 또는 숫자로. 🎜🎜Button 구성 요소를 수정하지 않고 로드를 추가하려면 다음을 수행할 수 있습니다.🎜rrreee🎜🎜4. 를 전달하는 것 외에도 Slot 전체 마크업 블록을 하위 구성 요소에 전달합니다. 렌더링 방법에 대한 일련의 지침도 전달할 수 있습니다. 🎜🎜테이크아웃을 주문하는 대신 레시피에 따라 요리하는 것과 같습니다. 레시피를 따르면 더 많은 작업이 필요하지만 언제든지 원하는 대로 조정할 수도 있고 레시피가 아닌 프로세스를 완전히 포기할 수도 있습니다. 🎜🎜우리는 🎜스코프 슬롯🎜을 사용하여 구성 요소에 더 많은 유연성을 추가합니다. 🎜🎜🎜5. Extension🎜🎜🎜적응성 및 가역성을 통해 이러한 기술은 구성 요소의 재사용성을 극대화할 수 있습니다. 🎜🎜다음 단계는 이러한 기술을 전체 구성 요소에 적용하여 동작을 더 쉽게 확장하는 것입니다. 🎜🎜우리는 이름이 지정된 슬롯을 사용하여 구성 요소에 하나 이상의 확장 지점을 추가합니다. 적응성과 가역성만이 동작 확장을 위한 하나의 옵션을 제공하는 반면, 여러 확장 지점이 있으면 다양한 옵션이 제공됩니다. 🎜🎜여기에는 header, default 및 footer가 포함된 Modal 구성 요소가 있습니다. 🎜rrreee🎜This 이 구성 요소를 확장하기 위한 몇 가지 옵션이 이미 있는 매우 간단한 확장 예입니다. 🎜

• 🎜기본 슬롯 code>을 재정의하면 됩니다. 콘텐츠 추가🎜🎜<li>🎜<code>헤더의 콘텐츠는 슬롯 이름을 통해 재정의될 수 있습니다🎜🎜
• 🎜바닥글은 슬롯 이름 코드>를 통해 재정의될 수 있습니다. 콘텐츠는 주로 다양한 스타일의 버튼을 기반으로 합니다🎜🎜<li>🎜<code>header 및 footer 슬롯은 사용자 정의에 더 적합합니다🎜🎜🎜 🎜 이 구성 요소의 동작은 다르지만 일부를 확장할 수 있습니다. 어느 쪽이든 우리는 많은 유연성과 코드 재사용성을 얻었습니다. 🎜🎜🎜6. 중첩🎜🎜🎜 🎜Extensions🎜에 더해진 고급 재사용성은 여러 기본 구성요소를 계층별로 중첩하여 사용할 수 있지만 특히 매우 유용합니다. 중대형 애플리케이션에 사용됩니다. 🎜

  우리는 상당히 일반적인 기능을 갖춘 기본 구성 요소부터 시작합니다. 다음 구성 요소는 기본 구성 요소를 여러 가지 방법으로 확장하여 더욱 구체적입니다. 그런 다음 실제 작업을 수행하는 최종 구성 요소가 나올 때까지 이전 기본 구성 요소를 사용하여 계속 위쪽으로 확장합니다.

  이것은 매우 일반적인 Animal에서 보다 구체적인 Mammal, 그리고 Dog로 이동하여 마지막으로 푸들의 방식. 필요한 것이 Poodle 구성요소뿐이라면 动物(Animal )到更特定的哺乳动物(Mammal )，然后是狗(Dog )，最后止于贵宾犬(Poodle)的方式。 如果我们需要的只是贵宾犬(Poodle)组件，看上去，我们整这么基础组件就是浪费时间。但是在大型应用程序中就不一样了，我们需要在相同的基本概念上进行多次更改，来满足不同的个性化需求，这时这种以基础组件嵌套的思想就很重要。

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

  는 시간 낭비인 것 같습니다.

  하지만대형 애플리케이션에서는 다릅니다. 다양한 개인 요구 사항을 충족하려면 동일한 기본 개념에 여러 가지 변경을 해야 합니다. 이때 기본 구성 요소

  를 중첩하는 아이디어는 매우 중요합니다.
  Dog 구성 요소를 확장하여 Corgi 및 Beagle 구성 요소를 얻을 수 있습니다. 또는 Mammal 구성 요소를 확장하여 Cat 구성 요소를 가져오면 Tiger 및 Lion(Lion) 구성 요소를 추가할 수 있습니다. .

  요약

  위는 6가지 재사용성 수준에 대한 개요입니다. 물론 일부 내용을 놓칠 수도 있지만 기본적으로 구성 요소를 패키징하는 데 대한 일반적인 아이디어를 제공하며 이는 또한 매우 좋은 방법입니다.

  원본 주소: https://news.knowledia.com/US/en/the-6-levels-of-reusability-7ad7fc58842eb67fc320c8e11305e1010a11f251?source=rss저자: Michael Thiessen

  🎜번역 주소: https:// 세그먼트fault.com/a/1190000039699016🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜

위 내용은 6가지 수준의 구성요소 재사용성 개념에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!