對於組件的可重用性，大佬給出來6個級別的看法，一塊兒過目一下！

做者：Michael Thiessen
譯者：前端小智
來源：news

點贊再看，微信搜索 【大遷世界】 關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

咱們全部人都但願編寫更少的代碼，同時也要作更多的事情。爲了實現這一點，咱們構建了組件，以即可以屢次重用它們。

有些組件只須要基本的可重用性，而另外一些則須要更復雜的重構技術，咱們才能充分複用它。

這裏有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。

原文：https://news.knowledia.com/US...

---

交流

文章每週持續更新，能夠微信搜索 【大遷世界 】 第一時間閱讀，回覆 【福利】 有多份前端視頻等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。