经过前面四篇的铺垫,终于轮到我们的主角dva了,就是下面这个美女:
先擦一擦哈喇子,我们来介绍一下,dva出自于暴雪出品的一款游戏《守望先锋》,援引官方的角色介绍:
D.Va拥有一部强大的机甲,它具有两台全自动的近距离聚变机炮、可以使机甲飞跃敌人或障碍物的推进器、 还有可以抵御来自正面的远程攻击的防御矩阵。
然后呢,蚂蚁金服的一位架构师sorrycc很迷这位美女,正巧刚开发了一款前端框架没有名字,作为一个向女神献礼的项目,dva框架就此诞生。
实际上,dva只是基于现有开源框架的一层轻量封装,并没有引入任何新概念:
- React:管理View
- react-router:管理路由
- Redux:管理Model
- redux-saga:管理异步调用(副作用)
再来看一下框架图,是不是都是熟悉的配方,熟悉的味道?
当然,也不是完全没有新东西,其中有一个Subscription好像之前没有见过,这是一种数据源订阅机制,数据源可以是键盘输入事件、路由变化、服务器的 websocket 连接等等。你可以在数据发生变化时收到通知,并派发必要的action。
实际上,dva是一个整合者,它的目标是解决“Code is everywhere”问题。当我们同时使用上面这些框架时,一般会呈现下面这种类型的文件结构:
+ src
+ sagas
- user.js
+ reducers
- user.js
+ actions
- user.js
然后,当我们需要实现一个功能时,就需要在这几个文件之间来回切换。。。
另一方面,dva还试图隐藏一些经常重复书写的routine代码,让开发者能够更加专注于业务逻辑。比如我们写一个应用的入口文件,需要做下面这么多事情:
- 配置middleware
- 创建store
- 添加<Provider>绑定
- 创建watcher saga和root saga
- 启动saga
- 。。。
实际上,可能95%以上的项目中这些代码都是一模一样的,我们不需要每次都花费时间来重新写一遍这些代码。
下面开始正式介绍dva 1.0相关的内容,dva 2.0做了一些优化升级,后面专门有一节介绍具体变化。