從零開始封裝一個屬於本身的UI框架（一） --前期準備工做思考篇

前言

總所周知，組件化的開發模式對於開發效率有很是大的提高

針對咱們常常遇到的業務場景或者UI進行封裝，可讓咱們在遇到相同或者相似的業務場景時能夠快速複用，而且對一些經常使用UI組件進行封裝可讓咱們下降對於基本UI的關注度，而且本身去封裝一些組件也是極好的學習方式，也便於咱們對於業務的理解，因此這就是我選擇本身封裝組件庫的緣由。

技術選型

語言：TypeScript

生態：React

打包工具：webpack

CSS預處理器：Less

單元測試：Jest

組件庫的構成

在構建一個完整的組件庫時須要考慮不少東西，例如：

1.組件設計思路

2.組件的代碼規範

3.組件測試

4.組件維護

組件設計思路

1、通用樣式設計

做爲一個前端UI庫，若是從樣式的角度去考慮，首先應該保證的是各個組件的視覺風格和交互規範一致，若是某一個組件在不一樣業務場景有不一樣的交互和UI風格，那麼想對該組件進行抽象和封裝是很困難的事情。

(1)設計規範

組件的視覺風格和交互規範一致性不少程度上是由設計規範決定的，而設計規範大概上我認爲是包括了統一視覺樣式和統一的交互動效，具體以下圖所示：

注：須要注意的是視覺的設計一般要足夠顆粒化，視覺和邏輯須要作到儘可能解耦，把視覺元素做爲可拆卸的零件嵌入組件中去，緣由我想應該不須要多解釋各位老油條們也應該懂的

2、具體組件設計思路及流程

(1)需求及應用場景分析

咱們在設計組件的時候須要充分考慮到組件會使用的場景和使用方式 例如以最簡單的button來考慮： botton是經過點擊來執行某一個具體的動做或者行爲 那麼它的使用場景就是：當用戶須要觸發某個業務行爲邏輯的時候會去使用按鈕

從樣式角度分析該組件需求

1.按鈕有什麼不一樣的類型

2.按鈕擁有什麼樣的表明狀態

3.按鈕擁有多少種尺寸

4.按鈕通常擁有什麼動畫效果

5.按鈕文字樣式及其規範

..........

從操做上分析需求

總結： 在設計一個組件時，咱們一般要從樣式和具體邏輯兩個角度出發去考慮需求。

對於從樣式出發，咱們通常須要考慮：

• (1)該組件有多少種類型。
• (2)該組件是否有不一樣的狀態。
• (3)該組件有多少種尺寸。
• (4)該組件須要有什麼樣的動畫效果
• (5)該組件種的文字表現樣式和規範。
• ..........

而從具體邏輯出發考慮，不一樣的組件有不一樣的需求，這裏就不作具體分析了

(2)API設計分析

API的設計依舊從樣式和其餘方面來考慮 這裏依舊拿button來舉例

從樣式上考慮API的設計

從其餘方面考慮API的設計

1.根據操做事件行爲暴漏

例如：onclick、keydown之類的事件

2.根據具體需求去設計API

3.選擇暴露一些原生接口，例如button原生的type

4.................................

(3)組件設計流程

3、組件測試

4、組件維護

參考文章

組件庫通用樣式設計總結

組件庫樣式整體討論