单页面状态管理的思考

问题

  1. 是否需要一个api专门管理状态?

    看到组件中很大一部分代码都是在修改状态,或者根据一些状态设置另外一个状态。这种对状态的改变,占了大部分的代码。

前端简单说就是 dom = fn(data)

又可以大致分为4种代码:

  1. Ajax请求

  2. 计算:根据一种数据算出另外一种数据

  3. 改变状态:初始化,根据Ajax请求结果修改,根据计算结果修改,根据其他状态修改

  4. 模版:读取状态,进行显示

stateless-api:Ajax请求和计算结合起来得到一层无状态的api层

state-api:改变状态的逻辑和无状态的api层结合起来得到有状态的api层

components: 模版和有状态的api结合得到组件层

stateless-api层的实现:与框架无关,与状态管理无关,纯js/ts实现。1. 定义功能接口 2. 定义entity类 3. 选一种ajax/websocket库,ajax/websocket请求数据

state-api层的实现: 选一种状态管理的库(redux/vuex/rxloop), 暴露一个全局state对象, 暴露所有action接口,action 接口中会调用stateless-api层,返回

components层的实现:选一种框架(iview/react/angular),引入全局state对象,从中提取当前component需要的来自其他组件的状态;引入所需的submit接口,将本组件发出的事件发出去。

原文地址:https://www.cnblogs.com/yoyogis/p/11201343.html