圖形編輯器開發(fā)：模塊間如何通信？
大家好，我是前端西瓜哥。
圖形編輯器，隨著功能的增加，通常都會(huì)愈發(fā)復(fù)雜，良好的架構(gòu)是保證圖形編輯器持續(xù)開發(fā)高效的重要技術(shù)。
根據(jù)功能拆分成一個(gè)一個(gè)的小模塊基本是家常便飯。那么模塊之間是如何配合以及進(jìn)行數(shù)據(jù)傳輸?shù)哪兀?/p>
編輯器 github 地址：
https://github.com/F-star/suika
線上體驗(yàn)：
https://blog.fstars.wang/app/suika/
注入 Editor 實(shí)例
首先我們有一個(gè)主模塊，也是入口模塊，叫做 Editor。
為了高內(nèi)聚低耦合，其下會(huì)根據(jù)功能拆分出很多的子模塊。
這是為了讓我們要改造特定的功能時(shí)，只需要改對(duì)應(yīng)模塊的小范圍代碼，不會(huì)被其他模塊代碼干擾，也不需要去理解它們。
子模塊會(huì)在 Editor 初始化的時(shí)候，將 Editor 實(shí)例對(duì)象注入（大概算是一種依賴注入）。
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 示例作為子模塊的構(gòu)造參數(shù)
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);
}
}子模塊會(huì)將其保存為一個(gè)私有成員屬性。
以子模塊 ZoomManger 類為例，它大概是這樣的：
export class ZoomManager {
private editor: Editor
// ...
constructor(editor: Editor) {
// 將傳入的 Editor 對(duì)象保存為私有屬性
this.editor = editor
// ...
}
zoomIn(cx?: number, cy?: number) {
// 通過 this.editor 訪問到其他模塊
const zoomStep = this.editor.setting.get('zoomStep');
// ...
}子類的子類如果也要用 editor，我們就再傳，主打一個(gè)透?jìng)?，人手一?Editor。
這樣所有的子模塊就都能拿到 Editor 對(duì)象，然后通過這個(gè) Editor 對(duì)象去訪問其他的子類。
最小知識(shí)原則
其實(shí)這種做法并不滿足設(shè)計(jì)模式的 最小知識(shí)原則（或者叫迪米特法則）。
所謂最小知識(shí)原則，指的是每個(gè)模塊只和應(yīng)該要用到的模塊要交流，不要和用不到的模塊發(fā)生關(guān)系。
甚至你可以抽一層接口或類繼承的方式，將細(xì)粒度達(dá)到被關(guān)聯(lián)模塊的某幾個(gè)需要用到的方法。
目前我的項(xiàng)目還處于早期階段，復(fù)雜度很低，所以沒必要這么做，之后會(huì)不斷添加功能中讓關(guān)聯(lián)模塊發(fā)生著變化。不應(yīng)該過早優(yōu)化。這是項(xiàng)目變得非常復(fù)雜，且開發(fā)人員非常多的時(shí)候才需要考慮優(yōu)化。
事件發(fā)布訂閱
前面注入的方式，都是通過 主動(dòng)的方式 去訪問其他模塊。
有時(shí)候我們需要用 被動(dòng)的方式 去拿到其他模塊的數(shù)據(jù)，這時(shí)候我們常常會(huì)用 發(fā)布訂閱 模式。
發(fā)布訂閱模式，就是對(duì)象間存在一對(duì)多的依賴時(shí)，但一個(gè)對(duì)象改變狀態(tài)，所有的依賴對(duì)象會(huì)自動(dòng)收到通知。
做法通常就是模塊加入的事件（event）的概念，并提供一些方法接受監(jiān)聽器（函數(shù)），當(dāng)這個(gè)模塊的某些狀態(tài)發(fā)生改變時(shí)，就會(huì)這些監(jiān)聽器一一執(zhí)行，并將最新狀態(tài)傳入。
這個(gè)其實(shí)我們并不陌生，像是定時(shí)器（setTimeout）、DOM 元素的事件（click、mouseover 等）都是用了這個(gè)設(shè)計(jì)模式。
Nodejs 也有個(gè)專門的 EventEmitter 類，來支持事件訂閱。
const { EventEmitter } = require('events');
// 創(chuàng)建事件觸發(fā)器實(shí)例
const emitter = new EventEmitter();
// 給 event-1 事件添加監(jiān)聽器
emitter.on('event-1', (a, b) => {
console.log('收到事件1消息，參數(shù)為：', a, b);
});
// 觸發(fā)事件，并提供參數(shù)。
emitter.emit('event-1', 3, 4);
// 移除指定監(jiān)聽器
// emitter.off('event-1', handler);可惜 Web 端并沒有這個(gè)輪子，得自己造或者找個(gè)輪子。
因?yàn)檩喿訉?shí)現(xiàn)并不復(fù)雜，我是更建議自己實(shí)現(xiàn)，方便修改和擴(kuò)展。
通常我們只要實(shí)現(xiàn) on、off、emit 三個(gè)方法就好了。
我們?nèi)绻?TypeScript 實(shí)現(xiàn)的話，需要用類型編程，讓事件名是類型安全的，即事件名對(duì)應(yīng)的監(jiān)聽器函數(shù)參數(shù)類型要匹配。
實(shí)現(xiàn)后的用法：
const ee = new EventEmitter<{
// 指定事件和對(duì)應(yīng)的函數(shù)類型
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', '前端西瓜哥上班前的精神狀態(tài)', '前端西瓜哥上班后的精神狀態(tài)')
ee.off("update", handler);
// 編譯報(bào)錯(cuò)（數(shù)字不匹配字符串類型）
// '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，同時(shí)這個(gè)輪子是 Vue3 官方推薦的（實(shí)現(xiàn)跨組件通信的一種方式），主要原因是它也是 類型安全 的。
這個(gè)輪子很簡(jiǎn)單，高級(jí)方法也很少，源碼實(shí)現(xiàn)也就 100 多行，你完全可以拷貝過去自己改。
模塊如何使用事件
在 Nodejs 的內(nèi)部模塊，是通過繼承的方式使用 EventEmitter 的，它的做法是：
class A extends EventEmitter {
// ...
}
A.on('event-1', () => {})但我更建議用 **組合 **而不是繼承的方式。
class A {
emitter = new Emitter()
}
A.emitter.on('event-1', () => {})繼承并不是好文明，不加限制可能導(dǎo)致復(fù)雜的多層繼承。我們應(yīng)該多用組合，少用繼承。
這樣做的另一個(gè)次要好處是 EventEmitter 的方法不會(huì)污染 A 對(duì)象。
除了模塊間用發(fā)布訂閱方式通信，內(nèi)核層（Editor對(duì)象）也常常利用它和 UI 層通信。
因?yàn)闋顟B(tài)源保存在 Editor 對(duì)象中，所以需要用發(fā)布訂閱的方式去同步狀態(tài)給 UI 層。
以畫布縮放的功能為例。
畫布縮放管理類的實(shí)現(xiàn)如下：
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;
// 觸發(fā) “zoom改變” 事件
this.emitter.emit('zoomChanged', zoom, prevZoom);
}
}對(duì)應(yīng)的需要拿到 zoom 值的 React 組件，會(huì)在組件掛載時(shí)綁定監(jiān)聽器（Vue 也是類似邏輯）。
const ZoomActions = () => {
const editor = useContext(EditorContext);
const [zoom, setZoom] = useState(1);
// 組件掛載 hook
useEffect(() => {
if (editor) {
// 初始化時(shí)要主動(dòng)獲取 zoom 值
setZoom(editor.zoomManager.getZoom());
// 通過事件同步 core 層的狀態(tài)
const handler = (zoom: number) => {
setZoom(zoom);
};
editor.zoomManager.emitter.on('zoomChanged', handler);
// 組件銷毀時(shí)解綁
return () => {
editor.zoomManager.emitter.off('zoomChanged', handler);
};
}
}, []);
}結(jié)尾
本文簡(jiǎn)單介紹了圖形編輯器架構(gòu)中，如何進(jìn)行模塊間的通信。
對(duì)于某個(gè)模塊間，可以通過入口 Editor 對(duì)象，輕松主動(dòng)訪問任何其他模塊。此外還可以用事件發(fā)布訂閱的方式綁定監(jiān)聽器，在對(duì)應(yīng)模塊狀態(tài)更新后被動(dòng)地獲得通知。
