组件设计

这个不好用文字来描述, 还是用一个图来说明, 转化成代码就是这样的:

页面组件: 块组件的容器, 不应做任何逻辑处理, 只负责展示块组件(包括协调多个块组件组合的样式)
块组件:   展示综合视图(可能是多个子组件)/维护数据/处理逻辑/将数据用props传递给子组件
子组件:   数据展示/样式处理/触发事件给块组件去处理
缺陷:     因为现在的逻辑都是放到 `块组件` 中来处理的, 子组件只负责展示数据
如果块组件内容比较多, 而且逻辑复杂, 那么代码文件就会变得特别大, 所有的逻辑都放到一起, 其实并不好维护(很难找)
解决缺陷: 将逻辑抽离出去(类似 redux), 然后组件自己来调用, 如此一来, 块组件就变得干净了, 但问题就是:拆分的太碎会让流程变得复杂, 不易于上手

页面组件组件(页面组件)
    顶部导航栏组件(块组件)
        顶部导航栏搜索框组件
    中间幻灯片组件(块组件)
        幻灯片用户信息卡片组件
    底部tabs切换内容组件(块组件)
        组件内容组件1
        组件内容组件2
        组件内容组件3
        组件内容组件4

派发器思想

将逻辑全都提取出去而不是直接写在块组件中, 缺陷就是: 文件拆分的有点多, 不易上手, 但是对于理解 dispatcher 思想的人来说 开发 & 维护都会变得更简单, 因为逻辑是单独放到外面去的, 组件只是负责展示数据, 给子组件提供 action, 那么每个组件都会特别 简洁: 只负责展示数据和样式

派发器和普通开发模式对比

对比源码实现

派发器思想是一种开发思想, 不局限于某个框架

• react dispatcher demo
• vue3 dispatcher demo

任务队列

每个任务是相互独立的, 同时也可以向后传递数据形成依赖

在设计的时候, 可以尽量设计成独立的, 因为这样多个模块相同的逻辑就可以用多个任务组合来完成

• 用户列表
  • 分页数据操作(page/pageSize/total/rows)
  • setPagiantion
• 文章列表
  • 分页数据操作(page/pageSize/total/rows)
  • setPagiantion

可以看到, 很多逻辑是相同的, 那么将 state 和 task 抽离, 那么就能实现逻辑复用