對於組件的可重用性，大佬給出來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。