コンポーネントの再利用性の概念の 6 つの異なるレベルの詳細な説明

この記事では、コンポーネントの再利用性の概念を 6 つの異なるレベルで詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#誰もが、より多くのコードを作成しながら、より少ないコードを作成したいと考えています。これを実現するために、コンポーネントを何度も再利用できるようにコンポーネントを構築します。

一部のコンポーネントは基本的な再利用性のみを必要としますが、その他のコンポーネントは完全に再利用する前に、より複雑なリファクタリング技術が必要です。

再利用性の概念にはさまざまなレベルがあります。まずは体験してみましょう。その後の更新で 1 つずつ説明します。

1. テンプレート

テンプレートを使用すると、コード全体をコピーして貼り付けるのではなく、反復性の高いコードを独自のコンポーネントにラップします。

コンポーネントを (コードを直接使用する代わりに) 再利用すると、次の 2 つの利点が得られます。

将来の変更がはるかに簡単になります。変更する必要があるのは 1 か所だけであるためです。
重複したコードがどこにコピーされたかを覚えておく必要はありません。
これは、 most 基本的で最も一般的に話題になる再利用性の形式。

2. 構成可能

一部のコンポーネントでは、ニーズに応じて動作方法を変更する必要があります。

ボタン

コンポーネントには、デフォルトでメイン バージョンとアイコン付きのバージョンがあります。ただし、バージョンごとに完全に新しいコンポーネントを作成するのではなく、異なるタイプを切り替えるために props を指定します。 これらの

props

を追加しても、通常はコンポーネントがそれほど複雑になることはありません。同時に、コンポーネントをより柔軟に使用できるようになります。 注: これは、

loading

プロップや disabled プロップなど、状態やデータを保存するために prop を使用することとは異なります。

3. 適応性

構成可能性に関する最大の問題は、先見性の欠如です。将来のニーズを予測し、対応する

prop を配置することでそれらをコンポーネントに組み込む必要があります。 ただし、コンポーネントが十分に適応性がある場合は、将来のニーズに対応するためにコンポーネントを変更する必要はありません。

コンポーネントを十分な

適応性のあるにするために、スロット

を使用してそれを実現できます。

たとえば、Button コンポーネントに渡される text

の代わりに、

default slot を使用できます:

<!-- 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. 逆変換

完全なマークアップ ブロックを

slot 経由で子コンポーネントに渡すことに加えて、レンダリング方法に関する一連の指示を渡すこともできます。

テイクアウトを注文するのではなく、レシピに基づいて料理するようなものです。レシピ通りに作ると手間はかかりますが、自分のペースで作ることができ、いつでも調整できますし、レシピ以外の工程を完全に放棄することもできます。

スコープ スロット

を使用して、コンポーネントの柔軟性を高めます。

5. 拡張機能

適応性と可逆性

を通じて、必要な技術的基盤がいくつかあり、これらのスキルによりコンポーネントの再利用性が最大化されます。 。

次のステップでは、これらの手法をコンポーネント全体に適用して、コンポーネントの動作をより簡単に拡張できるようにします。 名前付きスロット

を使用して、コンポーネントに 1 つ以上の拡張ポイントを追加します。

Adaptability

と

Reversibility は、単独では動作を拡張するための 1 つのオプションを提供しますが、複数の拡張ポイントがあると多くの異なるオプションが提供されます。 ここには、header、default

、

footer を含む Modal コンポーネントがあります:

<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
• のスロットが更新されました主にカスタマイズ用です。

  このコンポーネントの動作を拡張する必要はありませんが、コンポーネントの一部を拡張することはできます。いずれにしても、柔軟性が高まり、コードの再利用性が高まります。

6. ネスト

Extension のより高度な再利用性はネストです。複数の基本コンポーネントをベースとして使用できます。レイヤー内でのレイヤーのネスト最初は奇抜に聞こえるかもしれませんが、特に中規模から大規模のアプリケーションでは非常に便利です。

まず、かなり一般的な機能を持つ基本コンポーネントから始めます。次のコンポーネントはより具体的で、ベース コンポーネントをいくつかの方法で拡張しています。次に、実際の作業を完了する最終コンポーネントが得られるまで、前の 基本コンポーネント に基づいて上方への拡張を続けます。

これは、非常に一般的な

Animal からより具体的な Mammal(哺乳類)、そして Dog(犬)## に進む方法と似ています。 # そして最後は Poodle(Poodle) の方法で終わります。必要なのは Poodle コンポーネントだけである場合、基本コンポーネント は時間の無駄であるように思えます。 しかしは、大規模なアプリケーションでは異なります。さまざまなパーソナライズされたニーズを満たすために、同じ基本概念に複数の変更を加える必要があります。現時点では、この 基本グループネストされた部分のアイデアはとても重要です。

Dog コンポーネント

を拡張して、Corgi コンポーネントと Beagle コンポーネントを取得できます。または、Mammal コンポーネントを拡張して Cat コンポーネントを取得し、Tiger および Lion コンポーネントを追加できます。

概要

上記は 6 つの再利用性レベルの概要です。もちろん、一部のコンテンツが失われる可能性は非常に高いですが、基本的には、次のような情報を提供できます。一般的なアイデアも非常に良い方法です。

元のアドレス: https://news.knowledia.com/US/en/the-6-levels-of-reusability-7ad7fc58842eb67fc320c8e11305e1010a11f251?source=rss

著者: Michael Thiessen

翻訳アドレス: https://segmentfault.com/a/1190000039699016

プログラミング関連の知識については、

プログラミング教育

をご覧ください。 ！

以上がコンポーネントの再利用性の概念の 6 つの異なるレベルの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。