图形编辑器开发:模块间如何通信?

开发 前端
本文简单介绍了图形编辑器架构中,如何进行模块间的通信。对于某个模块间,可以通过入口 Editor 对象,轻松主动访问任何其他模块。此外还可以用事件发布订阅的方式绑定监听器,在对应模块状态更新后被动地获得通知。

大家好,我是前端西瓜哥。

图形编辑器,随着功能的增加,通常都会愈发复杂,良好的架构是保证图形编辑器持续开发高效的重要技术。

根据功能拆分成一个一个的小模块基本是家常便饭。那么模块之间是如何配合以及进行数据传输的呢?

编辑器 github 地址:

https://github.com/F-star/suika

线上体验:

https://blog.fstars.wang/app/suika/

注入 Editor 实例

首先我们有一个主模块,也是入口模块,叫做 Editor。

为了高内聚低耦合,其下会根据功能拆分出很多的子模块。

这是为了让我们要改造特定的功能时,只需要改对应模块的小范围代码,不会被其他模块代码干扰,也不需要去理解它们。

子模块会在 Editor 初始化的时候,将 Editor 实例对象注入(大概算是一种依赖注入)。

class Editor {
  sceneGraph: SceneGraph;
  setting: Setting;
  viewportManager: ViewportManager;
  toolManager: ToolManager;
  commandManager: CommandManager;
  zoomManager: ZoomManager;
  hostEventManager: HostEventManager;
  selectedElements: SelectedElements;

  // ...

  constructor(options: IEditorOptions) {
    // 也有些模块不需要和其他模块通信
    this.setting = new Setting();
    
    // 将 Editor 示例作为子模块的构造参数
    this.sceneGraph = new SceneGraph(this);
    this.viewportManager = new ViewportManager(this);
    this.toolManager = new ToolManager(this);
    this.commandManager = new CommandManager(this);
    this.zoomManager = new ZoomManager(this);
    this.selectedElements = new SelectedElements(this);
    // ...
    this.hostEventManager = new HostEventManager(this);
    
    this.hostEventManager.bindHotkeys();
    this.zoomManager.zoomToFit(1);
  }
}

子模块会将其保存为一个私有成员属性。

以子模块 ZoomManger 类为例,它大概是这样的:

export class ZoomManager {
 private editor: Editor
  // ...

  constructor(editor: Editor) {
    // 将传入的 Editor 对象保存为私有属性
    this.editor = editor
    // ...
  }
  
  zoomIn(cx?: number, cy?: number) {
    // 通过 this.editor 访问到其他模块
    const zoomStep = this.editor.setting.get('zoomStep');
   // ...
}

子类的子类如果也要用 editor,我们就再传,主打一个透传,人手一份 Editor。

这样所有的子模块就都能拿到 Editor 对象,然后通过这个 Editor 对象去访问其他的子类。

最小知识原则

其实这种做法并不满足设计模式的 最小知识原则(或者叫迪米特法则)。

所谓最小知识原则,指的是每个模块只和应该要用到的模块要交流,不要和用不到的模块发生关系。

甚至你可以抽一层接口或类继承的方式,将细粒度达到被关联模块的某几个需要用到的方法。

目前我的项目还处于早期阶段,复杂度很低,所以没必要这么做,之后会不断添加功能中让关联模块发生着变化。不应该过早优化。这是项目变得非常复杂,且开发人员非常多的时候才需要考虑优化。

事件发布订阅

前面注入的方式,都是通过 主动的方式 去访问其他模块。

有时候我们需要用 被动的方式 去拿到其他模块的数据,这时候我们常常会用 发布订阅 模式。

发布订阅模式,就是对象间存在一对多的依赖时,但一个对象改变状态,所有的依赖对象会自动收到通知。

做法通常就是模块加入的事件(event)的概念,并提供一些方法接受监听器(函数),当这个模块的某些状态发生改变时,就会这些监听器一一执行,并将最新状态传入。

这个其实我们并不陌生,像是定时器(setTimeout)、DOM 元素的事件(click、mouseover 等)都是用了这个设计模式。

Nodejs 也有个专门的 EventEmitter 类,来支持事件订阅。

const { EventEmitter } = require('events');

// 创建事件触发器实例
const emitter = new EventEmitter();

// 给 event-1 事件添加监听器
emitter.on('event-1', (a, b) => {
  console.log('收到事件1消息,参数为:', a, b);
});

// 触发事件,并提供参数。
emitter.emit('event-1', 3, 4);

// 移除指定监听器
// emitter.off('event-1', handler);

可惜 Web 端并没有这个轮子,得自己造或者找个轮子。

因为轮子实现并不复杂,我是更建议自己实现,方便修改和扩展。

通常我们只要实现 on、off、emit 三个方法就好了。

我们如果用 TypeScript 实现的话,需要用类型编程,让事件名是类型安全的,即事件名对应的监听器函数参数类型要匹配。

实现后的用法:

const ee = new EventEmitter<{
  // 指定事件和对应的函数类型
  update(newVal: string, prevVal: string): void;
  destroy(): void;
}>();
const handler = (newVal: string, prevVal: string) => {
  console.log(newVal, prevVal)
}
ee.on("update", handler);
ee.emit('update', '前端西瓜哥上班前的精神状态', '前端西瓜哥上班后的精神状态')
ee.off("update", handler);

// 编译报错(数字不匹配字符串类型)
// 'number' is not assignable to parameter of type 'string'
ee.emit('update', 1, 2)

// (val: number) => void' is not assignable to parameter of type '() => void
ee.on('destroy', (val: number) => {})

轮子的话我建议 mitt,同时这个轮子是 Vue3 官方推荐的(实现跨组件通信的一种方式),主要原因是它也是 类型安全 的。

这个轮子很简单,高级方法也很少,源码实现也就 100 多行,你完全可以拷贝过去自己改。

模块如何使用事件

在 Nodejs 的内部模块,是通过继承的方式使用 EventEmitter 的,它的做法是:

class A extends EventEmitter {
  // ...
}

A.on('event-1', () => {})

但我更建议用 **组合 **而不是继承的方式。

class A {
  emitter = new Emitter()
}

A.emitter.on('event-1', () => {})

继承并不是好文明,不加限制可能导致复杂的多层继承。我们应该多用组合,少用继承。

这样做的另一个次要好处是 EventEmitter 的方法不会污染 A 对象。

除了模块间用发布订阅方式通信,内核层(Editor对象)也常常利用它和 UI 层通信。

因为状态源保存在 Editor 对象中,所以需要用发布订阅的方式去同步状态给 UI 层。

以画布缩放的功能为例。

画布缩放管理类的实现如下:

class ZoomManager {
  private zoom = 1;
  // 自己造的 EventEmitter 轮子
  private emitter = new EventEmitter<{
    zoomChange(zoom: number, prevZoom: number): void;
  }>();
  
  setZoom(zoom: number) {
    const prevZoom = this.zoom;
    this.zoom = zoom;

    // 触发 “zoom改变” 事件
    this.emitter.emit('zoomChanged', zoom, prevZoom);
  }
}

对应的需要拿到 zoom 值的 React 组件,会在组件挂载时绑定监听器(Vue 也是类似逻辑)。

const ZoomActions = () => {
  const editor = useContext(EditorContext);
  const [zoom, setZoom] = useState(1);
  
  // 组件挂载 hook
  useEffect(() => {
    if (editor) {
      // 初始化时要主动获取 zoom 值
      setZoom(editor.zoomManager.getZoom());

      // 通过事件同步 core 层的状态
      const handler = (zoom: number) => {
        setZoom(zoom);
      };
      editor.zoomManager.emitter.on('zoomChanged', handler);
  
      // 组件销毁时解绑
      return () => {
        editor.zoomManager.emitter.off('zoomChanged', handler);
      };
    }
  }, []);
}

结尾

本文简单介绍了图形编辑器架构中,如何进行模块间的通信。

对于某个模块间,可以通过入口 Editor 对象,轻松主动访问任何其他模块。此外还可以用事件发布订阅的方式绑定监听器,在对应模块状态更新后被动地获得通知。

责任编辑:姜华 来源: 前端西瓜哥
相关推荐

2023-10-19 10:12:34

图形编辑器开发缩放图形

2023-08-31 11:32:57

图形编辑器contain

2023-09-07 08:24:35

图形编辑器开发绘制图形工具

2023-09-26 07:39:21

2024-01-08 08:30:05

光标图形编辑器开发游标

2023-08-28 08:10:50

Hex图形编辑器

2023-10-10 16:04:30

图形编辑器格式转换

2023-10-08 08:11:40

图形编辑器快捷键操作

2024-01-03 08:43:17

图形编辑器旋转控制点缩放控制点

2023-07-07 13:56:01

图形编辑器画布缩放

2023-01-18 08:30:40

图形编辑器元素

2023-02-01 09:21:59

图形编辑器标尺

2023-07-31 08:46:07

图形编辑器图形自动对齐

2023-02-06 16:59:57

Canvas编辑器

2023-04-07 08:02:30

图形编辑器对齐功能

2023-06-12 08:22:56

图形编辑器工具

2023-04-10 08:45:44

图形编辑器排列移动功能

2023-05-09 08:15:32

图形编辑器撤销重做功能

2023-02-09 07:02:30

图形编辑器修改图形

2023-10-20 08:02:25

图形编辑器前端
点赞
收藏

51CTO技术栈公众号