赵康的日常专栏

从部署到实践，即刻拥有你的专属龙虾助手

OpenClaw开发者专区🦞🦞🦞

自行/邀约他人一键搬运博客，享价值百万资源包

腾讯云自媒体同步曝光计划

往期视频·干货材料·成员作品 最新动态

腾讯技术创作特训营知识专栏

新邀入驻腾讯云开发者社区，福利多多！

最近，CSS 引入了一项新功能：Container Queries (https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_container_queries)。它可以替代 Media Queries 并实现 Media Queries 无法胜任的任务。

你也许不再需要使用 CSS Media Queries（媒体查询）了

为什么在 CSS flex 布局中存在 align-items 和 align-self，却没有 justify-items 和 justify-self 呢？要解答这个问题，首先需要理解主轴（main axis）和交叉轴（cross axis）之间的差异。

为什么 CSS flex 布局中没有 `justify-items` 和 `justify-self`?

在众多项目中，React代码的维护经常变得棘手。其中一个常见问题是：将业务逻辑直接嵌入通用组件中，导致通用组件与业务逻辑紧密耦合，使其失去“通用性”。这种做法使通用组件过于依赖具体业务逻辑，导致代码难以维护和扩展。

如何编写难以维护的 React 代码？耦合通用组件与业务逻辑

Static Export 是一种 Web 开发模式，它允许我们在构建网站时将页面提前生成为静态 HTML 文件，而不是在每次请求时动态生成。这意味着页面内容在构建时就已经准备好，而不是等待用户请求时才生成。这样做的好处是：

5 分钟理解 Next.js Static Export

最近项目上有个需求，需要实现：录音、回放录音、实现音频可视化效果、上传wav格式的录音等功能。于是乎，我就顺便调研了下如何在浏览器中处理音频，发现 HTML5 中有专门的API用来处理音频。

使用 MediaStream Recording API 和 Web Audio API 在浏览器中处理音频（未完待续）

在许多项目中，我们经常会遇到一些难以维护的React代码。其中一种常见的情况是：子组件直接操作父组件方法，从而导致父子组件深度耦合。这样的实现让子组件过于依赖父组件的具体实现细节，使得代码难以维护和扩展。
 让我们来看一个例子：

如何编写难以维护的React代码？耦合组件

在许多项目中，我们经常会遇到一些难以维护的React代码。其中一种常见的情况是滥用useEffect钩子，特别是在处理衍生状态时。让我们来看一个例子：

如何编写难以维护的React代码？——滥用useEffect

原因分析：这是因为编辑器平移或调整大小后，editor.blankSpace没有及时更新。

从零开始，开发一个 Web Office 套件（16）：拖动控制点，调整编辑器大小

Bug表现：如下图，我加了一些辅助线。当我的鼠标从两个边框重叠处开始拖动，且我拖动了一定距离（记为n），但是编辑器却移动了2n的距离。

从零开始，开发一个 Web Office 套件（15）：拖动边框，平移编辑器

在Mac上，当用户按下command键时，KeyboardEvent.metaKey为true；在Windows上，当用户按下ctrl键时，KeyboardEvent.ctrlKey为true.

从零开始，开发一个 Web Office 套件（14）：复制、粘贴、剪切、全选

从零开始，开发一个 Web Office 套件（13）：删除、替换已选中文字

从零开始，开发一个 Web Office 套件（12）：删除文字 & 回车换行

输入中文（或者其它需要输入法的语言），跟输入英文的不同之处在于：我们通过键盘输入的文字，并不是直接显示在input框里。而是要通过输入法进行映射、选择，再填入input框里。

从零开始，开发一个 Web Office 套件（11）：支持中文输入法（or 其它使用输入法的语言）

为了实现键盘输入，我们需要在container div元素（canvas父元素）中插入一个input（或者textarea）元素，作为代理，来捕获键盘相关事件。

从零开始，开发一个 Web Office 套件（10）：捕获键盘事件，输入文字

上一节我们初步完成了拖动选中文字的feature，不过还遗留了一些 edge case。这篇文章我们来处理它们。

从零开始，开发一个 Web Office 套件（9）：拖动鼠标选中文字 Edge Case

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

从零开始，开发一个 Web Office 套件（8）：状态管理 & 拖动鼠标选中文字

为了实现这个feature，我们就要监听编辑器空白处的click事件。与此同时，我们会遇到和hover事件相同的问题: 我们需要找到最上层的元素（Char or 空白），触发它的点击事件。

从零开始，开发一个 Web Office 套件（7）：新的问题—— Click 事件的 z-index

然后，在CanvasTextEditor中添加函数createBlinkingCursor，暂时将光标绘制在最后一个字符后面。

从零开始，开发一个 Web Office 套件（6）：光标 & Click 事件

如上图，CanvasTextEditorChar的包围盒是由：left, boundingBoxTop, width, height定义的。另外，其top仅指的是textBaseLine的纵坐标，跟包围盒没有直接的关系。
 我们期望的结果是：当鼠标hover在包围盒上时，产生相应变化。
 所以，不能直接让CanvasTextEditorChar直接继承ResponsiveToMouseHover，因为二者的top含义完全不同。而是要让CanvasTextEditorChar持有它作为自己的包围盒。

从零开始，开发一个 Web Office 套件（5）：Mouse hover over text

《从零开始, 开发一个 Web Office 套件》系列博客目录
 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 

从零开始，开发一个 Web Office 套件（4）：新的问题—— z-index

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

腾讯云开发者社区推出了赵康的日常专栏专栏，为你提供了赵康的日常专栏的相关文章，致力于帮助开发者快速成长与发展。

赵康的日常专栏

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐