你必须要掌握的前端状态管理器

互联网 20-10-28

javascript栏目教大家掌握前端状态管理器。

状态管理器

随着React和Vue等异步框架的广泛运用，前端状态管理器逐渐成为前端开发比不可少话题。形如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')复制代码