首页 > JavaScript > 理解状态机

理解状态机

最近要实现一些表单设计器的功能,主要包含以下:
1. 单据字段允许配置表达式,表达式中可以配置其他的字段,当这些字段发生改变的时候,让配置表达式的字段改变值。
2. 单据允许配置一些全局控制点,这些控制点允许配置各字段发生改变时,根据配置进行字段校验提示。
根据这些需求,准备用状态机来实现,于是乎这里尝试实现一个简单的状态机来热热手。

// src/state.js
export function createStore(reducer) {
    let currentState; // 当前状态
    const currentListeners = []; // 订阅事件
    function getState() {
        return currentState;
    }
    function dispatch(action) {
        currentState = reducer(currentState, action);
        currentListeners.forEach((listener) => listener());
    }
    function subscribe(listener) {
        currentListeners.push(listener);
        return () => {
            let index = currentListeners.findIndex((currentListen) => {
                return currentListen === listener;
            })
            currentListeners.splice(index, 1);
        }
    }
    dispatch({ type: "STATE/allen" });
    return {
        getState,
        dispatch,
        subscribe
    }
} 
// main.js
import { createStore } from './src/state.js';
// state: 状态值
// action: 让状态发生改变的行为
const reducer = function (state = 0, action) {
    switch(action.type) {
        case 'add':
            state = state + 1;
            break;
        case 'reduce':
            state = state - 1;
            break;
        default:
            break;
    }
    return state;
}
// 创建一个状态机
const FSM = createStore(reducer);
const unsubscript = FSM.subscribe(() => {
    console.log("我被加了!");
});
FSM.dispatch({ type: 'add'})
unsubscript();
console.log(FSM.getState());
打印:
我被加了!
1

评论区

粤ICP备15040393号-1