Heim >Web-Frontend >js-Tutorial >Der Front-End-Statusmanager, den Sie beherrschen müssen
In der Kolumne „
Mit der weit verbreiteten Verwendung asynchroner Frameworks wie React und Vue sind Front-End-State-Manager nach und nach zu einem unverzichtbaren Thema in der Front-End-Entwicklung geworden. Zum Beispiel verfügt React über das beliebte Redux, und ein weiteres Beispiel ist Vues Standard-Zustandsmanager Vuex, 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 ist Veröffentlichen und Abonnieren und der zweite ist Statusverwaltung.
Zuerst erstellen wir eine PubSub-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 Funktion verö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 eine StoreKlassenfunktion:
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 Kernfunktion commit zu implementieren. Diese Funktion verarbeitet hauptsächlich Objektänderungen und ruft die Funktionen innerhalb des mutations-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 wir dispatch Probleme. Eingabemethode 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;
};
...
}复制代码Vollständiger Code
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!