마스터해야 할 프런트엔드 상태 관리자

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!