In der Kolumne „
Mit der weit verbreiteten Verwendung asynchroner Frameworks wieReactundVuesind Front-End-State-Manager nach und nach zu einem unverzichtbaren Thema in der Front-End-Entwicklung geworden. Zum Beispiel verfügtReactüber das beliebteRedux, und ein weiteres Beispiel istVues Standard-ZustandsmanagerVuex, beides relativ ausgereifte Zustandsmanager in der Branche, daher werden wir natives Javascript verwenden, um einen zu implementieren Staatsmanager.
beinhaltet hauptsächlich zwei Aspekte: Der erste istVeröffentlichen und Abonnierenund der zweite istStatusverwaltung.
Zuerst erstellen wir einePubSub-Klassenfunktion:
class PubSub { constructor() { // 收集事件 this.events = {}; } }复制代码
Dann implementieren wir eine Veröffentlichungsfunktion:
class PubSub { ... // 发布 publish(event, data = {}) { const self = this; /* * 校验是否存在事件 * 默认返回一个空数组 */ if (!self.events.hasOwnProperty(event)) { return []; } // 遍历执行事件队列里的回调函数 return self.events[event].map((callback) => callback(data)); } ... }复制代码
Umsetzen Sie die Veröffentlichung vollständig Funktionveröffentlichen, dann implementieren wir die Abonnementfunktion:
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)); } }复制代码
Zuerst erstellen wir eineStoreKlassenfunktion:
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; }, }); } }复制代码
Dann wir Kommen Sie, um die Kernfunktioncommitzu implementieren. Diese Funktion verarbeitet hauptsächlich Objektänderungen und ruft die Funktionen innerhalb desmutations-Objekts auf:
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; }; ... }复制代码
implementieren wirdispatchProbleme. Eingabemethodecommit:
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')复制代码
Verwandte kostenlose Lernempfehlungen:Javascript(Video)
Das obige ist der detaillierte Inhalt vonDer Front-End-Statusmanager, den Sie beherrschen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So konvertieren Sie Kleinbuchstaben in C-Sprache in Großbuchstaben
Verwendung der Wertfunktion
Es gibt verschiedene Arten von Browserkerneln
So stellen Sie den gelöschten WeChat-Chat-Verlauf wieder her
So verwenden Sie onclick in HTML
So verwenden Sie den Unlocker
vscode
Einführung in den Eröffnungsort von Win8
