这篇文章主要介绍了javascript中前端状态管理器是什么,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
随着React和Vue等异步框架的广泛运用,前端状态管理器逐渐成为前端开发比不可少话题。形如React有倍受欢迎的Redux,再如Vue标配的状态管理器Vuex,都是业内相对成熟的状态管理器,那么我们接下来就用原生javascript来实现一个状态管理器。
主要包含两个方面:第一是发布订阅,第二是状态管理。
首先我们先创建一个PubSub类函数:
class PubSub { constructor() { // 收集事件 this.events = {}; } }复制代码
接着我们来实现一个发布函数:
class PubSub { ... // 发布 publish(event, data = {}) { const self = this; /* * 校验是否存在事件 * 默认返回一个空数组 */ if (!self.events.hasOwnProperty(event)) { return []; } // 遍历执行事件队列里的回调函数 return self.events[event].map((callback) => callback(data)); } ... }复制代码
实现完发布函数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类函数:
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,该函数主要处理对象更改,调用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; }; ... }复制代码
实现完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; } }复制代码
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中前端状态管理器是什么内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。