前端组件开发方法论

设计目标

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. 依赖倒置原则