你必须要掌握的前端状态管理器
创新互联专注为客户提供全方位的互联网综合服务,包含不限于网站设计、成都网站设计、沿河网络推广、小程序制作、沿河网络营销、沿河企业策划、沿河品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们大的嘉奖;创新互联为所有大学生创业者提供沿河建站搭建服务,24小时服务热线:13518219792,官方网址:www.cdcxhl.comjavascript栏目教大家掌握前端状态管理器。状态管理器
分享题目:你必须要掌握的前端状态管理器
文章路径:http://pwwzsj.com/article/chship.html
随着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')复制代码总结
分享题目:你必须要掌握的前端状态管理器
文章路径:http://pwwzsj.com/article/chship.html