WindRunnerMax

昨天突发奇想想总结分享一下我做过的项目，因为写过的东西还是比较多的，所以也总结了好久。计算机还是非常有意思的，我也希望能够保持对于技术的好奇心，同样也希望能做出一些有意思的项目来获得一丝成就感。

概一个月前，我发现掘金老是给我推荐Canvas相关的内容，比如很多 小游戏、流程编辑器、图片编辑器 等等各种各样的项目，于是我也通过手写Canvas引擎实现了简历编辑器。

在前一段时间，我想在手机上向电脑发送文件，因为要发送的文件比较多，所以我想直接通过USB连到电脑上传输，之后发现手机竟然无法被电脑识别，于是便仿照AirDrop借助浏览器实现了局域网的文件传输能力。

在之前我们聊到了slate中的Decorator装饰器实现，这在实现搜索替换、代码高亮的实现，那么在这里我们重点聊一聊如何确定渲染出的节点处于文档数据定义中的位置。

`Server-Sent Events(SSE)`是一种由服务器单向推送实时更新到客户端的方案，基本原理是客户端通过`HTTP`请求打开与服务端的持久连接，服务端可以通过该连接连续发送事件数据。

在之前我们聊到了基于文档编辑器的数据结构设计，聊了聊基于slate实现的文档编辑器类型系统，那么当前我们来研究一下slate编辑器中的装饰器实现。

在我们的在线文档系统中，除了基础的富文本编辑能力外，搜索替换的算法同样也是重要的功能实现。纯文本搜索替换算法相对来说是比较容易实现的，而在富文本的场景中，存在图文混排、嵌入元素，则需要适配方案。

在之前我们聊了聊Canvas与基本事件组合实现了轻量级DOM，并且在此基础上实现了如何进行管理事件以及多层级渲染的能力。那么此时我们就依然在轻量级DOM的基础上，关注于实现选中绘制与拖拽多选交互方案。

基于 WebRTC 传输文件数据，并通过 Service Worker 驻留在用户浏览器后台，拦截和处理网络请求，最后使用 Stream API 配合浏览器本身的 IO 流式处理文件的下载。