阅读 3805

你必须要知道的前端状态管理器

状态管理器

随着ReactVue等异步框架的广泛运用,前端状态管理器逐渐成为前端开发比不可少话题。形如React有倍受欢迎的Redux,再如Vue标配的状态管理器Vuex,都是业内相对成熟的状态管理器,那么我们接下来就用原生javascript来实现一个状态管理器。

主要包含两个方面:第一是发布订阅,第二是状态管理

发布订阅PubSub

创建类

首先我们先创建一个PubSub类函数:

class PubSub {
  constructor() {
  	// 收集事件
    this.events = {};
  }
}
复制代码

实现Publish

接着我们来实现一个发布函数:

class PubSub {
  ...
  // 发布
  publish(event, data = {}) {
    const self = this;
	
    /*
     * 校验是否存在事件
     * 默认返回一个空数组
     */
    if (!self.events.hasOwnProperty(event)) {
      return [];
    }
	
    // 遍历执行事件队列里的回调函数
    return self.events[event].map((callback) => callback(data));
  }
  ...
}

复制代码

实现Subscribe

实现完发布函数publish,接着我们来实现订阅函数:

class PubSub {
	...
    // 订阅
    subscribe(event, callback) {
      const self = this;
      
      /*
       * 校验是否存在事件
       * 默认给一个空数组
       */
      if (!self.events.hasOwnProperty(event)) {
        self.events[event] = [];
      }
	  
      // 将事件推入回调队列
      return self.events[event].push(callback);
    }
    ...
}
复制代码

完整代码

class PubSub {
  constructor() {
    // 收集事件
    this.events = {};
  }

  // 订阅
  subscribe(event, callback) {
    const self = this;

    /*
     * 校验是否存在事件
     * 默认给一个空数组
     */
    if (!self.events.hasOwnProperty(event)) {
      self.events[event] = [];
    }

    // 将事件推入回调队列
    return self.events[event].push(callback);
  }

  // 发布
  publish(event, data = {}) {
    const self = this;
	
    /*
     * 校验是否存在事件
     * 默认返回一个空数组
     */
    if (!self.events.hasOwnProperty(event)) {
      return [];
    }
	
    // 遍历执行事件队列里的回调函数
    return self.events[event].map((callback) => callback(data));
  }
}
复制代码

状态管理Store

创建类

首先我们创建一个Store类函数:

class Store {
	// 传入params对象
	constructor(params) {
    	const self = this;

        self.actions = {}; // 异步任务对象
        self.mutations = {}; // 同步任务对象
        self.state = {}; // 全局状态对象
        self.plugins = []; // 插件
        self.status = "resting"; // 初始状态
		
        /*
         * 初始化设置actions对象
         * 该对象主要处理异步事件
         */
        if (params.hasOwnProperty("actions")) {
          self.actions = params.actions;
        }
		
        /*
         * 初始化设置mutations对象
         * 该对象主要处理同步事件
         */
        if (params.hasOwnProperty("mutations")) {
          self.mutations = params.mutations;
        }

        // 插件
        if (params.hasOwnProperty("plugins")) {
          self.plugins = params.plugins;
        }

        /* 
         * 代理监听state
         */
        self.state = new Proxy(params.state || {}, {
          set(state, key, value) {
          	// 代理设置state对象并赋值
            state[key] = value;
			
            // 更改状态
            self.status = "resting";

            return true;
          },
        });
    }
}
复制代码

实现commit

接着我们来实现核心函数commit,该函数主要处理对象更改,调用mutations对象内的函数:

class Store {
	...
    commit = (mutationKey, payload) => {
      const self = this;
      // 校验是否存在函数
      if (typeof self.mutations[mutationKey] !== "function") {
        console.warn(`Mutation ${mutationKey} dose not exist`);
        return false;
      }
	  
      // 变更状态
      self.status = "mutation";
      
      // 执行对应函数
      self.mutations[mutationKey](self.state, payload);

      return true;
    };
    ...
}
复制代码

实现dispatch

实现完commit,我们再来实现dispatch,这个函数主要处理异步问题,传入commit方法:

class Store {
	...
    dispatch = (actionKey, payload) => {
      const self = this;
      
      // 校验是否存在函数
      if (typeof self.actions[actionKey] !== "function") {
        console.warn(`Action ${actionKey} dose not exist`);
        return false;
      }
	  
      // 变更状态
      self.status = "action";
      
      // 执行对应函数,并传入commit
      self.actions[actionKey]({ commit: self.commit }, payload);

      return true;
    };
    ...
}
复制代码

完整代码

class Store {
	// 传入params对象
	constructor(params) {
    	const self = this;

        self.actions = {}; // 异步任务对象
        self.mutations = {}; // 同步任务对象
        self.state = {}; // 全局状态对象
        self.plugins = []; // 插件
        self.status = "resting"; // 初始状态
		
        /*
         * 初始化设置actions对象
         * 该对象主要处理异步事件
         */
        if (params.hasOwnProperty("actions")) {
          self.actions = params.actions;
        }
		
        /*
         * 初始化设置mutations对象
         * 该对象主要处理同步事件
         */
        if (params.hasOwnProperty("mutations")) {
          self.mutations = params.mutations;
        }

        // 插件
        if (params.hasOwnProperty("plugins")) {
          self.plugins = params.plugins;
        }

        /* 
         * 代理监听state
         */
        self.state = new Proxy(params.state || {}, {
          set(state, key, value) {
          	// 代理设置state对象并赋值
            state[key] = value;
			
            // 更改状态
            self.status = "resting";

            return true;
          },
        });
   }

  dispatch = (actionKey, payload) => {
      const self = this;
      
      // 校验是否存在函数
      if (typeof self.actions[actionKey] !== "function") {
        console.warn(`Action ${actionKey} dose not exist`);
        return false;
      }
	  
      // 变更状态
      self.status = "action";
      
      // 执行对应函数,并传入commit
      self.actions[actionKey]({ commit: self.commit }, payload);

      return true;
  }

  commit = (mutationKey, payload) => {
      const self = this;
      // 校验是否存在函数
      if (typeof self.mutations[mutationKey] !== "function") {
        console.warn(`Mutation ${mutationKey} dose not exist`);
        return false;
      }
	  
      // 变更状态
      self.status = "mutation";
      
      // 执行对应函数
      self.mutations[mutationKey](self.state, payload);

      return true;
   }
}
复制代码

PubSub和Store结合

引入PubSub库

	const SubPub = require("../lib/pubsub");
    
    // 在state的代理中监测到数据改变,发布相对应事件
    class Store {
    	constructor(params) {
        	// 实例化发布订阅
        	self.events = new SubPub()
        
        	...
            /* 
             * 代理监听state
             */
            self.state = new Proxy(params.state || {}, {
              set(state, key, value) {
                // 代理设置state对象并赋值
                state[key] = value;
                
                // 添加发布事件
                self.events.publish("stateChange", self.state);

                // 更改状态
                self.status = "resting";

                return true;
              },
            });
            ...
        }
    }
复制代码

实例场景

const Store = new Store({
	state: {
    	text: ''
    },
	mutations: {
    	init: (state, payload) => {
        	state.text = payload
        },
    },
    actions: {
    	init: ({commit},payload) => {
        	setTimeout(() => {
            	commit('init', payload)
            },200)
        }
    },
    plugins: [
    	function() {
        	console.log('plugins')
        }
    ]
})

// 执行同步事件
Store.commit('init', 'hello init')

// 执行异步事件
Store.dispatch('init', 'hello async init')
复制代码

总结

以上就是基础版的全局状态管理器,包含基本的同步和异步处理,插件,发布订阅功能,当然还有些细节需要完善。有问题欢迎在评论中指出,谢谢。