Webpack 中 Plugin 与 Loader 的区别与原理
Webpack 中 Plugin 与 Loader 的区别与原理在 webpack 体系里，loader 与 plugin 是两个最核心的扩展点，也是面试与实际排障中最容易混淆的一对概念。很多同学会把它们都理解成“处理文件的东西”，但实际上两者的职责边界非常清晰： Loader 解决的是“模块转换（transform）”问题：把某种类型的资源转换成 webpack 能理解的模块。 Plugin
发布订阅模式与观察者模式详解
发布订阅模式与观察者模式详解在前端架构与设计模式相关的面试与实践中，“发布订阅模式（Publish/Subscribe）”与“观察者模式（Observer）”经常被放在一起讨论。很多人会觉得两者“差不多”，但在实现方式和应用场景上，它们还是有本质区别的。 本文主要回答三个问题： 观察者模式与发布订阅模式分别是什么？ 两者的差异到底在哪？为什么很多资料会混着说？ 在前端工程中，如何实现和
React 常用 Hooks 完全指南（useState/useEffect/useMemo…）
React 常用 Hooks 完全指南（useState/useEffect/useMemo…）Hooks 是 React 16.8 引入的函数组件能力扩展，使我们可以在函数组件中使用 state、生命周期、副作用、上下文等特性。从工程实践角度看，Hooks 既提升了代码复用与组织能力，也带来了“依赖数组”“闭包陷阱”“过度 memo”等新问题。 本文用“最常用 Hooks +
React 各版本之间的差异（16 → 19）
React 各版本之间的差异（16 → 19）很多前端同学在面试或升级项目时都会遇到两个问题： React 最新稳定版本是多少？ React 16/17/18/19 之间到底差异在哪？升级要注意什么？ 本文以“版本脉络 + 关键特性 + 升级影响”的方式，给你一份可直接用于项目升级决策的 React 版本对比指南。 一、React 最新稳定版本是多少？截至 20
JavaScript 中 0.1 + 0.2 不等于 0.3 的真相与解决方案
JavaScript 中 0.1 + 0.2 不等于 0.3 的真相与解决方案在前端开发中，你一定见过这段代码： 120.1 + 0.2 === 0.3; // false0.1 + 0.2; // 0.30000000000000004 看似简单的小数加法，却给出了“错误”的结果。这并不是 JavaScript 的 bug，而是 几乎所有使用 IEEE 754 双精度浮点数的语
手写Promise
手写Promise本文目标是：写出一个可运行、满足 Promise/A+ 核心行为的手写 Promise，并补齐 then/catch/finally 以及常用静态方法（resolve/reject/all/race/allSettled/any）。 一、Promise 要解决什么问题？在 Promise 之前，回调地狱（callback hell）通常长这样： 12345678910
CSS 布局指南
CSS 布局指南从早期的 float、table 布局，到 Flexbox 和 Grid 的普及，再到容器查询、逻辑属性等新特性，CSS 布局能力已经发生了质的飞跃。 一、了解布局传统布局方式存在明显局限： float：需要清除浮动，难以实现等高、居中等需求，语义不清晰。 table：布局与表格语义混淆，响应式改造成本高。 inline-block：存在空白间隙、垂直对齐等问题。 现代布局方
前端页面性能优化(四)
前端页面性能优化之运行时性能与交互流畅在前几篇中，我们主要解决了两个问题： 页面能不能尽快“看见东西”（首屏、图片、资源缓存等） 资源能不能“高效传输”（格式、压缩、CDN、缓存策略等） 但用户在真正使用页面时，还会碰到另外一类体验问题： 点击按钮后半天没反应。 滚动列表时卡顿、掉帧。 动画不连贯、拖动不跟手。 这就涉及到本文要引入的主题： 运行时性能与交互流畅：在页面已经加载完成之后，