React和 Vue等非同步框架的廣泛運用,前端狀態管理器逐漸成為前端開發比必不可少的話題。形如React有倍受歡迎的Redux,再如Vue標配的狀態管理器Vuex,都是業界相對成熟的狀態管理器,那麼我們接下來就用原生javascript來實作一個狀態管理器。
主要包含兩個面向:第一是發布訂閱,第二是狀態管理。
發布訂閱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)); } ... }复制代码實作訂閱實作完成發布函數
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連結我們來實作核心函數
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; } }复制代码
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中文網其他相關文章!