“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”
业务
三年前刚进公司的时候，接手了一个H5电商项目，需要做小程序拓展版本
一看代码，好家伙！
👉🏻 h5用的是mobx
👉🏻 小程序用的是redux
这意味着什么？这意味着一样逻辑的代码要一整个重新写啊！😭
CV大法完全派不上用场，几乎是完全跟踪逻辑重写。。。
含泪做完这个项目之后，我立志要做一个跨平台的架构
一个让业务代码和框架、UI解耦的整洁架构！✌🏻✌🏻
.
❌ 痛点：
旧的项目结构没有做好分层架构，业务逻辑和UI逻辑耦合严重
比如原来的业务逻辑写在react的class component里面和视图层强耦合，难以提取复用
对请求、jsbridge等平台功能没有做依赖倒置，直接使用了具体实现，导致无法分离
整洁架构
后来想起一本书《架构整洁之道》，上面描述的一种架构方案就很符合我的需求
整洁架构的概念来源于Bob 大叔的一篇文章，更详细的内容可以查看《架构整洁之道》，下面来给大家列举一些核心点~
核心点
- 独立于框架。 比如和 vue react等框架解耦
- 可测试。 每个层级互相隔离，这样业务逻辑方便测试；业务逻辑和ui逻辑可以解耦开来单独测试
- 依赖单向，外层依赖内层，内层不知道外层， 这样保证了每一层级可维护性，比如use case不会收到ui逻辑的影响；view -> preneter -> use case(service) ，出现反向依赖的时候可以使用依赖倒置来避免内层依赖外层
- 关注点分离
项目分层
✅ 建议大家使用下图的分层方式~
- Infrastructures 基础设置层： 一般是Http工具，native功能（jsBridge）等提供基础能力的层级，这里要用依赖倒置来保证依赖方向
- Service: 具体的业务逻辑，也就是前面的Use case和Entity, 因为大多数前端应用都比较简单，有需要的话可以在进一步细分
- Presenter：提供方法和 State 给到 View，提供视图层需要的方法和数据
- Adaptor : 绑定Presenter到具体的视图框架（React/Vue/...）
clean-js
这是什么？
一个围绕整洁架构落地的辅助库，包含状态库、IOC容器等
它能做什么？
- 提供presenter的约束，约束视图状态和更新的方式；
- 提供视图devtool（redux-devtool/log）
- 提供适配器，适配react/vue/...
- 提供IOC容器，可以实现依赖注入
- 支持常用的presenter模式，比如table等 （关于table部分的说明可以戳这里）
状态库
- View，一般是 react，vue 之类的视图层，它显示数据，并将绑定Presenter 的方法到事件/副作用
- Presenter，提供方法和 ViewState 给到 View
- service 实现业务逻辑，为Presenter提供服务
目前已经在多个项目中使用，可以放心食用，欢迎点赞支持👍🏻👍🏻👍🏻~~
.
🥑 让我提前预判一下大家的问题：
为什么不用hook实现？
- hook属于react/vue的api，和框架耦合太紧密，万一哪天react/vue无法使用了，就gg了
为什么不用redux，mobx?
- redux/mobx都可以实现上面的架构方式，只不过概念太复杂了点，我只需要一个绑定简单视图的工具
- 需要依赖注入的功能
贴上源码 👉🏻 github.com/lulusir/cle…
期待宝子们的star⭐️ 祝大家中秋快乐！
其他文章
什么？在React中也可以使用vue响应式状态管理
clean-js | 自从写了这个辅助库，我已经很久没有加过班了…
clean-js | 在hooks的时代下，使用class管理你的状态
clean-js | 手把手教你写一个羊了个羊麻将版
写给前端的数据库入门 | 序
写给前端的数据库入门 | docker & 数据库
有没有一种可能，你从来都没有真正理解async
三分钟实现前端写JAVA这件事——装环境
三分钟实现前端写JAVA这件事——VS code
