建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是前端西瓜哥。
創(chuàng)新互聯(lián)公司專注于中大型企業(yè)的網(wǎng)站設(shè)計制作、成都網(wǎng)站制作和網(wǎng)站改版、網(wǎng)站營銷服務(wù)，追求商業(yè)策劃與數(shù)據(jù)分析、創(chuàng)意藝術(shù)與技術(shù)開發(fā)的融合，累計客戶近千家，服務(wù)滿意度達(dá)97%。幫助廣大客戶順利對接上互聯(lián)網(wǎng)浪潮，準(zhǔn)確優(yōu)選出符合自己需要的互聯(lián)網(wǎng)運用，我們將一直專注品牌網(wǎng)站建設(shè)和互聯(lián)網(wǎng)程序開發(fā)，在前進(jìn)的路上，與客戶一起成長！
圖形編輯器，隨著功能的增加，通常都會愈發(fā)復(fù)雜，良好的架構(gòu)是保證圖形編輯器持續(xù)開發(fā)高效的重要技術(shù)。
根據(jù)功能拆分成一個一個的小模塊基本是家常便飯。那么模塊之間是如何配合以及進(jìn)行數(shù)據(jù)傳輸?shù)哪兀?/p>
編輯器 github 地址：
https://github.com/F-star/suika
線上體驗：
https://blog.fstars.wang/app/suika/
注入 Editor 實例
首先我們有一個主模塊，也是入口模塊，叫做 Editor。
為了高內(nèi)聚低耦合，其下會根據(jù)功能拆分出很多的子模塊。
這是為了讓我們要改造特定的功能時，只需要改對應(yīng)模塊的小范圍代碼，不會被其他模塊代碼干擾，也不需要去理解它們。
子模塊會在 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 示例作為子模塊的構(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);
}
}子模塊會將其保存為一個私有成員屬性。
以子模塊 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 對象去訪問其他的子類。
最小知識原則
其實這種做法并不滿足設(shè)計模式的 最小知識原則（或者叫迪米特法則）。
所謂最小知識原則，指的是每個模塊只和應(yīng)該要用到的模塊要交流，不要和用不到的模塊發(fā)生關(guān)系。
甚至你可以抽一層接口或類繼承的方式，將細(xì)粒度達(dá)到被關(guān)聯(lián)模塊的某幾個需要用到的方法。
目前我的項目還處于早期階段，復(fù)雜度很低，所以沒必要這么做，之后會不斷添加功能中讓關(guān)聯(lián)模塊發(fā)生著變化。不應(yīng)該過早優(yōu)化。這是項目變得非常復(fù)雜，且開發(fā)人員非常多的時候才需要考慮優(yōu)化。
事件發(fā)布訂閱
前面注入的方式，都是通過 主動的方式 去訪問其他模塊。
有時候我們需要用 被動的方式 去拿到其他模塊的數(shù)據(jù)，這時候我們常常會用 發(fā)布訂閱 模式。
發(fā)布訂閱模式，就是對象間存在一對多的依賴時，但一個對象改變狀態(tài)，所有的依賴對象會自動收到通知。
做法通常就是模塊加入的事件（event）的概念，并提供一些方法接受監(jiān)聽器（函數(shù)），當(dāng)這個模塊的某些狀態(tài)發(fā)生改變時，就會這些監(jiān)聽器一一執(zhí)行，并將最新狀態(tài)傳入。
這個其實我們并不陌生，像是定時器（setTimeout）、DOM 元素的事件（click、mouseover 等）都是用了這個設(shè)計模式。
Nodejs 也有個專門的 EventEmitter 類，來支持事件訂閱。
const { EventEmitter } = require('events');
// 創(chuàng)建事件觸發(fā)器實例
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 端并沒有這個輪子，得自己造或者找個輪子。
因為輪子實現(xiàn)并不復(fù)雜，我是更建議自己實現(xiàn)，方便修改和擴(kuò)展。
通常我們只要實現(xiàn) on、off、emit 三個方法就好了。
我們?nèi)绻?TypeScript 實現(xiàn)的話，需要用類型編程，讓事件名是類型安全的，即事件名對應(yīng)的監(jiān)聽器函數(shù)參數(shù)類型要匹配。
實現(xiàn)后的用法：
const ee = new EventEmitter<{
// 指定事件和對應(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);
// 編譯報錯（數(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，同時這個輪子是 Vue3 官方推薦的（實現(xiàn)跨組件通信的一種方式），主要原因是它也是 類型安全 的。
這個輪子很簡單，高級方法也很少，源碼實現(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)該多用組合，少用繼承。
這樣做的另一個次要好處是 EventEmitter 的方法不會污染 A 對象。
除了模塊間用發(fā)布訂閱方式通信，內(nèi)核層（Editor對象）也常常利用它和 UI 層通信。
因為狀態(tài)源保存在 Editor 對象中，所以需要用發(fā)布訂閱的方式去同步狀態(tài)給 UI 層。
以畫布縮放的功能為例。
畫布縮放管理類的實現(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);
}
}對應(yīng)的需要拿到 zoom 值的 React 組件，會在組件掛載時綁定監(jiān)聽器（Vue 也是類似邏輯）。
const ZoomActions = () => {
const editor = useContext(EditorContext);
const [zoom, setZoom] = useState(1);
// 組件掛載 hook
useEffect(() => {
if (editor) {
// 初始化時要主動獲取 zoom 值
setZoom(editor.zoomManager.getZoom());
// 通過事件同步 core 層的狀態(tài)
const handler = (zoom: number) => {
setZoom(zoom);
};
editor.zoomManager.emitter.on('zoomChanged', handler);
// 組件銷毀時解綁
return () => {
editor.zoomManager.emitter.off('zoomChanged', handler);
};
}
}, []);
}結(jié)尾
本文簡單介紹了圖形編輯器架構(gòu)中，如何進(jìn)行模塊間的通信。
對于某個模塊間，可以通過入口 Editor 對象，輕松主動訪問任何其他模塊。此外還可以用事件發(fā)布訂閱的方式綁定監(jiān)聽器，在對應(yīng)模塊狀態(tài)更新后被動地獲得通知。
分享題目：圖形編輯器開發(fā)：模塊間如何通信？
文章鏈接：http://www.5511xx.com/article/cohshie.html
