Js系列一十三：一个简单的状态管理库

          像vue或者react等在做中大型项目的时候，如果运用自身的方法来管理数据状态，最终会导致代码变得臃肿难以维护及复用，因此他们都会运用相应的状态管理库的协助管理数据状态，如，vuex，redux，mobix，flux等。今天我们不是讲如何运用一个状态管理库，而是运用js模块化开发的思想来写一个简单的状态管理库，从而让大家了解状态管理库的实现思路及js模块化开发的思想。

注：为了专注于具体的功能实现，本示列代码是运行在create-react-app生成的配置环境中。本节由于专注于思想的过程所以对样式有所忽略。最终的样式为下图：

通过show/hide实现方框的显示与隐藏，可以输入改变背景色，border颜色,通过width，height动态改变元素宽高。

实现过程如下。（清空原本create-react-app的index.js文件）最终结构如下

一，在src目录下的store目录中新建一个状态管理模块，并且命名为state.js。首先我们创建一个状态树，在整个项目中状态树是唯一的。我们把所有的状态名与状态值通过key-value的形式保存在状态中

const store={}；

根据需要再状态树中保存状态，状态树的大概形式如下：

store = {

 show:0,

 backgroundColor:'#ccc',

 width:200,

 height:200,

.........................

};

我们都了解闭包如果需要再其他模块中操作store，那么久需要对外提供对应的接口。根据本示列的需要我们列出大概用到的方法，之后可根据需要再进行添加。

（1），registerState://往状态树中放入新的值

（2），getState://获取某一状态值

（3），getStore:或者整个状态树

（4），setState：修改书树中的某一状态值

示列如下：

//给store添加一个状态

export const registerState = (status,value)=>{

if(store[status]){

throw new Error('该状态已经存在');

return;

}

store[status] = value;

return value;

}

//获取整个状态树

export const getStore = ()=>{

return store;

}

//获取某个状态值;