- 博客(400)
- 收藏
- 关注
RSS订阅原创 WHAT - CSS 伪元素
:before和::after用于添加装饰内容，必须有content属性。和用于样式化文本的部分内容。可以自定义选中文本的颜色和背景。控制输入框的占位符样式。伪类和伪元素可以结合使用。
2025-04-03 15:41:17
393
原创 WHAT - CSS 伪类
伪类以开头，主要用于元素状态的变化（:hover:checked结构相关的伪类用于选择特定子元素:not()和:has()提供更灵活的选择器控制能力。
2025-04-03 15:35:58
219
原创 HOW - Axios 拦截器特性
Axios 是基于和Promise进行封装的 HTTP 客户端。在浏览器环境下，Axios 使用发送 HTTP 请求，并基于它进行封装，提供更简洁的 API 和更好的错误处理机制。例如，它支持请求和响应的拦截器、超时设置、请求取消等功能，而这些都需要额外的封装才能在中实现。Node.js 的 http 模块在 Node.js 环境下，Axios 使用http或https模块代替发送 HTTP 请求，从而实现跨环境的兼容性。PromiseAxios 的 API 是基于Promise。
2025-04-03 14:01:53
1039
原创 WHAT - React 主要大版本更新及其区别
React 的每个大版本更新都带来了重要的新特性和改进，从 Fiber 架构到 Hooks，再到 Concurrent Mode 和 Server Components，React 不断优化其性能和开发者体验。随着 React 19 的即将发布，React 继续引领前端开发的前沿，提供更高效、更灵活的工具来构建现代 Web 应用。
2025-04-03 11:47:24
482
原创 WHAT - APP 热更新
热更新是一种强大的技术手段，可以显著提升应用的迭代速度和用户体验。然而，实现热更新需要综合考虑技术实现、安全性、兼容性以及平台政策等多方面因素。通过合理的设计和严格的测试，开发者可以充分利用热更新的优势，为用户提供更加优质和高效的应用体验。
2025-04-03 11:12:07
810
原创 WHAT - uni-app 条件编译技术
在 UniApp 中，条件编译是一种根据不同的平台或环境，编译出不同代码的技术。由于 UniApp 支持多端开发（如 H5、小程序、App 等），不同平台的 API、组件和功能可能存在差异，因此条件编译可以帮助开发者编写平台特定的代码，确保应用在不同平台上都能正常运行。
2025-04-03 10:58:15
348
原创 WHAT - 如何理解中间件
在后端开发中，中间件是指位于操作系统和应用程序之间的一层软件，或者是在Web框架中，位于请求和响应处理之间的一系列函数或组件。中间件用于处理请求、执行业务逻辑、管理会话、处理错误等，常用于构建可扩展和可维护的应用程序。在前端开发中，尤其是在现代前端框架和工具链中，中间件的概念与后端有所不同。前端中间件通常指在数据流或请求/响应过程中插入的逻辑，用于处理、转换或增强数据。它们常用于异步操作、状态管理、日志记录等场景。中间件在后端和前端开发中都是用于增强应用功能、处理流程中的特定任务的重要工具。
2025-04-02 16:55:25
1338
原创 WHAT - 从后端开发的 trace 追踪认识请求的完整流转过程
在后端开发中，trace 是一个涵盖分布式追踪、日志记录、性能监控等多个方面的综合性概念。通过有效的 trace 机制，开发者可以更好地理解系统的运行状态，及时发现和解决问题，从而提升系统的稳定性和性能。
2025-04-02 16:42:29
935
原创 WHAT - Electron 系列（一）
（Windows、macOS 和 Linux）的开源框架，基于。（如文件系统、操作系统 API 等）。来创建桌面应用，同时具备。主进程和渲染进程可以通过。
2025-04-02 14:23:58
967
原创 WHAT - 程序员英语之美式发音学习系列（七）
【第一阶段】简单入门：自然拼读【第二阶段】系统学习：音标 + 音节 + 发音技巧 + 节奏语调【第三阶段】强化训练&反复训练其中第二阶段是重点，我们将学习：音标、音节、重读音节、浊化现象、闪音（flap t&d)、词尾 s、es 的发音、词尾 ed 的发音、连读：辅音+元音型、连读：r/re+元音型、连读：h击穿音型、连读：元音+元音型、连读：辅音+辅音型、失去爆破、鼻腔爆破、缩读、弱读（功能词）、弱读（缩写）等具体内容。注意，课程是文字版，具体发音可以通过在线词典（如有道词典）进行发音练习。
2025-04-02 12:04:51
18
原创 WHAT - 程序员英语之美式发音学习系列（六）
【第一阶段】简单入门：自然拼读【第二阶段】系统学习：音标 + 音节 + 发音技巧 + 节奏语调【第三阶段】强化训练&反复训练其中第二阶段是重点，我们将学习：音标、音节、重读音节、浊化现象、闪音（flap t&d)、词尾 s、es 的发音、词尾 ed 的发音、连读：辅音+元音型、连读：r/re+元音型、连读：h击穿音型、连读：元音+元音型、连读：辅音+辅音型、失去爆破、鼻腔爆破、缩读、弱读（功能词）、弱读（缩写）等具体内容。注意，课程是文字版，具体发音可以通过在线词典（如有道词典）进行发音练习。
2025-04-02 11:41:22
18
原创 WHAT - 进入一个组件获取必要数据的方式
方式适用场景优点缺点loader路由级数据，SSR 友好组件渲染前加载，减少 UI 闪烁只能用于useEffectuseState组件级数据，动态交互适用范围广初始渲染时没有数据useSWR需要缓存、自动更新处理状态管理、减少重复请求需要额外安装依赖props传递数据父组件已有数据避免重复请求，简单直接深层嵌套时不方便全局数据管理适用于跨组件数据共享代码复杂度增加✅如果数据是路由级的，推荐 loader。✅如果数据是组件级的，推荐 useEffectuseState。
2025-04-01 15:09:28
952
原创 WHAT - 程序员英语之美式发音学习系列（五）
【第一阶段】简单入门：自然拼读【第二阶段】系统学习：音标 + 音节 + 发音技巧 + 节奏语调【第三阶段】强化训练&反复训练其中第二阶段是重点，我们将学习：音标、音节、重读音节、浊化现象、闪音（flap t&d)、词尾 s、es 的发音、词尾 ed 的发音、连读：辅音+元音型、连读：r/re+元音型、连读：h击穿音型、连读：元音+元音型、连读：辅音+辅音型、失去爆破、鼻腔爆破、缩读、弱读（功能词）、弱读（缩写）等具体内容。注意，课程是文字版，具体发音可以通过在线词典（如有道词典）进行发音练习。
2025-03-28 12:42:38
63
原创 WHAT - 程序员英语之美式发音学习系列（四）
【第一阶段】简单入门：自然拼读【第二阶段】系统学习：音标 + 音节 + 发音技巧 + 节奏语调【第三阶段】强化训练&反复训练其中第二阶段是重点，我们将学习：音标、音节、重读音节、浊化现象、闪音（flap t&d)、词尾 s、es 的发音、词尾 ed 的发音、连读：辅音+元音型、连读：r/re+元音型、连读：h击穿音型、连读：元音+元音型、连读：辅音+辅音型、失去爆破、鼻腔爆破、缩读、弱读（功能词）、弱读（缩写）等具体内容。注意，课程是文字版，具体发音可以通过在线词典（如有道词典）进行发音练习。
2025-03-27 16:12:06
528
原创 WHAT - 程序员英语之美式发音学习系列（三）
【第一阶段】简单入门：自然拼读【第二阶段】系统学习：音标 + 音节 + 发音技巧 + 节奏语调【第三阶段】强化训练&反复训练其中第二阶段是重点，我们将学习：音标、音节、重读音节、浊化现象、闪音（flap t&d)、词尾 s、es 的发音、词尾 ed 的发音、连读：辅音+元音型、连读：r/re+元音型、连读：h击穿音型、连读：元音+元音型、连读：辅音+辅音型、失去爆破、鼻腔爆破、缩读、弱读（功能词）、弱读（缩写）等具体内容。注意，课程是文字版，具体发音可以通过在线词典（如有道词典）进行发音练习。
2025-03-27 16:10:45
561
原创 WHAT - 程序员英语之美式发音学习系列（二）
【第一阶段】简单入门：自然拼读【第二阶段】系统学习：音标 + 音节 + 发音技巧 + 节奏语调【第三阶段】强化训练&反复训练其中第二阶段是重点，我们将学习：音标、音节、重读音节、浊化现象、闪音（flap t&d)、词尾 s、es 的发音、词尾 ed 的发音、连读：辅音+元音型、连读：r/re+元音型、连读：h击穿音型、连读：元音+元音型、连读：辅音+辅音型、失去爆破、鼻腔爆破、缩读、弱读（功能词）、弱读（缩写）等具体内容。注意，课程是文字版，具体发音可以通过在线词典（如有道词典）进行发音练习。
2025-03-26 16:56:25
692
原创 WHAT - 程序员英语之美式发音学习系列（一）
【第一阶段】简单入门：自然拼读【第二阶段】系统学习：音标 + 音节 + 发音技巧 + 节奏语调【第三阶段】强化训练&反复训练其中第二阶段是重点，我们将学习：音标、音节、重读音节、浊化现象、闪音（flap t&d)、词尾 s、es 的发音、词尾 ed 的发音、连读：辅音+元音型、连读：r/re+元音型、连读：h击穿音型、连读：元音+元音型、连读：辅音+辅音型、失去爆破、鼻腔爆破、缩读、弱读（功能词）、弱读（缩写）等具体内容。注意，课程是文字版，具体发音可以通过在线词典（如有道词典）进行发音练习。
2025-03-26 16:53:57
626
原创 WHAT - 为什么 NAS 可以解决在访问资源卡顿问题
NAS 通过本地存储、局域网播放、流媒体优化和离线下载等方式，大幅降低了对互联网的依赖，从而解决了户外观影时因网络不稳定而导致的卡顿问题。
2025-03-24 19:14:38
367
原创 WHAT - NAS 是什么
NAS（Network Attached Storage，网络附加存储）是一种专门用于数据存储和共享的设备，它通过网络提供文件存取服务。NAS 设备通常具备独立的操作系统和管理界面，支持多个用户或设备通过局域网（LAN）或互联网访问存储的数据。问题NAS 解决方案设备存储空间不足提供大容量存储，支持多设备访问数据分散难管理统一存储，支持自动备份与同步文件共享难多人协作、权限管理，提升工作效率远程访问需求支持 VPN、Web、手机端远程访问数据安全RAID 保护、快照备份、防止数据丢失。
2025-03-24 18:53:27
598
原创 HOW - 如何实现搜索结果关键词高亮展示 - 多个关键词版本
中我们已经介绍过几种方法。假如 keyword 是一个数组呢？即我们要支持在文本里高亮多个关键词。
2025-03-23 17:31:23
260
原创 HOW - 如何实现一个组件Keep-Alive？
是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。在切换时创建新的组件实例通常是有意义的，但在上述背景描述的场景中，我们的确想要组件能在被“切走”的时候保留它们的状态。要解决这个问题，我们可以用-- 非活跃的组件将会被缓存！
2025-03-21 15:14:07
992
原创 WHAT - 你真的知道怎么用 word-break 和 word-wrap 吗
属性是否保留单词完整性适用场景✅ 优先保留单词完整性，超长才拆分适用于希望单词尽量完整的情况❌ 强制拆分，不管单词是否超出适用于需要完全填充容器、不在乎单词完整性的情况✅ 更现代的替代方案推荐使用，行为更符合直觉推荐使用如果你希望单词尽量完整，超长才换行如果你希望不管单词完整性，强制断行。
2025-03-21 12:05:16
608
原创 WHAT - CPU密集型和IO密集型
WHAT - 从底层运行机制看不同编程语言之间的差异WHAT - 进程、线程和协程：资源管理&调度机制&执行性能那在编程中，CPU 密集型和I/O 密集型其实两类典型的性能瓶颈场景。理解它们的本质差异，有助于选择合适的编程模型（如多进程、多线程、协程）来优化性能。对比维度CPU 密集型I/O 密集型性能瓶颈CPU 运算I/O 等待CPU 利用率高低适用机制✅ 多进程、线程池✅ 异步 I/O、协程最佳实践分解任务，利用多核 CPU非阻塞 I/O，减少阻塞等待示例语言若你的程序花费大量时间在。
2025-03-12 16:52:40
782
原创 WHAT - 进程、线程和协程：资源管理&调度机制&执行性能
条件/目标推荐机制处理大量独立任务（如CPU密集型计算）✅多进程处理I/O密集型任务（如爬虫、网络请求）✅协程处理混合型任务（CPU + I/O 交替）✅多线程需要更灵活的调度、最小的切换开销✅协程项目需要扩展性强，未来可升级✅多进程 + 多线程混合模式。
2025-03-12 16:27:42
950
原创 WHAT - 从底层运行机制看不同编程语言之间的差异
在WHAT - 不同编程语言之间的gap我们介绍了不同编程语言之间的 gap 包括使用场景。今天主要从从底层运行机制来分析不同编程语言的差异。
2025-03-12 16:00:15
1070
原创 WHAT - 前端性能监控和错误追踪（Sentry 篇）
Sentry是一个流行的应用性能监控（APM）和错误追踪平台，能够帮助开发者实时识别、诊断并解决问题。它提供详细的错误崩溃和性能瓶颈分析，广泛应用于前端、后端和移动端项目中。
2025-03-11 17:31:19
943
原创 WHAT - 支持桌面应用的跨端框架（一）
Electron 是一个用于构建跨平台桌面应用的框架，基于Chromium和Node.js，可以让开发者使用HTML、CSS 和 JavaScript来构建桌面应用。Electron 允许在应用中直接使用 Node.js API，同时提供了丰富的主进程（Main Process）和渲染进程（Renderer Process）之间的通信机制。electron：Electron 框架核心库。：用于同时运行多个进程（如 React 和 Electron）。wait-on。
2025-03-10 20:09:48
1037
原创 WHAT - SOAP API vs RESTful API
SOAP 是成熟但稍显笨重的协议，适合对可靠性、安全性和严格契约要求高的场景；若追求简单高效，现代应用更倾向 RESTful API 或 GraphQL。
2025-03-09 15:24:35
800
原创 WHAT - 前端阻塞场景梳理
同步阻塞→异步化频繁任务→合并或降频debouncethrottle大型库/组件→代码分割（动态导入） +按需渲染（虚拟列表）。通过这些优化，可以显著减少主线程阻塞时间，提升页面流畅度。
2025-03-07 14:20:30
800
原创 WHAT - CSS Containment 隔离子元素的布局 (contain=layout)
通过，你可以将子元素的布局变化“局限”在父容器内，大幅减少重排的传播范围。这种优化在复杂动画、动态列表或嵌套组件中尤其有效，是前端性能调优的重要工具之一。
2025-03-07 13:34:53
1048
原创 HOW - React 如何在在浏览器绘制之前同步执行 - useLayoutEffect
特性useEffect执行时机渲染后异步执行渲染后、绘制前同步执行阻塞渲染不阻塞阻塞适用场景大多数副作用操作，如数据获取、订阅等需要同步操作 DOM 或测量布局的场景性能影响较低，适合频繁使用的副作用高，需谨慎使用以避免阻塞渲染在使用 Canvas 绘制复杂图形时，可能需要先测量某些元素的位置或尺寸，然后根据这些信息进行绘制。// 假设这里需要根据某个 DOM 元素的位置来绘制图形// 先进行相关测量等准备工作（此处简化）// 开始绘制}, []);
2025-03-06 16:51:30
779
原创 HOW - 用户在前端页面长时间停留数据状态一致性保持方案
如果用户长时间停留在页面上，某些数据状态在后台已更新，而前端页面仍显示旧状态，此时提交操作可能会出错。
2025-03-05 15:31:08
537
原创 WHAT - Tree Shaking 的前提是 ES Module
导入方式是否静态✅ 静态，编译时可分析❌ 动态，运行时才确定Tree-shaking 支持✅ 支持（构建时可优化未使用的代码）❌ 不支持（构建时无法安全删除代码）推荐使用✅ 推荐（现代前端最佳实践）🚫 仅用于 Node.js 兼容场景最佳实践前端项目（React, Vue, Svelte, etc.）➝使用 ESM，配合 Webpack/Vite/rollup 进行 Tree-shaking。Node.js 项目➝ 如果可以，使用迁移到 ESM；
2025-03-05 12:52:11
1335
原创 WHAT- 为什么说有了 React Hooks 之后 Redux 就不那么好用了
小型项目：使用 React Hooks（useStateuseContext）即可，Redux 显得多余。中等项目：如果有较多共享状态，可以考虑 Zustand、Recoil 这样的替代方案。大型项目：Redux 仍然是一个强大的状态管理方案，尤其是搭配 Redux Toolkit (RTK)。如果你的项目已经用了 Redux，升级到 RTK 会让开发体验更好。如果你正在开始一个新项目，先评估是否真的需要 Redux，再做决定。
2025-03-05 12:34:22
588
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人