##狀態管理器
接著
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));
}
...
}复制代码登入後複製
實作訂閱
實作完成發布函數
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')复制代码登入後複製
#總結
以上就是基礎版本的全域狀態管理器，包含基本的同步和非同步處理，插件，發布訂閱功能，當然還有一些細節需要完善。有問題歡迎評論中指出，謝謝。
相關免費學習推薦：javascript#（影片）
以上是你必須要掌握的前端狀態管理器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
