博客文章 — Field Notes

• 不用 React，不用 Hexo，我用 11ty

  为什么个人网站不用 React/Next/Nuxt，也不用 Hexo——11ty 只做最基本的事，剩下的全部自己来。

  2026/08/09 Eleventy 工程化 设计

• 配置驱动 CRUD——让 40 个列表页不再需要前端代码

  手写列表页的尽头是复制粘贴。我在重构一个仓储管理系统时设计了一套 JSON 驱动的配置化引擎——这篇文章聊聊设计思路和取舍。

  2026/07/25 架构 工程化 Vue

• pnpm Monorepo 实战避坑指南

  基于 Vue 3 + Vite + Turborepo 技术栈，独立搭建 9 个共享包的经验总结——从依赖地狱到工程化最佳实践。

  2026/07/15 工程化 Monorepo

• 初探浏览器反截屏 录制技术

  参考文章 DRM是什么? EME是什么? 关键词 EME DRM SetWindowDisplayAffinity How does Netflix prevent users from taking screenshots 优酷截图示例 使用截图工具后,视频会自动隐藏 gith

  2025/08/28 浏览器 JavaScript

• HLS 和 DASH 编码与封装格式比较

  HLS 和 DASH 编码与封装格式比较 HLS（HTTP Live Streaming） 1. 视频编码格式 H.264/AVC (Advanced Video Coding)：最广泛使用的编码格式，兼容性好，几乎所有支持 HLS 的设备都能解码。 H.265/HEVC (Hi

  2024/10/29 网络协议

• watch watchEffect computed 区别

  watch 概念：侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。 // 监视ref所定义的一个响应式数据 watch(sum,(newValue,oldValue)=>{ console.log('sum变了',newValue,oldVa

  2024/08/29 Vue

• useMemo, useCallback, useEffect 三者区别

  useMemo 父组件将一个 【值】 传递给子组件，若父组件的其他值发生变化时，子组件也会跟着渲染多次，会造成性能浪费； useMemo是将父组件传递给子组件的值缓存起来，只有当 useMemo中的第二个参数状态变化时，子组件才重新渲染 useMemo便是用于缓存该函数的执行结果

  2023/04/24 React

• JS中如何使用emoji及unicode编码理解

  前瞻 回顾第一章: 同一个字符的两种 UTF-8 编码 正文 😊 这是一个笑脸,它的编码如下 Unicode编码：1F60A UTF-8编码：F09F 988A UTF-16编码: D83D DE0A 概念 Unicode 使用四个字节为每个字符编码，UTF 是英

  2023/02/18 JavaScript