.markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{line-height:1.5;margin-top:35px;margin-bottom:10px;padding-bottom:5px}.markdown-body h1{font-size:30px;margin-bottom:5px}.markdown-body h2{padding-bottom:12px;font-size:24px;border-bottom:1px solid #ececec}.markdown-body h3{font-size:18px;padding-bottom:0}.markdown-body h4{font-size:16px}.markdown-body h5{font-size:15px}.markdown-body h6{margin-top:5px}.markdown-body p{line-height:inherit;margin-top:22px;margin-bottom:22px}.markdown-body img{max-width:100%}.markdown-body hr{border:none;border-top:1px solid #ddd;margin-top:32px;margin-bottom:32px}.markdown-body code{word-break:break-word;border-radius:2px;overflow-x:auto;background-color:#fff5f5;color:#ff502c;font-size:.87em;padding:.065em .4em}.markdown-body code,.markdown-body pre{font-family:Menlo,Monaco,Consolas,Courier New,monospace}.markdown-body pre{overflow:auto;position:relative;line-height:1.75}.markdown-body pre>code{font-size:12px;padding:15px 12px;margin:0;word-break:normal;display:block;overflow-x:auto;color:#333;background:#f8f8f8}.markdown-body a{text-decoration:none;color:#0269c8;border-bottom:1px solid #d1e9ff}.markdown-body a:active,.markdown-body a:hover{color:#275b8c}.markdown-body table{display:inline-block!important;font-size:12px;width:auto;max-width:100%;overflow:auto;border:1px solid #f6f6f6}.markdown-body thead{background:#f6f6f6;color:#000;text-align:left}.markdown-body tr:nth-child(2n){background-color:#fcfcfc}.markdown-body td,.markdown-body th{padding:12px 7px;line-height:24px}.markdown-body td{min-width:120px}.markdown-body blockquote{color:#666;padding:1px 23px;margin:22px 0;border-left:4px solid #cbcbcb;background-color:#f8f8f8}.markdown-body blockquote:after{display:block;content:}.markdown-body blockquote>p{margin:10px 0}.markdown-body ol,.markdown-body ul{padding-left:28px}.markdown-body ol li,.markdown-body ul li{margin-bottom:0;list-style:inherit}.markdown-body ol li .task-list-item,.markdown-body ul li .task-list-item{list-style:none}.markdown-body ol li .task-list-item ol,.markdown-body ol li .task-list-item ul,.markdown-body ul li .task-list-item ol,.markdown-body ul li .task-list-item ul{margin-top:0}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:3px}.markdown-body ol li{padding-left:6px}@media (max-width:720px){.markdown-body h1{font-size:24px}.markdown-body h2{font-size:20px}.markdown-body h3{font-size:18px}}
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')复制代码
总结