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

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

前端（vue）入门到精通课程，老师在线辅导：联系老师
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用

状态管理器

随着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";// 执行对应函数，并传入commitself.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";// 执行对应函数，并传入commitself.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')复制代码
登录后复制

总结

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

相关免费学习推荐：javascript（视频）

以上就是你必须要掌握的前端状态管理器的详细内容，更多请关注php中文网其它相关文章！