javascript栏目教大家掌握フロントエンドステータスマネージャー。
ステータスマネージャー
随伴Reactand Vue などのブロックフレームの境界用途であり、フロントエンド状態管理者は、徐々にフロントエンド公開比の最小値を取得します。 #Vue 割り当てられた状態管理者 Vuex は、内部的に成熟した状態管理者であり、今後、JavaScript を使用して状態管理者を実現します。主に 2 つの側面が含まれます。最初は 配信許可 、2 番目は 状態管理 です。 #创建类
首先我们先创建一
PubSub类関数：
class PubSub { constructor() { // 收集事件
this.events = {};
}
}复制代码ログイン後にコピー
我次们来实现一播放関数：
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、この関数主要処理オブジェクト変更、调用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 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
