叫我一声阿雷吧-CSDN博客

叫我一声阿雷吧

码龄7年

98,160

总访问量
119

原创
50

粉丝
0

关注

IP 属地：吉林省

加入CSDN时间： 2018-12-19

个人简介：专注前端JS实战与性能优化，分享可落地的开发技巧与避坑指南

查看详细资料

个人成就

获得1,654次点赞
内容获得6次评论
获得1,207次收藏
代码片获得136次分享
博客总排名16,444名
原力等级

原力等级

4

原力分

711

本月获得

216

入选《JavaScript领域内容榜》第42名

TA的专栏

JS入门通关手册
50篇
JS 实战案例
39篇

TA关注的专栏 0

TA关注的收藏夹 0

TA关注的社区 1

TA参与的活动 0

兴趣领域设置

Python

python
编程语言

c++
前端

javascript

创作活动更多

领算力，参加 2026 AMD AI 开发者征文挑战赛

从口袋里的个人电脑到云端的超大规模集群，AI 的浪潮正在重塑每一个计算节点。你是热衷于在本地压榨 NPU 潜能的极客？还是擅长在云端重构高性能内核的架构师？或者是利用 Radeon 显卡打造高性价比 AI 工作站的开发者？ AMD 联合 CSDN 开启“全场景 AI 征文大赛”，诚邀广大开发者分享基于 AMD 处理、显卡及 ROCm 平台的实战经验、优化技巧与创新应用。丰厚奖金与旗舰硬件已备齐，只等你用文字定义算力的未来！ ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/fb562f7b0ec34b0f99521abd6da2f01d.png#pic_center)

74人参与去参加

更多

原生 JS 实现模态框（弹出层）（点击遮罩关闭 + 禁止滚动 + 优雅动画），企业级通用弹窗

本文使用原生 JavaScript实现企业级模态框（Modal 弹出层）功能，支持点击打开、点击关闭、点击遮罩关闭、ESC 按键关闭、打开时禁止页面滚动、优雅淡入动画、响应式适配，零依赖、体验流畅、代码简洁，可直接用于登录弹窗、确认提示、消息通知、图片查看等所有 Web 场景。文章结构标准、源码可直接复制发布，符合 CSDN 高分技术文章要求。

博文更新于前天 15:46 ·

原生 JS 实现表单验证（用户名 + 密码 + 手机号 + 邮箱，企业级正则校验）

本文详解原生 HTML+CSS+JavaScript 实现企业级表单验证功能，覆盖用户名、密码、手机号、邮箱四大核心表单字段，整合实时校验、失焦校验、提交校验、错误提示、表单禁用、正则优化等实战特性。突破基础表单验证的简单判断，补充正则表达式深度解析、兼容性处理、用户体验优化等细节，代码模块化封装、注释清晰，可直接集成到登录注册、用户信息提交、表单报名等各类业务场景。文章结构完整（背景 + 效果 + 源码 + 解析 + 扩展），完全符合 CSDN 高分技术文章标准，兼顾入门学习与生产使用。

博文更新于前天 13:46 ·

原生 JS 实现无限滚动加载（下拉加载更多 + 无闪烁 + 性能优化），长列表必备组件

本文使用原生 JavaScript实现企业级无限滚动加载（下拉加载更多）功能，适用于长列表、商品列表、消息流、评论区等高频业务场景。组件具备自动监听滚动、触底加载、防重复请求、无闪烁渲染、加载状态提示、结束状态判断等核心特性，全程不依赖任何框架，代码轻量高效、性能极致优化。文章包含完整可运行源码、原理讲解、性能方案、踩坑点，完全符合 CSDN 高分技术文章标准，可直接发布使用。

博文更新于 2026.04.21 ·

原生 JS 实现滚动导航吸顶：智能吸顶 + 高亮联动 + 平滑过渡（附完整源码）

本文详解原生 HTML+CSS+JavaScript 实现企业级滚动导航吸顶功能，突破基础吸顶的生硬切换，整合智能吸顶 / 取消吸顶、滚动高亮联动、平滑过渡动画、响应式适配、防抖节流优化等核心特性。从 DOM 监听、样式切换到性能优化，逐步拆解实现逻辑，提供完整可运行源码，代码模块化封装、注释清晰，可直接集成到官网、博客、商城、后台管理等各类长页面，同时补充兼容性处理和扩展方向，既是前端入门的经典交互案例，也是提升页面用户体验的实用组件。

博文更新于 2026.04.21 ·

JS 入门通关手册・50 篇核心知识点速记（面试背诵版）

本篇为JS入门通关手册收尾篇，全面汇总JS入门核心知识点，梳理新手常见学习误区，给出完整进阶学习路径与入门面试重点，助力学习者巩固基础、明确方向，完成前端JS入门全阶段通关。

博文更新于 2026.04.16 ·

原生 JS 实现回到顶部按钮：平滑滚动 + 智能显示隐藏 + 自定义动画（附完整源码）

本文深度讲解原生 HTML+CSS+JavaScript 实现企业级 “回到顶部” 功能，核心包含平滑滚动返回顶部、滚动距离触发显示 / 隐藏、自定义过渡动画、点击防抖、响应式适配等实用特性。从基础的锚点跳转升级为带动画的平滑滚动，补充性能优化、兼容性处理、扩展功能等实战细节，提供完整可运行源码，代码模块化封装，可直接集成到官网、博客、商城等各类 Web 项目，同时适配 PC / 移动端，是前端交互优化的经典实战案例。

博文更新于 2026.04.16 ·

JS 入门通关手册（50）：JS 入门总结与进阶指南（收尾篇）

本文作为 JS 入门通关手册的收尾篇，系统梳理了 JS 入门阶段的 6 大核心模块知识点，总结了新手常见的 5 个误区与避坑指南，提供了清晰的 JS 进阶学习路径（分 3 个阶段），汇总了入门级前端面试高频题，帮助初学者巩固入门知识、理清进阶思路，明确后续学习方向，为从 JS 入门到进阶打下坚实基础，助力初学者顺利过渡到实战开发与面试。

博文更新于 2026.04.15 ·

JS 入门通关手册（48）：本地存储全解析（localStorage/sessionStorage/cookie，面试高频）

本文全面解析前端本地存储三大核心方案（localStorage、sessionStorage、cookie），详细讲解各自的 API、存储特性、实战用法，对比三者的核心区别，拆解安全风险与避坑指南，结合用户登录、主题切换、临时数据存储等真实业务场景，整理高频面试题标准答案，帮助开发者熟练选择并运用本地存储方案，规避安全隐患，轻松应对前端面试与项目开发需求。

博文更新于 2026.04.14 ·

原生 JS 实现手风琴折叠面板：多级展开 + 动画过渡 + 响应式适配（附完整源码）

本文深度解析原生 HTML+CSS+JavaScript 手风琴折叠面板的实现逻辑，从基础单级展开升级为企业级多级折叠，包含点击展开 / 收起、默认展开指定面板、动画过渡、hover 高亮、响应式适配等核心功能。代码采用模块化封装思想，详细拆解 DOM 操作、事件委托、样式切换等关键技术点，提供完整可运行源码，同时补充性能优化、扩展方向等实战技巧，既是前端入门的经典案例，也可直接集成到官网、后台管理、帮助中心等业务场景。

博文更新于 2026.04.14 ·

JS 入门通关手册（47）：BOM 操作全解析（浏览器对象模型，实战 + 面试

本文详细解析 BOM 核心概念与核心对象，重点讲解 window、location、navigator、history 等常用对象的属性与方法，结合页面跳转、参数传递、浏览器适配、平滑滚动等实战场景，拆解用法与避坑技巧，对比 BOM 与 DOM 的区别，整理高频面试题标准答案，帮助开发者熟练掌握 BOM 操作，轻松应对前端面试与项目开发需求。

博文更新于 2026.04.13 ·

JS 入门通关手册（46）：DOM 操作全解析（基础 + 实战 + 面试，避坑指南）

本文全面解析 DOM 核心概念与节点类型，详细讲解 DOM 四大基础操作（查找、创建、插入、删除），结合实战场景拆解节点属性、样式操作技巧，重点分析事件委托的原理与优势，整理 DOM 操作性能优化方案和高频面试题，帮助开发者熟练掌握 DOM 操作，规避性能隐患，轻松应对前端面试与项目开发。

博文更新于 2026.04.12 ·

JS 入门通关手册（45）：浏览器渲染原理与重绘重排（性能优化核心，面试必考

本文详解浏览器关键渲染路径，梳理 DOM 树、CSSOM 树、渲染树的生成逻辑，清晰区分重排与重绘的概念、触发场景及性能差异，整理 10 条可直接落地的重排重绘优化方案，附带代码示例与面试避坑要点，覆盖前端性能优化核心考点，帮助开发者从底层理解页面渲染机制，解决卡顿问题，轻松应对面试提问。

博文更新于 2026.04.11 ·

JS 入门通关手册（44）：宏任务 / 微任务 / Event Loop（前端最难核心，面试必考

本文详细拆解 JavaScript Event Loop（事件循环）的核心机制，明确同步代码、宏任务、微任务的定义、分类与优先级，结合多道面试高频代码示例，拆解执行流程，对比浏览器与 Node.js 的 Event Loop 区别，整理常见误区与面试要点，帮助开发者彻底搞懂 JS 单线程异步的底层逻辑，轻松应对前端最难的 Event Loop 面试题，解决代码执行顺序混乱的问题。

博文更新于 2026.04.10 ·

JS 入门通关手册（43）：async/await 原理与异常处理（实战 + 面试，彻底搞懂）

本文深入解析 async/await 的底层原理（Promise + Generator 语法糖）、基础语法与关键注意点，重点讲解 async/await 的异常处理技巧（统一捕获、精准捕获），结合串行请求、并行请求、重试机制等真实业务场景，对比 async/await 与 Promise 链式调用的优劣，整理高频面试题标准答案，帮助开发者彻底掌握 async/await，写出更简洁、易维护、易调试的异步代码，轻松应对前端面试与项目开发。

博文更新于 2026.04.09 ·

原生 JS 实现图片预览上传组件：多图上传 + 拖拽上传 + 裁剪预览 + 进度显示（附完整源码）

本文基于原生 HTML5+CSS3+JavaScript 开发了一套功能完整的企业级图片预览上传组件，无任何第三方框架依赖。核心功能包含：多图选择上传、拖拽上传、实时图片预览、1:1 比例裁剪、文件格式 / 大小校验、上传进度可视化显示，同时适配 PC / 移动端响应式布局。代码采用模块化封装思想，提供完整可运行源码，可直接集成到表单提交、头像上传、素材管理等业务场景，也可作为前端实战学习的优质案例。

博文更新于 2026.04.08 ·

JS 入门通关手册（42）：Promise 并发控制（all/race/allSettled/any 手写 + 实战）

本文详细讲解 Promise 四大并发控制方法（all、race、allSettled、any），从定义、用法、关键注意点入手，提供可直接运行的手写实现，结合接口并发、超时控制、批量请求、多源容错等真实业务场景，对比四种方法的核心区别，并整理高频面试题标准答案，帮助开发者彻底掌握 Promise 并发编程，轻松应对前端面试与项目开发。

博文更新于 2026.04.08 ·

【JS 实战案例】原生实现企业级城市选择组件（省市区联动+搜索+拼音检索+记忆功能）

本文基于原生JavaScript实现企业级城市选择组件，核心包含省市区三级联动、中文+拼音双重检索、最近选择记忆、热门城市快捷选择四大核心功能，无任何第三方库依赖，轻量可集成、样式可定制。深度拆解三级联动逻辑、检索算法、本地存储记忆等核心知识点，代码符合工程化规范，可直接集成到电商、外卖、注册表单等真实业务场景，解决传统城市选择组件功能单一、检索不便、无记忆功能的痛点，助力前端开发者掌握企业级高频组件的开发思维。

博文更新于 2026.04.07 ·

JS 入门通关手册（41）：Promise 全解析（原理 + 手写 + 实战，面试必考）

本文详细讲解 JavaScript Promise 核心原理、状态流转、常用 API（then/catch/finally），结合实战场景说明 Promise 如何解决回调地狱，并提供可直接运行的手写 Promise 核心版代码。文章覆盖 Promise 高频面试考点与业务应用，帮助开发者彻底掌握异步编程基础，为后续 async/await、EventLoop 学习打下基础。

博文更新于 2026.04.07 ·

JS 入门通关手册（40）：数组高频面试题：去重、扁平化、排序（最全方案 + 性能对比）

本文汇总前端最核心的数组操作：去重、扁平化、排序，提供从简洁 API 到手写原理的多种实现方案，对比适用场景与优缺点，并包含对象数组处理、排序算法手写等高频面试考点，适合日常开发速查与面试突击。

博文更新于 2026.04.06 ·

JS 入门通关手册（39）：函数柯里化与偏函数 — 原理 + 手写 + 场景 + 面试

本文系统讲解 JavaScript 函数柯里化与偏函数，从定义、示例到通用实现，清晰对比两者区别，并结合参数复用、接口封装、校验工具等实战场景说明用途，附带高频面试题与标准答案，帮助理解函数式编程核心思想，提升代码抽象与复用能力。

博文更新于 2026.04.05 ·