javascript 칼럼에서는 프런트엔드 상태 관리자를 마스터하는 방법을 알려드립니다.
상태 관리자
React 및 Vue와 같은 비동기 프레임워크가 널리 사용되면서 프런트 엔드 상태 관리자는 점차 프런트 엔드 개발에서 없어서는 안 될 주제가 되었습니다. 예를 들어 React에는 인기 있는 Redux가 있고, 또 다른 예로는 Vue의 표준 상태 관리자인 Vuex가 있는데, 이는 업계에서 비교적 성숙한 상태 관리자이므로 기본 자바스크립트를 사용하여 하나의 상태 관리자를 구현하겠습니다. .
주로 두 가지 측면이 포함됩니다. 첫 번째는 게시 및 구독이고 두 번째는 상태 관리입니다.
게시 및 구독PubSub
클래스 만들기
먼저 PubSub 클래스 함수를 만듭니다.
class PubSub { constructor() { // 收集事件
this.events = {};
}
}复制代码로그인 후 복사
implement Publish
그런 다음 게시 기능을 구현합니다.
class PubSub {
... // 发布
publish(event, data = {}) { const self = this;
/*
* 校验是否存在事件
* 默认返回一个空数组
*/
if (!self.events.hasOwnProperty(event)) { return [];
}
// 遍历执行事件队列里的回调函数
return self.events[event].map((callback) => callback(data));
}
...
}复制代码로그인 후 복사
implement 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;
},
});
}
}复制代码로그인 후 복사
implement 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;
};
...
}复制代码로그인 후 복사
구현
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
