前端組件開發方法論

設計目標

1. 合理拆分任務

結構與表現分離

1. 關注點分離： html/css/js
2. 反關注點分離：css in js（styled-components）
3. 結構描述：json/xml，Virtual DOM
4. 表現層：多端渲染，多平臺渲染

約定優於配置

1. 構建腳本的約定：jenkins等
2. 文件目錄的約定
3. 接口形式接口參數的約定
4. 變量命名的約定
5. eslint
6. TypeScript

設計模式

1. 責任鏈模式
2. 觀察者模式
3. 代理模式
4. 命令模式
5. 裝飾器模式

狀態一致性

1. 單一數據源 ： redux，服務端推送
2. 單向數據流

技術選型

1. 沒有最好的，只有某種業務下最適合的
2. 周邊生態，社區支持，人員招聘

組件聚合複用原則

1. 組件聚合模式：細粒度組件自由組合。優先使用
2. 依賴倒置模式：業務流程邏輯相同，僅對部分場景或UI顯示存在差異。

React邏輯複用

1. react hooks

2. HOC 高階組件：注入props

   1. 反向繼承
   2. 代理模式

SOLID 原則（借鑑面向對象開發原則）

1. 單一職責原則
2. 開閉原則
3. 里氏替換原則
4. 迪米特法則
5. 接口隔離原則
6. 依賴倒置原則