前言

时隔5年。断断续续花了亿些时间完成了js-screen-shot项目的重构，这个插件最早的目标很简单：在 Web 端实现一个类似 QQ / 微信截图的功能。使用者可以框选区域，接下来在画布里画矩形、圆形、箭头、画笔、马赛克、文字，最终保存截图内容。

因为功能越来越多。再加上那会儿我的技术水平还不够好，架构设计的比较差，代码也不可避免地变复杂了。是后面加入了 WebRTC 截屏、自定义工具栏、图片模式、Electron 适配等能力后入口文件越堆越大。

插件从发布到现在NPM的周下载量保持在1000+，同时有很多人反馈说画布里的内容无法二次编辑。于是就有了本次重构计划：让画布内的元素真正变成可管理、可选中、可移动、可重绘的对象。

这篇文章就跟大家分享下我这次重构截图插件的整体思路、用到的技术点。 还有过程中遇到的一些坑，欢迎各位感兴趣的开发者阅读这篇文章。

为什么要重构

我们先来看下重构前的结构。

早期版本的主要目录大致如下：

src
├── main.ts
└── lib
├── main-entrance
│ ├── CreateDom.ts
│ ├── InitData.ts
│ └── PlugInParameters.ts
├── split-methods
├── common-methods
└── type
└── ComponentType.ts

这个结构在功能少的时候是可以接受的。 《code》main.ts 负责串联整个截图流程，《code》split-methods

当功能继续增加后它逐渐暴露出了几个问题。

Main.ts 变得太重

未重构前,在 pre_releaseMain.ts<./code>已经有>1500多行代码.

这是会导致一个很直接问题:任何功能都可以修改主入口文件.

状态管理过于集中

旧版本里大量状态集中在 code="">,通过模块级变量保存:>

let dragging = false;说起来，let toolClickStatus = false;let selectedColor = "#F53340";/br/>
let toolName = "";let penSize =;/br/>
let history: Array =;/br/>
let cutOutBoxPosition = {
说到startX，startY:,width:,height:}