前端学习
现代前端工程化体系、现代框架底层演进与浏览器核心原理深度探索。
🧠【彻底读懂 reduce】acc 是谁？我是谁？我们要干嘛？
🚧 开场：把你困住的误解先拆了 你是不是也以为： 答案是——不是！不是！真的不是！ 让我们用这篇文章，从「误解」出发，到「掌握精髓」收官，完成一次技术脑内革命！ 🏷️ 一、reduce 是什么？——数
this 的前世今生：谁在叫我，我听谁的
🧠 一、什么是 this？ 在 JavaScript 中，this 是一种运行时绑定，它代表的是函数被调用时的上下文对象。 不是定义位置、不是写在哪儿的对象、不是函数自己。 只有一个真理： 🧭 二、t
🧠 别急着传！大文件上传里，藏着 Promise 的高级用法
大文件上传，其实是前端对异步编程掌控力的一次深水区测试。 你以为只是拖个文件框、调个接口而已？ 真到了项目里，面对几个 G 的文件，老板一句话： > “不能卡、要能重传、并发别炸服务器、还能暂停”，
for...in 和 for...of 的终极区别：一文彻底解决你的困惑
JavaScript 中的 for...in 和 for...of，名字像，功能却天差地别。 混用？代码能跑但极易出 bug。 想记住？咬牙背十次不如一次理解 + 巧记 + 联想。 本篇一文到底，帮你
你写前端按钮，他们扛服务器压力：搞懂后端那些“黑话”！
🧭 前言：你写功能，他们在聊“系统扛不住了” 身为一名前端，你也许每天写的最多的词是 onClick，提 PR 最多的改动是“按钮颜色和边距”。 可就在你写按钮时，身后的后端小哥和运维师傅经常蹙眉低语
【JS三兄弟谁是谁】搞懂 splice、slice、split，只需一杯奶茶的时间！
🍿 一、三兄弟登场：不同对象，不同任务 名称 作用对象 是否修改原对象 返回类型 功能简述 splice 数组 ✅ 是 被删除元素数组 原地删除元素并可插入新元素 slice 数组 / 字符串 ❌ 否
深入 JavaScript 作用域机制：透视 V8 引擎背后的执行秘密
引言 JavaScript 作用域规则并非只是“变量在哪定义就在哪有效”这么简单。真正的理解要深入到 V8 引擎是如何在底层解析、构建、优化和执行这些作用域的。本文将从词法作用域的编译期构建、执行上下
你真的了解 `var a = 2;` 的执行顺序吗？
很多人学 JavaScript 的时候，写下 var a = 2; 的时候，心里只是想着“定义一个变量并赋值”，然后就继续写下去，完全没有意识到这一行代码背后，引擎、编译器和作用域三者正进行一场精密的
🧬 深入理解 JavaScript 原型链：从对象创建到继承机制的全景透视
🚀 前言 JavaScript 中的对象与类系统建立在 原型链（Prototype Chain） 上。所有对象的属性查找和继承机制都离不开原型链的支持。虽然这个概念在大多数教程中被简单地理解为“对象继
DOM 事件捕获与冒泡：一场被设计出来的分层通信协议
📌目录 浏览器事件模型的设计动机：一场分布式通信架构演化史 事件捕获与冒泡阶段的底层实现与执行栈原理 为什么“目标阶段”不提供独立监听？ 事件委托的正确范式与性能陷阱 React / Vue 是如何劫
🔬 深度解析：前端异步模型的本质机制与工程落点
你以为的“异步”，可能只是“异象” 很多人觉得异步模型是指 setTimeout、Promise、async/await 的执行顺序问题。但我们要讨论的是： 异步是如何调度的？
JavaScript垃圾回收机制深度解析与内存管理艺术
JavaScript垃圾回收机制深度解析与内存管理艺术 一、内存管理基础架构 1.1 堆内存拓扑结构 JavaScript引擎采用分代式堆内存管理，V8引擎将堆划分为多个空间： 各空间采用不同内存页管
重构版：JavaScript 的 new 操作符——从“黑箱仪式”到“亲手造物”的认知跃迁
一、打破黑箱：当我们执行 new Character() 时，究竟在举行什么仪式？ 一个被忽视的恐怖场景： 这个经典错误暴露了 new 的核心作用：创建独立的作用域沙箱。没有 new，构造函数内的 t
深入解析pnpm与npm：颠覆传统包管理的技术革命与应用实践
引言：被node_modules支配的恐惧 "你的node_modules有多大？"这个灵魂拷问总能引发开发者会心一笑。当项目规模达到500MB时，npm install需要喝三杯咖啡的时间；当依赖层
闭包：JavaScript 中的隐形大杀器
你可能已经在很多地方听说过闭包这个词，尤其是涉及到 JavaScript 的作用域和异步操作时。闭包是 JavaScript 中非常核心的概念，然而它又非常容易让开发者感到困惑。今天我们就来深入剖析闭
前端内存泄漏：你的JS代码在偷偷“吃”内存！
前端内存泄漏：你的JS代码在偷偷“吃”内存！ 你有没有遇到过这样的问题：你的Web应用在刚启动时运行流畅，但使用一段时间后，变得越来越卡？任务管理器一打开，浏览器占用的内存高得离谱，就像一头无底洞的野
前端虚拟列表的深入解析：如何用虚拟滚动拯救你的DOM性能
背景：为什么我们需要展示十万条数据？ 在开发电商后台、订单管理系统或数据报表时，我们经常会遇到一个需求：展示超大规模的数据列表。 产品经理可能会说：“我们需要展示十万条订单数据，方便业务人员快速筛选和
TypeScript 类型大揭秘：从灵活到严苛，每个类型背后的设计哲学
TypeScript 类型大揭秘：从灵活到严苛，每个类型背后的设计哲学 TypeScript 是一门静态类型语言，但它的类型系统并非一味强调“严苛”。在这个系统里，有些类型如 any、unknown、
TypeScript 的“不变”哲学：从代码到工程化的深度探索
TypeScript 的“不变”哲学：从代码到工程化的深度探索 TypeScript 不仅是 JavaScript 的超集，更是前端工程化中的一把利器。const、readonly、枚举、常量枚举、接
异步编程的“三角恋”：如何在 Promise、async/await 到 RxJS 中优雅地处理多个请求的依赖？
异步编程的“三角恋”：如何在 Promise、async/await 到 RxJS 中优雅地处理多个请求的依赖？ 引言 在前端开发的日常工作中，处理多个异步请求是再常见不过的需求了。无论是从服务器获取
小厂面试官让我用浏览器变魔术：一登录全通行？我差点把浏览器变没了！
引言 今天去了一家小厂面试，面试官居然给了我一个“神仙题”： “如何在同一个浏览器窗口下，只要登录一个网站（比如 a.com），其他网站（如 b.com 和 c.com）就能自动识别用户身份？” 我当
从洗牌算法到前端工程化：如何用JavaScript实现真正的随机排序并应用到实际项目中
《从洗牌算法到前端工程化：如何用JavaScript实现真正的随机排序并应用到实际项目中》 正文： 1. 引言：为什么前端开发者需要关心随机排序？ 想象一下，你正在开发一个电商网站，用户每次进入首页时
Object.defineProperty 与 Proxy：谁才是 JavaScript 属性管理的 “终极 Boss”？
Object.defineProperty 与 Proxy：谁才是 JavaScript 属性管理的 “终极 Boss”？ 引言：属性管理的 “华山论剑” 在前端的 “江湖” 里，JavaScript
前端渲染风云：CSR 与 SSR 的深度较量
前端渲染风云：CSR 与 SSR 的深度较量 引言 在前端开发的广袤宇宙中，页面渲染犹如一颗璀璨而关键的星辰，它决定着用户与网页交互的第一体验，也深刻影响着网站在搜索引擎中的 “江湖地位”。其中，客户
客官，准备好进入 JavaScript 的奇妙世界了吗？
客官，准备好进入 JavaScript 的奇妙世界了吗？ 亲爱的客官，今天我们有一个充满悬念和挑战的 JavaScript 题目，带你穿越函数、原型、继承，甚至还要掌握如何在魔法世界中与 new 打交
函数式编程：从理论到现实的深度解析
函数式编程：从理论到现实的深度解析 函数式编程（FP）自20世纪50年代以来一直是计算机科学中的一个重要领域。在过去的几年中，随着JavaScript、Scala、Elixir、Rust等语言的流行，
揭秘数据传递与监听：从 JavaScript 到 Vue 的背后
揭秘数据传递与监听：从 JavaScript 到 Vue 的背后 1. 从 JavaScript 开始：传值与传地址的奥秘 在现代 JavaScript 开发中，理解传值与传地址之间的区别是非常重要的
深入实现事件发布-订阅模式：从基础到优化
《深入实现事件发布-订阅模式：从基础到优化》 引言 在软件开发的世界中，随着应用程序规模的扩大，模块化、解耦和可扩展性变得尤为重要。事件驱动架构（Event-Driven Architecture,
JavaScript 原型链的潜在“陷阱”：你知道多少？
JavaScript 原型链的潜在“陷阱”：你知道多少？ 作为 JavaScript 开发者，你可能早已熟悉原型链的概念——它是我们理解继承和共享功能的基础。但，和所有神秘的技术一样，原型链不仅仅是个
破解浏览器渲染“死锁”：CSS与JS如何影响页面加载速度
破解浏览器渲染“死锁”：CSS与JS如何影响页面加载速度？ 在这个快速发展的Web世界里，性能是开发者们永恒的追求。当你打开一个网页，可能会注意到一些页面加载特别慢，甚至产生短暂的“白屏”，你有没有想
异步世界的魔法：解密Promise中的“值穿透”，让你的异步控制更上一层楼
《异步世界的魔法：解密Promise中的“值穿透”，让你的异步控制更上一层楼》 你知道吗？在 JavaScript 的异步编程世界中，有一个让人又爱又恨的魔法——值穿透。这个魔法就像你在故事里找到的“
JavaScript 执行上下文：一场代码背后的权谋与博弈
"JavaScript 执行上下文：一场代码背后的权谋与博弈" 假如 JavaScript 是一场王朝剧，那么执行上下文就是深藏幕后、操控全局的枢密院。变量、作用域、this，甚至你写的每一行代码，都
从“偷懒神器”到“时空穿梭机”：揭开 ES6 对象扩展、Generator 与异步魔法的终极奥义
从“偷懒神器”到“时空穿梭机”：揭开 ES6 对象扩展、Generator 与异步魔法的终极奥义 在编程的世界中，ES6 为我们带来了多个令人惊叹的特性，这些特性不仅改变了我们编程的方式，还对我们如何
CSS加载与页面阻塞：看似平凡，背后却藏着优化的艺术
CSS加载与页面阻塞：看似平凡，背后却藏着优化的艺术 引言：CSS阻塞？你所忽略的页面性能杀手！ 你曾经是否在浏览器打开一个网页时，发现页面内容加载得有些慢？或者，你是否曾经听到过一句话：“CSS加载
z-index 失效的真相：你可能忽视了这些关键细节！
z-index 失效的真相：你可能忽视了这些关键细节！ 你是不是曾经遇到过这样一个糟心的场景：明明为元素设置了 z-index，却发现它依然“躺”在其他元素下方？这究竟是哪里出问题了？别担心，你不是唯
CSS 布局的四大宗师：破解 BFC、IFC、GFC 和 FFC 的深层奥秘
《CSS 布局的四大宗师：破解 BFC、IFC、GFC 和 FFC 的深层奥秘》 在 CSS 的江湖中，布局问题犹如无形的桎梏，困扰着每一位前端开发者。有人为浮动塌陷而抓狂，有人被复杂的响应式布局逼得
从卡顿到丝滑：揭秘 requestAnimationFrame 的魔力
从卡顿到丝滑：揭秘 requestAnimationFrame 的魔力 你有没有遇到过这样的场景：页面上的动画看起来不流畅，画面有时一跳一跳，甚至在你点击或滚动时也感觉迟钝。别担心，这不全是你的代码问
一探究竟：如何高效提取ULL中的当前参数，实现性能与精度的完美平衡
一探究竟：如何高效提取ULL中的当前参数，实现性能与精度的完美平衡 你是否在开发过程中，遇到过那些复杂的、动态变化的URL？每次需要从中提取参数时，你的代码是不是开始变得杂乱无章，难以维护？特别是在单
玩转随机数：用 JavaScript 掌控不可预测的魔力！
玩转随机数：用 JavaScript 掌控不可预测的魔力！ 当计算机遇上“随机”，我们能做什么？ 你曾想过在生活中拥有“超能力”吗？比如，可以预测下一个天气变化，或是猜中下一个彩票号码？虽然我们无法真
JavaScript 数组去重：告别重复，打造完美数据！
JavaScript 数组去重：告别重复，打造完美数据！ 有没有遇到过这样的困扰：你处理的数据中，明明是几百条记录，却有很多完全重复的元素，冗余的数据让人头疼！如果你正在为此烦恼，别担心，今天我们将带
秒懂 JavaScript：用 unshift() 改变数组，从零开始手撕实现！
JavaScript 数组操作中，有一个看似简单却非常强大的方法——unshift() 。它能帮助我们将元素添加到数组的开头，简单高效，让数组操作更灵活。然而，这个小小的函数背后，却隐藏着许多值得探索
JavaScript宝典下
ES6问题总结 1、let和const和var的区别 （1）块级作用域： 块作用域由 { }包括，let和const具有块级作用域，var不存在块级作用域。块级作用域解决了ES5中的两个问题： 内层变
JavaScript宝典上
1、JavaScript有哪些数据类型，说一下他们的区别。 JavaScript共有八种数据类型，分别是 Undefined、Null、Boolean、Numbe
CSS宝典
今日小哆啦提笔，将闭关期间整理的CSS宝典略作总结，与诸位共赏。此番分享，虽不敢言妙笔生花，但聊胜于空谈胡诌，且看能否在欢笑中助尔等拨开前端迷雾！
HTML宝典
小哆啦闭关修炼已久，潜心攻读专业秘技，方才下山考研本欲大展宏图，怎奈山河虽壮志难酬，终是觉察考研无望。思来想去，不若弃考研之念，重拾敲代码之道，复盘前端奇术，以备闯荡职场江湖。
深入学习TS
一、基础类型 TypeScript 的基础类型包括布尔值、数字、字符串、数组、元组、枚举、任意值、空值、Null、Undefined、Never、以及类型断言。 类型 描述 用法和示例 布尔值 表示逻
Vue2——全局API复习
前段时间，小哆啦在工作之余，总感觉`vue`会用还是不是很了解，于是小哆啦决定总结一波，来深度复习一下。复习完之后小哆啦也会跟着大佬去学习`vue`的源码分析，在总结的时候小哆啦也尽量去理解大佬的设计
一文梳理BOM
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。 BOM 由一系列相关的对象构成，并且每个对象都提供了很
深入学习DOM
小哆啦在面试的时候有一次被问到`DOM` 由于经常使用框架开发，导致`DOM`有点遗忘，然后呢就总结一下常用的DOMAPI。
深入学习 js Object API
object常用的API 思维导图 大纲 方法 返回类型 ECMAScript 版本 描述 Object.assign() 对象 ES6 将一个或多个源对象的所有可枚举属性的值复制到目标对象中。 Ob
深入学习数组API
前几天小哆啦总结了字符串常用的`api`，忽然小哆啦想到作为一名前端攻城狮数组的`api`必须得多多了解顺便就总结一下数组中常用的方法，如果有什么不对的地方期待大家批评指正。
JavaScript 常用设计模式（一）
JavaScript 常用设计模式 一、构造器模式 构造器模式（Constructor Pattern）是一种常见的设计模式，用于创建对象。它在JavaScript中广泛使用，特别是在创建自定义对象和
一文学会JavaScript 字符串API
字符串常用方法 先看思维导图 1、 获取字符串长度 JavaScript中的字符串有一个length属性，该属性可以用来获取字符串的长度：（这个很简单，大家经常使用）z` 2、获取字符串指定位置的值
事件冒泡、事件捕获和事件委托
今天小哆啦的舍友问了一个关于事件的问题，小哆啦发现自己不是特别清楚特别明白，然后小哆啦就恶补了一下知识点，今天咱们就一起来深入了解一下。
call 、bind、apply以及this的理解
先念口诀：箭头函数、new、bind、apply 和 call、欧比届点（obj.）、直接调用、不在函数里。按照口诀的顺序，只要满足前面某个场景，就可以确定 this 指向了
实现顶部100px的盒子高度自适应布满浏览器页面
实现顶部100px的盒子高度自适应布满浏览器页面 1.flex 布局 忽然小哆啦就有问题就来了 2.calc()函数 今天就分享到这里啦，还有其他实现方式的可以评论区见:cake:
理解函数柯里化
理解函数柯里化 高阶函数 1. 接受函数作为参数 高阶函数可以接受一个或多个函数作为参数。这样的函数通常用于执行传入的函数，或者基于传入的函数执行一些逻辑。例如： 2. 返回函数（闭包） 高阶函数可以
React基础
这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天 React基础 React介绍 目标任务: 了解什么是React以及它的特点 React是什么
HTTP协议简介
这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天 HTTP协议简介 超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒
什么是JSX
这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天 什么是JSX JSX是JavaScript XML,是React提供的Syntax Sugar, 能让我们可以在JS中写html标记语言。
JavaScript 代码规范
JavaScript 代码规范 这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天 设计原则： 1.原子思想：即每个function就做一件事； 2.归纳思想：将同一类的操作，全部整合到一起；
