1.7k 字 2 分钟

# 如何实现以鼠标为中心的精准画布缩放？ # 一、核心原理：坐标系转换 要实现精准缩放，需要理解两个核心坐标系： 视口坐标系：用户当前看到的区域（Viewport） 内容坐标系：画布的实际内容（Content） 缩放的本质就是这两个坐标系的比例变换。我们的目的是：无论缩放比例如何变化，鼠标点对应的内容位置始终保持不变。 # 数学关系 设： 当前缩放比例： S 新缩放比例： S' 鼠标的视口坐标： 向量A = (P_x, P_y) 画布偏移量 (相对于视口)： 向量B = (O_x,...
15k 字 14 分钟

# 实现 Object.assign () 和 completeAssign () # Object.assign() Object.assign() 方法用于将所有源对象的可枚举属性，复制到目标对象。它将返回目标对象。 # 语法 Object.assign(target, ...sources) # 示例 const target = { a: 1, b: 2 };const source = { b: 4, c: 5 };const returnedTarget = Object.assign(target,...
3.9k 字 4 分钟

# 用 Cookie+HttpOnly 实现双 Token 认证与滑动刷新 # 为什么需要双 Token 方案？ 传统单 Token 方案面临两大痛点： 安全风险 - Token 泄露等于永久入侵 体验问题 - 频繁重新登录影响用户体验 双 Token 方案完美解决： 🛡️ Access Token（短时效）：15-30 分钟有效期，降低被盗风险 🔄 Refresh Token（长时效）：7-30 天有效期，静默刷新会话 # 技术选型 组件 方案 优势说明 Access Token JWT + localStorage 方便前端使用，自动过期 Refresh...
3.6k 字 3 分钟

# 前置 我们都知道，聊天记录是滚动的，所以，我们需要知道滚动条的位置，然后，通过滚动条的位置，来定位到聊天记录的位置。 聊天记录的 flex-direction 是 column-reverse 的，所以最底下的 container.scrollTop 为 0，上滑动减少 getBoundingClientRect 可以获取到元素的位置，包括 top 、 bottom 、 left 、 right 等。这些都是相对于视口的位置。 # 代码 <!DOCTYPE html><html lang="en">...
8.2k 字 7 分钟

# 基于 Socket.IO 和 WebRTC 的实时语音聊天室 (Demo 版本) # 功能亮点 🎙️ 实时语音通话（P2P 直连） 💬 文字消息群聊（房间隔离） 🚪 动态房间管理 🌐 自动 NAT 穿透（STUN 服务） # 技术栈 技术 用途 Socket.IO 信令服务器 / 消息中转 WebRTC 音视频 P2P 通信 React 前端界面框架 Node.js 后端服务 # 快速开始 # 环境准备 # 前端依赖npm install socket.io-client react react-dom# 后端依赖npm install express...
3.8k 字 3 分钟

# webpack 是什么？ Webpack 是一个现代 JavaScript 应用的静态模块打包工具。它通过分析模块依赖关系，将项目中的所有资源（JS、CSS、图片等）转换为浏览器可识别的静态资源，并支持代码优化与扩展功能 # 核心概念 Entry (入口) 定义打包起点，支持单入口（string）、多入口（array 或 object） 示例：entry: {index: ['./src/index.js', './src/utils.js'], // 合并为 1 个 chunkvendor:...
1.2k 字 1 分钟

# 什么是自定义 hook？ 自定义 Hooks 是一个以 use 开头的 JavaScript 函数，它内部可以调用其他的 Hooks，如 useState 、 useEffect 等。 # 为什么使用自定义 Hooks? 代码复用： 当多个组件需要相同的逻辑时，可以通过自定义 Hooks 将这些逻辑封装起来，避免重复编写相同的代码。 提高代码清晰度：通过将特定功能的逻辑集中在一个地方，可以使组件更加简洁，易于理解和维护。 # 如何创建自定义 Hooks？ 创建自定义 Hooks 非常简单，只需编写一个函数，并根据需要在其内部调用其他 Hooks。 例如，如果你想创建一个计数器...
2.1k 字 2 分钟

React Router 是一个用于在 React 应用中实现动态路由的强大库。它使得单页应用（SPA）能够拥有多个视图，并且可以根据 URL 的变化来显示不同的内容，而无需重新加载整个页面。 安装库： npm install react-router-dom # 核心概念 BrowserRouter BrowserRouter 使用 HTML5 提供的 History API 来保持 UI 和 URL 同步。 HashRouter 则使用 URL 的 hash 部分（即 # 后面的内容），适用于不支持 HTML5 History API 的旧浏览器。 Routes 和...
1.7k 字 2 分钟

# 准备 这里使用 json-server 模拟后端数据， json-server 是一个基于 JSON 的 HTTP 服务器，用于快速创建 RESTful API。 在 reducer 中，我们使用 redux-thunk 来处理异步操作， redux-thunk 是一个中间件，它允许我们返回一个函数而不是一个对象，并在函数中可以进行异步操作。 # 示例 在 noteReducer 中，我们创建 initializenotes 和 createNoteAction 两个函数，分别用于初始化笔记列表和创建新的笔记。都是异步操作，所以使用了 redux-thunk 。调用时直接调用...
6.8k 字 6 分钟

# 安装 Redux npm install redux# 使状态完全从组件中分离开 动作对应用状态的影响是用一个 reducer 来定义的 const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 case 'ZERO': return 0 default: // if none...