LowCode - 事件调度中心

🍒 事件调度中心

用户在画布进行增删改等操作后，调用js处理中心configCenter 的方法，更改页面代码配置，并更新视图。

js处理中心configCenter: 存储页面配置，对js进行增删改等操作，后面文章再讲

🍎 组件解耦

由于页面复杂度较高，在每个组件中调用configCenter方法，大大增加了组件的耦合度，不利于维护。所以事件中心采用【发布订阅】模式实现。

即：

subscribe(OPERATOR, onAction事件处理) => configCenter处理js => 更新视图

触发新增事件 => publish(OPERATOR, { action: 'add', props: {} })

触发删除事件 => publish(OPERATOR, { action: 'delete', props: {} })

🫐 事件处理函数onAction

事件处理函数onAction主要根据action类型进行不同的操作。

随着功能增加，action类型可能会增加到几十个。传统if () {} else if () {} 模式或者if () { return }模式下，代码越来越臃肿，可读性极具下降。

所以采用了一种更优雅的方式替换if else结构：

const actionMap = (props) => {
  return {
    add: () => {},
    delete: () => {},
    move: () => {},
    // ...
  }
}

const actionFn = actionMap(actionConfig);

// 运行
actionFn(action);

如果新功能开发需要增加js处理事件，只要增加对应的action处理函数即可。

👀 结束

有没有更好的方案？🤔