組件設計原則
-
層次結構和 UML 類圖(用於快速幫助了解應用程序布局和其他細枝末節)
對於前端組件W的UML類圖可以有 State、Props、Methods、Event、Slot、與其他組件的關系
-
扁平化、面向數據的 state/props
-
低耦合、輔助代碼分離
-
避免直接操作DOM，避免使用ref、減少訪問全局變量
-
入口處檢查參數的有效性，出口處檢查返回的正確性
-
單一職責組件要建立在可復用的基礎上、對於不可復用的單一職責組件僅作為獨立組件的內部組件
相關技術和工具
-
選用TypeScript代替替換JavaScript
-
代碼檢測 ESLint：
eslint-config-standard（相對沒airbnb嚴格） -
代碼美化 Prettier,解放人肉美化,同時利於不同人協作的風格一致
-
打包工具可選用Rollup（Scope Hoisting將模塊構建在一個函數內的做法更適合類庫的打包）
-
commit規范選用Angular 團隊的方案配合
commitizen依賴實現強制規范化<type>(<scope>): <subject> <BLANK LINE> <body> <BLANK LINE> <footer>commit head type如下（必填）
- feat: 新特性
- fix: 修改問題
- docs: 文檔修改
- refactor: 代碼重構
- style: 代碼格式修改(非css修改)
- test: 測試用例修改
- chore: 代碼優化，其他修改, 比如構建流程, 依賴管理
組件封裝原則
- 高內聚低耦合,盡可能少的暴露組件的api,將功能盡量封裝在組件內部
- 組件內部根據業務需求設置了一些組件默認的配置項
組件文檔建立
使用VitePress，文檔的內容要簡單明了，組件示例/props 參數說明/events 監聽事件說明/slot 插槽說明，如有內部事件暴漏出去，添加其它事件說明
CSS規范
CSS命名使用BEM
以下為參考
最外層盒子不寫寬高，使用自適應 （自適應）
使用父套子的方式，給類名加權重和作用域，以保證絕對的樣式‘內部性’
盡可能使用flex布局，不要寫死寬高
避免使用！important寫死樣式
必要時限制max或者min
避免使用標簽選擇器
有暴露外部的樣式書寫入口
統一使用scss書寫
遵循先盒子主體樣式，后渲染樣式，即遵循先定位、寬高、display等，再font-size、color、縮進，邊框，背景色等書寫順序
可以做適配，例如IPhoneX
避免為0值制定單位，例如用 margin: 0; 而避免使用 margin: 0 px;
對於小於1的值，省略前面的0，例如 .5 代替 0.5
避免過量的使用簡寫，防止樣式覆蓋，例如 使用 background-color: red; 代替 background: red;
對於 z-index 的值，在可控范圍內，盡量寫的小一點，分層級時區分數量級，同一層級，使用同一數量級值,(除彈窗外，不高於100；彈窗類最高999)
所有的聲明都要以分號結尾，最后一個是可選項，但是也要書寫，避免出錯
每條聲明之后，都要有一個空格
聲明的花括號應該單獨成行，單行聲明除外
分區塊增加注釋分割，書寫順序符合文檔流順序
書寫托底的默認樣式
參考
封裝Vue組件的一些技巧 https://juejin.cn/post/6844903821513064456