Owen's Blog

JS 中的防抖与节流详解（含 React 实践）在前端开发中，防抖（debounce）和节流（throttle）是常用的性能优化手段，尤其适用于高频事件（如输入、滚动、窗口缩放等）。 一、什么是防抖（Debounce）？防抖是指在事件被触发 n 秒后再执行回调，如果 n 秒内事件又被触发，则重新计时。常用于输入框实时搜索、窗口 resize 等场景。 典型应用场景 搜索框输入自动联想 窗口大小调整 表单验证 手动实现防抖函数123456789function debounce(fn, delay = 300) { let timer = null; return function (...args) { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, delay); };} React 中使用防抖12345678910111213import { useRef...

JS 中的闭包详解（以 React 为例）闭包（Closure）是 JavaScript 中非常重要的概念，理解闭包对于掌握作用域、数据保护、回调、React 组件开发等都有极大帮助。 一、什么是闭包？闭包是指函数能够“记住”并访问它定义时的词法作用域，即使这个函数在其词法作用域之外被调用。 通俗理解：闭包就是“函数+定义该函数的环境”。 形成条件 函数嵌套函数 内部函数引用了外部函数的变量 外部函数返回了内部函数或将其传递到外部 二、闭包的经典例子1. 基础例子12345678910function makeCounter() { let count = 0; return function () { count++; return count; };}const counter = makeCounter();console.log(counter()); // 1console.log(counter()); // 2 2. 保护变量不被外部直接访问1234567891011function...

JS 中深拷贝与浅拷贝详解（以 React 为例）在前端开发中，尤其是 React 状态管理时，常常会遇到对象或数组的拷贝问题。理解深拷贝和浅拷贝的区别，对于避免数据引用带来的 bug 至关重要。 一、浅拷贝（Shallow Copy）浅拷贝是指只复制对象的第一层属性，如果属性值是引用类型（如对象、数组），则只复制其引用地址。 常见浅拷贝方法 Object.assign() 展开运算符 ... Array.prototype.slice()、concat() 示例：1234const obj1 = { a: 1, b: { c: 2 } };const obj2 = { ...obj1 };obj2.b.c = 100;console.log(obj1.b.c); // 100，说明 b 只是引用 二、深拷贝（Deep...

Spring Boot 集成 Selenium 实现爬虫教程Selenium 是一款流行的自动化测试工具，也常用于网页爬虫。本文介绍如何在 Spring Boot 项目中集成 Selenium，并以 ChromeDriver 为例实现简单爬虫。 一、Selenium 简介Selenium 支持多种浏览器自动化操作，常用于自动化测试、数据采集等场景。结合 Spring Boot，可实现高效的爬虫服务。 二、集成步骤1. 添加依赖在 pom.xml 中添加 Selenium 相关依赖： 12345<dependency> <groupId>org.seleniumhq.selenium</groupId> <artifactId>selenium-java</artifactId> <version>4.19.1</version></dependency> 可在 Maven Central 查询最新版本。 2. 下载并配置 ChromeDriver 访问...

macOS 下 VSCode 常用快捷键大全Visual Studio Code（VSCode）是 macOS 上最受欢迎的代码编辑器之一。掌握快捷键可以大幅提升开发效率。以下为常用快捷键汇总： 一、基础编辑 复制当前行/选中内容：⌘ + C 剪切当前行/选中内容：⌘ + X 粘贴：⌘ + V 撤销：⌘ + Z 重做：⇧ + ⌘ + Z 选中整行：⌘ + L 向上/下移动一行：⌥ + ↑ / ↓ 向上/下复制一行：⇧ + ⌥ + ↑ / ↓ 删除当前行：⇧ + ⌘ + K 自动格式化：⇧ + ⌥ + F 二、光标与多光标 多光标选中：⌥ + 鼠标点击 选中下一个相同内容：⌘ + D 取消上一个多光标：⌘ + U 全选所有相同内容：⌃ + ⌘ + G 跳转到行：⌃ + G 三、查找与替换 查找：⌘ + F 替换：⌥ + ⌘ + F 查找下一个：⌘ + G 查找上一个：⇧ + ⌘ + G 全局查找：⇧ + ⌘ + F 全局替换：⇧ + ⌥ + ⌘ + F 四、文件与窗口管理 打开文件：⌘ + O 新建文件：⌘ + N 保存文件：⌘ +...

Git 常用命令与高级用法总结Git 是最流行的分布式版本控制系统，适用于个人和团队协作开发。本文总结了常用命令、回退已 push 代码、git stash 用法及多账号配置方法。 一、Git 常用命令 初始化仓库：1git init 克隆远程仓库：1git clone <仓库地址> 查看当前状态：1git status 添加文件到暂存区：1git add <文件名> 提交更改：1git commit -m "提交说明" 查看提交历史：1git log --oneline --graph --all 推送到远程仓库：1git push origin <分支名> 拉取远程仓库：1git pull 创建新分支并切换：1git checkout -b <新分支名> 合并分支：1git merge <分支名> 二、回退已 push 到远程仓库的代码1. 回退到指定提交（强制推送） 查看提交历史，找到目标 commit 的哈希值：1git log --oneline 回退到指定...

Homebrew 安装与国内镜像配置全攻略Homebrew 是 macOS 上最流行的包管理工具，能够让你像在 Linux 下一样方便地安装、升级、卸载各种开发工具和软件包。它极大地简化了软件环境的管理，是开发者必备利器。 一、Homebrew 的作用简介 一键安装/卸载常用开发工具（如 git、node、python 等） 自动管理依赖，保持系统整洁 支持快速升级和回滚 拥有丰富的第三方软件源（Tap） 二、Homebrew 安装步骤方法一：官方安装脚本 打开终端（Terminal）。 执行以下命令（推荐使用官方脚本）：1/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 安装过程中如遇到权限提示，按提示输入密码。 安装完成后，按终端提示将 brew 路径加入环境变量（如 zsh 用户可在 ~/.zshrc 中添加）：12echo 'eval...

iTerm2 中安装 Oh My Zsh 教程Oh My Zsh 是一款强大的 Zsh 配置管理工具，配合 iTerm2 使用可以极大提升 macOS 下的终端体验。 一、前置条件 已安装 iTerm2 推荐已安装 Homebrew（便于后续插件管理） 二、安装 Zsh（macOS 默认已自带）macOS 10.15 及以上系统默认 shell 已为 zsh。可通过以下命令确认： 1zsh --version 如需升级 zsh，可执行： 1brew install zsh 三、安装 Oh My Zsh 打开 iTerm2。 执行官方一键安装命令：1sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" 安装过程中如遇到提示，按回车继续。 安装完成后，终端会自动切换到 zsh 并加载 Oh My Zsh。 四、常用配置建议 修改主题：编辑 ~/.zshrc 文件，设置...

Node.js 安装步骤Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，广泛应用于服务端开发。以下将介绍在 Windows、macOS 和 Linux 下安装 Node.js 的方法。 一、Windows 下安装 Node.js 访问 Node.js 官网。 下载 LTS（长期支持版）安装包（.msi 文件）。 双击安装包，按照提示完成安装。 安装完成后，打开命令提示符（cmd），输入：12node -vnpm -v 若能正确显示版本号，说明安装成功。 二、macOS 下安装 Node.js方法一：使用 Homebrew（推荐） 打开终端，输入：1brew install node 安装完成后，输入：12node -vnpm -v 若能正确显示版本号，说明安装成功。 方法二：官网下载 访问 Node.js 官网，下载 macOS 安装包（.pkg 文件）。 双击安装包，按照提示完成安装。 验证安装同上。 三、Linux 下安装 Node.js以 Ubuntu 为例： 打开终端，输入：12sudo apt updatesudo...

博客部署成功记 & 新的开始今天是个值得纪念的日子，我终于成功部署了属于自己的博客网站！ 部署过程回顾经历了环境配置、主题选择、各种小问题的排查，终于在本地和服务器上都顺利跑起来了。看到首页成功加载的那一刻，内心充满了成就感。 选择了 Hexo 作为静态博客框架，主题也做了个性化调整。 配置过程中遇到了一些依赖和路径的小坑，但都一一解决。 现在可以愉快地用 Markdown 写作，并一键部署到线上。 新的写作旅程这篇文章是我的第一篇博客日志，标志着我的写作之旅正式开始。 未来会在这里记录学习、生活、技术心得，也欢迎大家留言交流。 The journal begins. 感谢所有帮助过我的教程和朋友。希望这个博客能成为我成长的见证。