最近要实现一些表单设计器的功能,主要包含以下:
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
评论区