如何从零起步,构建 Web Office 套件中的状态管理功能?

2026-05-22 23:450阅读0评论SEO资讯
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计860个文字,预计阅读时间需要4分钟。

这是一个系列博客,旨在制作一个基于HTML Canvas、类似微软Office的Web Office套件(包括文档、表格、幻灯片等)。

这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的、类似于微软 Office 的 Web Office 套件(包括:文档、表格、幻灯片……等等)。
自由互联:《从零开始, 开发一个 Web Office 套件》系列博客目录
富文本编辑器 Github repo 地址:github.com/zhaokang555/canvas-text-editor

2. 富文本编辑器 (MVP) 2.20 状态管理 2.20.1 重构代码

在添加状态管理之前,我们先来重构下代码。首先,将之前的两个类改一下名字:

  • rename ResponsiveToMouseHover to HoverableZone
  • rename ClickZone to ClickableZone

然后,新建路径src/core/mouse,将上面两个类挪进来:

2.20.2 添加状态管理

之前,我们的一些全局状态是以class static field的方式存在的。这样做刚开始可能不会出现问题,但是到后面会出问题:

  • 状态分散
  • 无法处理多个Editor实例的情形

所以,我们需要引入状态管理。

阅读全文

本文共计860个文字,预计阅读时间需要4分钟。

这是一个系列博客,旨在制作一个基于HTML Canvas、类似微软Office的Web Office套件(包括文档、表格、幻灯片等)。

这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的、类似于微软 Office 的 Web Office 套件(包括:文档、表格、幻灯片……等等)。
自由互联:《从零开始, 开发一个 Web Office 套件》系列博客目录
富文本编辑器 Github repo 地址:github.com/zhaokang555/canvas-text-editor

2. 富文本编辑器 (MVP) 2.20 状态管理 2.20.1 重构代码

在添加状态管理之前,我们先来重构下代码。首先,将之前的两个类改一下名字:

  • rename ResponsiveToMouseHover to HoverableZone
  • rename ClickZone to ClickableZone

然后,新建路径src/core/mouse,将上面两个类挪进来:

2.20.2 添加状态管理

之前,我们的一些全局状态是以class static field的方式存在的。这样做刚开始可能不会出现问题,但是到后面会出问题:

  • 状态分散
  • 无法处理多个Editor实例的情形

所以,我们需要引入状态管理。

阅读全文