本文講述了搭建組件庫前期的準備工作。主要是爲了更瞭解UI組件庫相關的知識。
這是自己邊看邊想邊構思寫的文檔（俗話說知己知彼才能百戰百勝嘛）所以先了解一下組件庫的相關知識。開發的乾貨在第二章（還沒放上來，寫好了會第一時間放上來噠嘻嘻）裏噢！
先講講自己的心路歷程吧（其實就是找個地方訴說一下，啊哈哈哈~），有點兒囉嗦。大家可以直接忽略進入正題。
從大四一直開始工作的公司是做教育的（下文中用B代替），和我以前實習的公司（下文中用A代替）完全不同。怎麼說呢，A做安全相關的，一個組可能連續幾個月就做一個產品，迭代就更慢了，就比如我剛進去的時候就正好在做半年前的產品的迭代，也主要做一些用戶體驗的優化，功能的升級。B是做教育的，產品需求變化快，一週一次迭代，一週一次發版，也就意味着可能上週做好的一個產品功能下週就要迭代，在瘋狂的迭代中對於開發來說會出現一些重複性的迭代工作，雖然我們也使用了Antd的組件庫，但隨着公司的發展，Antd基本能滿足於後臺平臺的使用，但是對於面向用戶的前端頁面，要更體現出公司的文化，滿足公司將來業務的發展方向，光是Antd已經不夠了。這個時候組件庫的想法就來了。我比較幸運的是能加入到這個隊列中，跟着大佬一起學習從0開始，讓我這個小白學到了很多。從那時起我就想着自己也要搞一套組件庫，作爲一名前端工作者，這是一件多麼有意義的事情呀。我一直對自己工作的這兩家公司心懷感激，A公司的同事都很好相處，每個人都當我是小妹妹一樣幫助我。B公司讓我真正意義上的體驗到了作爲一家互聯網公司高速的工作狀態，雖然剛剛開始的時候我及其不適應常常感覺壓力太大跟不上大佬的節奏而感到焦慮，但是公司的大佬人都超級nice啊，從帶着我做項目，慢慢的開始讓我獨立做一些項目，在這個過程中自己學習到了很多也成長很多嘿嘿~
今年疫情的原因，年後的很多規劃也停滯了，天天宅在家裏不能出門（就開始恍恍惚惚哈哈哈哈~），剛剛開始的那段時間我這個平日裏的樂天派也是深受精神上的折磨恍如世界末日一般整日惶恐不安難以入睡，好在自己和家人一起慢慢調整好了自己的心態（相信一定會等到春暖花開的日子，那個時候定要摘掉口罩在大馬路上狂奔撒歡！！！）。想着趁着這個時間段自己找些事情來做，好好規劃接下來的日子，正好也可以適當的轉移一下自己的注意力。所以搭建組件庫的這件事情被提上日程了。花了一天的時間在網上看了一些資料，寫了一篇前期的規劃文檔，大致明確了自己的想法，定好了里程碑。也給自己留了鍛鍊休息的時間，勞逸結合呀，現在特殊時期也是要注意多鍛鍊啊（其實就是怕啦怕啦）。總之，這件事情就安排上了，並且隨着這篇文章的產生已經開始進入正軌了~加油吧小同志！
對了，在準備搭建組件庫的時候首先要明確自己的目標（可衡量的技術目標），制定里程碑（最好是以能看到效果爲一個節點）督促自己按時完成（實習的時候養成了做里程碑的習慣啦，不過真是好可以約束自己的玩兒心，自己定的目標哭着也要走完呀）
現在進入正題————————————————————————————————————————————————
先了解以下幾個問題......
- 爲什麼需要組件庫？
- 什麼是組件庫？
- 組件和插件的區別？
- 業務型組件和基礎組件？
- 組件庫的設計思路？
- 確定技術方案？
爲什麼需要組件庫？
想這個問題的時候腦子裏想起就是：那還不是因爲產品天天變，奇葩需求改不完。一般隨着公司的發展，產品在面向用戶的時候需要更體現出公司的特色由此產生的基於公司文化的組件庫產生了。再加上公司大了，需要更多的工具才能滿足需求了，後臺系統變多，功能也增多了，很多的基礎模塊也能複用了，當Antd這種組件庫已經滿足不了產品的奇葩需求後，我們就需要搞一點兒事情了。這個事情就是搞組件庫啊，其實說白了就是降低代碼的冗餘，規範代碼使後期維護迭代也更方便了。好管理，好維護，好迭代，這麼多好處何樂而不爲呢，最重要的是我們不用搬一些重複的磚頭了嘛，減少了一些工作量了嘿！（咱搬磚也要搬的有志氣啊！！！）
什麼是組件庫？
說起組件庫我腦子裏就浮出了Antd，element ui，iview，這三大組件庫是我目前接觸到的，不得不承認是真的很強大啊，基本上能滿足大多的業務場景了（奈何產品千千萬，需求只有你想不到不准你做不到！！！）有些時候我想，把Antd，element ui，iview這類組件庫看成最小單元，那麼可以認爲通過這些小單元來拼湊成一些邏輯小版塊，而這些小版塊能更好的滿足公司的業務場景。
但是，到底什麼是組件庫呢，網上解釋的實在太多了，我在一篇文章上看到了這樣的說法
組件
它的核心意義在於代碼複用。功能相對單一或者獨立，在整個系統的代碼層次上位於最底層，被其他代碼所依賴
組件庫
組件的集合
我覺得說的很nice啊，通俗易懂（我咋就說不出來這樣的話呢？），我常常這樣想我們前端的工作就像是搭積木，我們需要各種各樣的小單元最後完成這個積木的搭建。這些小單元我們可以認爲他是基礎組件，我們用這些基礎組件又拼成了一些模塊，最後這些模塊完成了積木的搭建。我覺得也可以認爲他是插件，這樣一來問題又來了，那組件和插件有什麼區別呢？嘿嘿，莫慌，繼續往下看~
組件和插件的區別？
組件：我理解爲，組件就是模塊。我們將一個網頁拆分成多個模塊（組件）。組件之間是獨立的，組件可依賴於宿主。
插件：就是獨立的一個apk。我認爲它的重心更偏向於實現某個獨立的功能。(比如遊戲裏的某個皮膚)
這裏引入學習的一篇文章，我覺得講的很清楚 ，點擊 -> 關於組件和插件的區別
業務型組件和基礎組件？
記得在公司的時候，mentor問了我一句話，你是想做業務型組件還是基礎組件？當時我就是黑人問號臉啊，這有啥區別嗎？不都是組件嗎？當時模模糊糊的闡述了一下自己對這兩個概念的理解，然後讓我自己下來再多學習瞭解一下然後組織一個會議和大家討論。於是乎又開始熱火朝天的翻資料寫app......
先上一張圖來說說它們之間的關係：
再來說說，業務型組件其實是和公司的業務高度相關的，可以說業務型組件是體現公司的文化，更加符合公司產品的用戶體驗，也是根據產品經理對於產品未來的規劃所產生的通用的部分。可能某些模塊的存在，對於公司多個項目來說都會用到，可能它不如類似Form表單這種基礎表單的普遍性高，但是它確實有抽離成組件的意義。
組件庫的設計思路？
開發組件庫目的在於實現降低代碼冗餘，抽離出複用性更高的模塊。所以本着更容易維護和擴展的原則：
- 統一的代碼風格和規範
- 具備可擴展性
- 按需引入
- 覆蓋測試用例
- 完整的開發文檔
確定技術方案
因爲是想在Antd的基礎上做二次擴展，本着第一次嘗試不增加太大難度，然後發佈到npm上即可。重於學習組件庫的細節，原理以及框架的類比，所以這次開發是直接把Antd的源碼拉下來，然後在沿着Antd做二次擴展。希望在這個過程中能夠摸清Antd的原理噠。
前期主要就是做了這些準備，明確自己的目標，瞭解相關理論知識，才能更好的進入開發階段啊。沖沖衝！
如有什麼不當的地方，歡迎各位大佬指正，小女子虛心接受，在此謝過啦~