打造属于你的前端沙盒 🎉
一场代码的奇幻漂流，React在线编辑器带你穿越高亮丛林、沙盒海域和多文件迷宫，边造轮子边收集彩蛋，技术与乐趣齐飞，前端世界从此不再单调！
分类：前端
共找到 55 篇文章
Next.js 16 App Router 实战笔记
从路由结构、数据获取到页面组织的一次完整落地总结。
React 性能优化清单（2026）
面向日常业务开发的 React 性能排查与优化清单。
TypeScript 类型体操：实用模式总结
聚焦业务开发中的高频类型技巧，避免过度设计。
现代 CSS 布局指南：Grid 与 Flex 的边界
梳理 Grid/Flex 各自的使用场景与组合方式。
Tailwind 在中大型项目的组织策略
从命名、抽象和组件边界看 Tailwind 的可维护性。
并发控制：让你的异步任务排队不再“打架”！🚦
异步任务排队像春运抢票？别怕！本文教你用并发控制机制，化身前端“交警”，让任务有序通行，效率飙升，Bug绕道走！🚦😎--- theme: condensed-night-purple highlight: atelier-cave-light --- 前言 在前端开发的世界里，异步任务就像一群急性子的“选手
JavaScript异步编程进化论：从Generator到async/await的华丽蜕变
还在被 JS 异步绕晕？这篇文章帮你拨云见日！先讲能暂停的 Generator，再聊 Promise 基石，拆解 co 库如何自动驱动 Generator，最后揭秘 async/await 的优雅本质--- theme: condensed-night-purple highlight: atelier-cave-li
从 “不会迭代” 到 “面试加分”：JS 迭代器现场教学
还在为for-of和迭代器协议头疼？速来学习！用“自动分糖机”讲清JS迭代器本质，拆解for-of底层，教你手写迭代器，甚至解锁对象for-of的三种骚操作，轻松应对面试，干货满满。--- theme: condensed-night-purple highlight: atelier-cave-light --- >
JS异步编程终极秘籍：手写Promise，笑谈回调地狱
异步编程也能很有趣！Promise源码解析，带你发现JavaScript背后的巧思与实用技巧，提升你的代码格局。--- theme: condensed-night-purple highlight: atelier-cave-light --- > 你是否曾在回调地狱里迷失方向？是否曾被异步代码折磨得怀疑人生？今天
🦄 用 MiniReact 手撸 Fiber 架构：从零到一的高并发渲染之旅
想亲手复刻 React Fiber 架构？MiniReact 用 372 行代码带你解锁并发渲染、虚拟 DOM 和 Diff 算法的底层原理。--- theme: condensed-night-purple highlight: atelier-cave-light --- > "如果你觉得 React 很神秘，那
告别龟速构建，Vite让你的项目飞起来！
如果你的前端项目还在“龟速”启动，不妨看看Vite如何让代码飞起来！本文带你揭秘Vite的原理、优势与实战体验，感受前端开发的速度革命。--- theme: condensed-night-purple highlight: atelier-cave-light --- 前言 还在为Webpack的慢吞吞构建抓狂
从零撸Webpack
你是否曾幻想过，能用几行代码召唤出前端世界的“打包神兽”？别眨眼，这篇文章带你用理工男的严谨和文艺青年的脑洞，手写Webpack，解锁打包的诗与远方！--- theme: condensed-night-purple highlight: atelier-cave-light --- > 你是否曾经被Webpack
假装渲染十万条，虚拟列表的障眼法你学会了吗？
🌈虚拟列表不是“黑科技”，而是前端性能的魔法棒！一屏万行，丝滑如飞，原理揭秘+实战代码，助你轻松玩转海量数据渲染，快来体验前端的速度与激情吧！--- theme: condensed-night-purple highlight: atelier-cave-light --- > 你是否遇到过列表一多，页面就卡得像
闭包危机：你的状态还活着吗？👻
想让状态永远新鲜？小心Hook闭包让你掉进‘旧数据’的坑，本文教你如何优雅避雷！不仅揭示了闭包导致的各种“时空穿越”Bug，还手把手教你用四大实用技巧彻底解决，让你的React代码始终优雅高效--- theme: condensed-night-purple highlight: atelier-cave-light
React 组件缓存与 KeepAlive 组件打造全攻略 😎
你见过组件会“冬眠”吗？KeepAlive让React组件像仓鼠囤粮一样，随时唤醒，状态不丢失，性能暴涨！代码界的冰箱，前端的魔法，点开就停不下来！😎
懒加载那些事儿：图片也有“拖延症”？
你见过猫偷懒吗？图片也能！本篇用段子和代码，教你让网页图片“按需现身”，性能飞升，体验爆表，前端人的快乐源泉！😎--- theme: condensed-night-purple highlight: atelier-cave-light --- > 你是否曾经打开一个图片满天飞的网站，结果页面加载速度堪比蜗牛？别
跨域江湖：六大绝技🗡️
跨域？别怕！本文带你穿越前端的“异世界”，六大奇葩方案轮番登场，保证让你笑着学会跨域，轻松变身技术圈的“穿越王者”！> 你是否曾在开发时遇到过“跨域”这个让人头秃的家伙？今天我们就来聊聊前端跨域的那些事儿，带你从原理到实战，轻松掌握各种跨域姿势！ 一、同源策略：前端的“护城河” 🏰 同源策略（Same-Orig
面试官：你能手写 bind 吗？——JS this 全家桶趣味深度剖析
被 JS 的 this、call/apply/bind/new 绕晕？本文揭秘 this 四大绑定规则，用代码实例拆解用法与陷阱，附手写实现技巧，助你轻松拿捏 JS 面试难点！--- theme: condensed-night-purple highlight: atelier-cave-light --- > 你
面试官的 JS 继承陷阱，你能全身而退吗？🕳️
被JS继承按在面试场摩擦？莫慌！这篇把所有继承招式拆得明明白白，代码实例+坑点剖析全打包，看完直接跟面试官"正面刚"~--- theme: condensed-night-purple highlight: atelier-cave-light --- > 继承，是 JS 面试绕不开的灵魂拷问。本文将带你一网打尽 JS
"压"你没商量：性能优化的隐藏彩蛋
“压”你没商量，性能优化不藏着！一文揭秘 Node.js HTTP 文件压缩的隐藏彩蛋，让你的服务器轻松瘦身，速度飞起，带宽省到让老板偷笑。--- theme: condensed-night-purple highlight: atelier-cave-light --- > 你以为服务器只能靠带宽硬刚？不，压缩才
缓存策略大乱斗：让你的页面快到飞起！
你以为缓存只是存东西？错！Node.js HTTP缓存像开挂一样，让你的网页“秒开”不是梦！本篇带你解锁缓存的隐藏技能，掌握速度与流量的双重秘籍，助你成为服务器界的“魔法师”！--- theme: condensed-night-purple highlight: atelier-cave-light --- > 本
「rem」VS「vw」终极对决：前端移动端适配的最佳实践全解析
rem与vw，谁才是移动端适配的王者？本篇让你见证两大技术巅峰对决，优劣一目了然，助你选出最强适配利器，赢在前端赛道起跑线！--- theme: channing-cyan --- 一、方案原理与实现细节 1. rem + lib-flexible（pxtorem） 原理：通过 JS（如 lib-fle
前端路由双雄传：Hash vs. History
你以为路由只是切换页面？其实它是前端世界的魔法门，#和History让你瞬移、穿梭、回忆、定位，代码背后藏着生活的趣味和脑洞。--- theme: condensed-night-purple highlight: atelier-cave-light --- > 你是否曾经困惑：为什么单页应用（SPA）在不刷新页面
拖拽吧，前端侠！低代码平台的快乐‘搬砖’日常
前端侠，快来搬砖！在这里，拖拽不是体力活，而是快乐源泉。用鼠标“咔咔”一拖，组件就能魔法般落地成型，低代码世界的奇妙冒险等你来闯！--- theme: channing-cyan highlight: arduino-light --- 引言 你是否曾梦想过像搭积木一样开发应用？低代码平台拖拽组件，让前端开发者也
观察者模式 vs 发布订阅模式：一场设计模式的巅峰对决 🥊
你以为老师点名和公众号推送毫无关联？其实它们正是两大设计模式的真实写照！本文用生活化视角和硬核代码，带你秒懂观察者与发布订阅的本质区别。--- theme: condensed-night-purple highlight: atelier-cave-light --- > 你是否曾在项目中遇到过这样的场景：A一变，
手指一拉，世界焕新：移动端下拉刷新全攻略
下拉刷新，不只是“拉一拉”那么简单！一指轻滑，数据焕新，交互体验瞬间升级。让你的页面动起来，刷新你的开发灵感！🚀✨--- theme: condensed-night-purple highlight: atelier-cave-light --- > 你是否曾在手机上用力下拉页面，期待着新鲜内容像魔法一样蹦出来？
React动画：让你的应用“活”起来的魔法！✨
告别生硬，拥抱丝滑！本文带你解锁React动画魔法，从CSS到react-spring，让你的应用瞬间“活”起来，用户体验飙升！🚀--- theme: condensed-night-purple highlight: atelier-cave-light --- 引言 各位前端“魔法师”们🧙♂️，你们是否
🚀 从零到一：用React打造一个修仙主题的问卷调查应用
技术修仙界出了个新法宝！这个React问卷应用，用Redux御气控状态，TypeScript炼心定规则，rem变形适配万种设备，悄悄记录每一步修炼路径。它不是普通问卷，是技术修士的思维探宝器。--- theme: channing-cyan highlight: a11y-light --- 引言：当React遇上
React组件通信与Redux状态管理完全指南
还在为React组件“沟通不畅”和状态管理“一团糟”发愁？这篇指南用幽默语言+实战代码，教你从父子到跨层级通信，再到Redux终极解决方案，包你看完豁然开朗！--- theme: condensed-night-purple highlight: atelier-cave-light --- 引言 作为前端开发者
🚀 TypeScript从入门到React实战：前端工程师的类型安全之旅
💥 爆肝整理！从TypeScript基础到React组件实战，连日历项目都给你写好了，代码能直接跑！看完这篇，类型安全的React代码你也能写！
🎭 React受控与非受控组件：一场"控制权"的争夺战
React组件控制权争夺战？到底是交给用户还是组件自己？这篇文章用日历组件实例，讲透受控与非受控的区别、优劣势，帮你选对方案--- theme: channing-cyan --- 嘿，各位前端小伙伴！今天我们来聊一个React中让很多新手头疼的话题——受控组件Controlled Components和非受控组件U
React-Router 全面解析与实战指南
想让React应用实现无刷新导航？这篇指南告诉你！从基础配置到嵌套路由，从登录重定向到实际场景，一次性掌握React-Router核心技能，轻松搞定前端路由。--- theme: channing-cyan --- 一、React-Router 基础概念 React-Router 是 React 生态系统中最受欢
从零开始构建React天气应用：API集成与UI设计全指南 🌤️
想从零构建React天气应用？这篇指南教你集成Amap API、设计UI、处理数据，还解决了常见问题，全程干货，快速上手！--- theme: condensed-night-purple --- 目录 项目概述项目概述 技术栈选择技术栈选择 项目结构设计项目结构设计 高德地图API集成实
React Hooks 完全指南：从入门到精通
想让React代码更简洁？这篇文章详解6个核心Hooks（useState、useEffect等）的用法、最佳实践，以及实际项目应用和json-server使用，助你掌握React Hooks开发技巧
React基础入门：从JSX到组件通信的实战指南
想入门React却不知从何开始？这篇博客从项目结构讲起，解析JSX语法、组件化开发和组件通信，通过实际代码示例，帮你快速掌握React基础，迈出前端开发第一步！--- theme: smartblue highlight: a11y-light --- 引言 作为前端开发的必备技能，React以其组件化思想和高效
打破常规布局：CSS定位的艺术与科学
解锁CSS定位的5个魔法：static是默认画布，relative玩瞬移，absolute会隐身，fixed钉屏幕，sticky玩粘人！掌握它们，布局难题迎刃而解，页面从此灵动起来。--- theme: channing-cyan --- 一、引言 在CSS的世界里，定位技术就像是一位隐形的导演，指挥着页面元素在
浮动布局揭秘：从『脱标』到BFC的现代布局艺术
CSS浮动布局终极解密：从父容器高度塌陷的元凶到伪元素清除浮动的必杀技（display:block），再到font-size:0秒解inline-block间隙难题，让你的布局代码告别混乱，焕发新生--- theme: channing-cyan --- 引言：被低估的布局王者 在Flexbox和Grid横行的时
JavaScript事件循环：从零开始理解Event Loop
JS异步迷宫？Event Loop是你的罗盘！本文揭秘单线程如何玩转并发，宏任务、微任务、await的执行奥秘，助你告别卡顿，写出高性能代码！--- theme: channing-cyan --- 一. 引言 嘿，你是否曾对JavaScript中那些“奇怪”的执行顺序感到困惑？为什么setTimeout...,
Flex布局不求人：一学就会的现代网页弹性布局秘籍！
弹性布局（Flexbox）让页面布局变得简单高效。本文系统讲解主轴、交叉轴、flex属性及多栏布局实战，配合代码实例，助你彻底掌握Flex布局核心技巧，轻松实现各种响应式页面！你是否还在为页面布局发愁？float、inline-block总是让你头大？其实，CSS弹性布局（Flexbox）早已成为现代网页布局的主流神器
JS类型转换全攻略：==、===、隐式与显式转换一篇全懂！
看过来,此文用通俗易懂语言系统讲解了JS类型转换的原理、==与===区别、显式与隐式转换、ToPrimitive流程及常见场景，配合代码实例和常见问题，助你彻底掌握类型转换，写出更健壮的前端代码！--- theme: channing-cyan --- 你是否遇到过这样的疑惑： - 为什么1 == '1'是true
JS类型判断全解析：typeof、instanceof、toString、Array.isArray一网打尽！
本文系统讲解了JS类型判断的四大方法：typeof、instanceof、Object.prototype.toString.call、Array.isArray，帮你彻底搞懂类型判断的坑与技巧
还在被重复提交困扰？手把手教你写出高质量防抖函数！
本文用真实场景和代码，深入浅出讲解了防抖的原理、手写实现与实战应用，并对比节流，助你彻底掌握前端高频面试与开发必备的防抖技巧，写出更高效的交互体验！> "你是否在生活中遇到过输入框每敲一个字就发送一次请求, 相关搜索栏就刷新一次, 引起页面卡顿呢？ > > "你是否也在双十一又或者618购物大节,卡点抢购商品,疯狂点击
“手写深浅拷贝”到底怎么考？用真实代码带你拆穿JS对象复制的所有套路！
你以为拷贝对象只是“复制粘贴”？其实一不小心就会“牵一发动全身”！本文用真实代码现场演示，揭开JS深浅拷贝的神秘面纱，让你彻底告别“复制后对象互相影响”的尴尬，面试再也不怕被问懵！ 一、为什么要拷贝对象？ 想象一下，你有一份重要的文件（对象），你想给朋友一份副本。 如果只是把文件夹路径发给他（浅拷贝），你俩其实用
还在被“回调地狱”折磨？Promise让你的异步代码优雅飞升！
巧用“相亲结婚生娃”生活场景，深入浅出讲解了 Promise 的原理、链式 .then 的执行时机与技术细节，揭示其如何优雅解决回调地狱。通过实例和原理分析，助你彻底掌握 JS 异步编程的核心利器> “为什么我的异步代码总是乱成一锅粥？” > “回调嵌套太深，调试像走迷宫！” > “Promise 到底怎么用，
你真的懂 this 吗？99% 的初学者都踩过的 JavaScript 大坑！
本文以初学者视角，深入浅出地讲解了JavaScript中this的五大绑定规则及常见陷阱，结合丰富代码实例，帮助读者彻底理解 this 的指向原理和实际开发中的应用，助你轻松避开 this 大坑!> “为什么我在控制台打印 this，结果和我想象的不一样？” > “为什么同样的函数，this 指向却变了？” >
你以为你懂“原型”？JavaScript原型那些不得不说的秘密！
本文系统讲解了 JavaScript 原型、原型链、prototype 和 __proto__ 的关系及常见用法，帮助初学者避开常见误区，轻松掌握 JS 核心机制。> 你是否在学习 JavaScript 时，被“原型”、“原型链”、“proto”这些词绕晕过？你以为对象就是对象，函数就是函数，结果一查属性，怎么多出来一
JavaScript对象那些坑：初学者必踩的“陷阱”与进阶秘籍
本文以初学者视角，深入浅出地讲解了 JavaScript 对象与原始类型的区别、常见陷阱及实用技巧，帮助读者避坑并提升编程能力，适合新手收藏学习。> 你以为对象只是“键值对”？其实，JavaScript 对象的世界远比你想象的精彩！今天，带你用最通俗的语言，揭开对象背后的秘密，避开初学者常见的坑，轻松迈向进阶之路！
拖延症晚期的我，终于用原生JS撸了个To-Do List！
“拖延症晚期患者”的自我救赎，带你用原生JS撸一个高颜值To-Do List。全流程剖析HTML结构、JS交互、CSS美化，代码细节全解析，助你从零进阶前端小能手，轻松管理人生待办！> “人生苦短，待办太多。”\ > ——一位每天都在立flag的前端萌新 前言：为什么要造轮子？ 作为一名拖延症晚期患者，我的待办事
CSS浮动布局：从“漂流瓶”到BFC的自我修养
本文以幽默风趣的语言，系统梳理了CSS浮动布局的原理、常见问题及BFC的终极解法，结合代码案例，带你轻松掌握网页布局的“浮”世绘，助你成为前端布局的“浮云大师”！
JS闭包的前世今生：作用域链、内存泄漏与“路明非”的自我修养
用幽默风趣的方式，深入剖析JS闭包的原理、作用域链、声明提升及内存泄漏问题，配合经典代码案例和图解，助你彻底搞懂闭包的技术细节与实战应用，面试答题、项目开发都能游刃有余！ 前言：闭包到底是啥？别怕，今天用段子讲明白！ 闭包，这个让无数前端新手头秃的词，究竟是天使还是魔鬼？你以为它只是面试官的“灵魂拷问”，其实它是JS
用纯CSS+HTML撸一个高颜值音乐播放器：周杰伦《星空》陪你写代码！
纯CSS+HTML打造高颜值音乐播放器，极简风格，弹性布局+黑色渐变+圆角阴影，UI质感拉满。无JS也能实现网易云同款外观，适合前端练手和美化项目。附详细技术解析，助你玩转Flex和渐变！ 前言：音乐与代码，谁说不配？ 作为一名前端er，写代码时怎么能没有音乐？但市面上的音乐播放器不是太复杂，就是UI一言难尽。今
JS预编译：V8的魔法工厂，变量提升的前世今生
JS预编译到底有多神秘？本文用幽默风趣的方式，带你深入V8引擎的“魔法工厂”，剖析变量提升、函数声明、执行上下文的底层原理，配合经典代码案例，助你彻底搞懂JS执行机制，面试再也不怕“灵魂拷问”！ JS预编译：V8的魔法工厂，变量提升的前世今生 前言：你以为你在写JS，其实你在和V8玩心理战 大家好，我是一个热爱“
龙族前端小项目实战：用代码缅怀绘梨衣，控诉江南的“刀”
江南的刀太狠？没关系！这个前端小项目让你用鼠标滑动控制视频速度，把绘梨衣的名场面“定格”在最美瞬间。HTML+CSS+JS三连击，技术宅的浪漫就是——“代码不刀，绘梨衣永存”！龙族粉速来。 龙族前端小项目实战：用代码缅怀绘梨衣，控诉江南的“刀” 前言：绘梨衣与路明非，江南你欠我一个结局！ 作为一名龙族真爱粉，每次
JavaScript编译与作用域：一场“变量去哪儿了”的侦探剧
JavaScript作用域和编译机制，像一场变量的“捉迷藏”大戏，暗藏无数玄机。本文用幽默风趣的方式，带你揭开变量提升、闭包、作用域链等核心知识的神秘面纱，让你写代码不再迷路！ JavaScript编译与作用域：一场“变量去哪儿了”的侦探剧 > “你以为你在写代码，其实你在和作用域玩捉迷藏。”——一位被undefi