STAGE
基础建立
开篇：用正确的方式学习 JavaScript
JavaScript 是一门很容易“会写”，却不容易“真正理解”的语言。很多人第一次接触它，是在浏览器里写交互；后来又在 Node、构建工具、测试框架、React、Vue 里不断遇到它，于是会产生一种错觉，好像只要能把页面跑起来、能把接口请求通、能把组件写完，就算掌握了 Java
工欲善其事：浏览器、Node、编辑器与调试工具的基础准备
很多人学 JavaScript，一上来就直接写代码，结果一遇到环境问题、版本问题、调试问题就很被动。其实 JavaScript 的学习体验特别依赖基础工具是否顺手，因为这门语言天然跨浏览器和 Node 两个主要运行时，又和包管理、构建工具、调试面板、网络请求、源码映射这些环节紧密
执行上下文与作用域：变量声明、闭包与程序为何这样运行
如果说 JavaScript 有哪一章是“绕不过去的地基”，执行上下文和作用域一定算一章。很多看起来怪异的问题，比如变量为什么能提前访问却拿不到值、函数为什么能记住外部变量、循环里为什么会出现相同结果、事件回调为什么能继续访问早就执行完的函数里的数据，本质上都和这里有关。
数据类型与类型判断：原始值、对象、转换规则与常见误区
JavaScript 的灵活性很大一部分来自它对类型的处理方式，但它的很多坑也恰恰来自这里。你可能已经知道 `string`、`number`、`boolean`、`object` 这些词，也知道 `typeof`、`instanceof`、`Array.isArray()` 之
函数、this 与高阶函数：JavaScript 最核心的表达能力
如果说对象模型决定了 JavaScript 的数据组织方式，那么函数几乎决定了它的表达方式。JavaScript 里的函数不只是“把几行代码包起来复用”的工具，它可以被赋值、传递、返回、延后执行、绑定上下文、封装状态，很多你在框架、事件系统、异步流程里看到的写法，底层都离不开函数
原型、原型链与 class：对象模型与继承机制的真实样子
JavaScript 的对象模型常常让人一开始觉得“不够直观”。你可能已经见过对象字面量、构造函数、`prototype`、`__proto__`、`class`、`extends` 这些写法，但如果没有形成一条完整主线，就很容易把它们看成互相独立的知识点。结果就是：会写 `cl
模块系统：ESM、CommonJS、打包前后的依赖关系
当 JavaScript 还主要停留在简单脚本阶段时，大家可以把代码全写在一个文件里，靠全局变量共享状态。但一旦项目变大，这种方式很快就会失控：命名冲突、依赖关系混乱、文件职责不清、修改一个地方影响全局。模块系统就是为了解决这些问题，它让代码可以被拆分、封装、导入和复用。
异步编程基础：回调、Promise、async await 与错误处理
异步是 JavaScript 最核心、也最容易让人“以为懂了”的主题之一。页面交互、接口请求、定时任务、资源加载、文件读写、消息通信，只要不可能立刻得到结果，就会进入异步场景。你当然可以先记住 Promise 的写法、`await` 的语法，但如果没有真正理解异步为什么存在、回调
STAGE
运行时与浏览器机制
事件循环与任务调度：宏任务、微任务、定时器与浏览器事件
如果说异步编程告诉你“结果不会立刻回来”，那事件循环回答的就是“它到底什么时候回来，以及先后顺序为什么是这样”。很多 JavaScript 的经典困惑都集中在这里：为什么 `setTimeout(fn, 0)` 不是立刻执行，为什么 Promise 的回调看起来总比定时器更早，为
DOM 与事件系统：节点操作、冒泡捕获、委托与渲染协作
JavaScript 在浏览器里最直观的能力之一，就是操作页面。按钮点击、表单输入、弹窗显示、列表渲染、类名切换、内容更新，这些都离不开 DOM 和事件系统。很多人最开始学 JavaScript，就是从这里入门的，所以容易产生一种印象：JavaScript 就是“找元素、绑事件、
网络与存储：Fetch、cookie、localStorage、sessionStorage 与缓存心智
一旦 JavaScript 真正进入业务页面，它几乎一定会和两件事发生关系：向服务端拿数据，以及把一部分状态保存在浏览器侧。前者解决“页面要展示什么”，后者解决“这些信息能不能跨刷新、跨页面或跨会话保留”。很多初学者会把 `fetch`、cookie、`localStorage`
浏览器安全与性能：XSS、CSRF、重排重绘、节流防抖与资源加载
很多人学 JavaScript 时，会把安全和性能看成“高级专题”，觉得先把功能写出来再说。但真实项目恰恰相反，很多线上事故不是因为不会写交互，而是因为忽略了安全边界和性能成本。页面能显示，不代表安全；交互能完成，不代表体验稳定。浏览器里跑的 JavaScript 同时面对用户输
工程化入门：npm、脚本、ESLint、Prettier 与构建工具基础
当 JavaScript 代码不再只是一个小脚本，而是要进入多人协作、持续迭代、上线部署的项目时，工程化就变成了基础设施。很多初学者会把工程化理解成“工具很多、配置很复杂”，甚至觉得它和语言学习无关。其实工程化真正解决的是：如何让代码在团队里可安装、可运行、可检查、可构建、可交付
在项目里组织 JavaScript：模块边界、配置管理与代码质量护栏
写几个零散文件和维护一个长期项目，是两回事。真正进入业务后，JavaScript 最大的挑战往往不再是“这段逻辑能不能写出来”，而是“半年后还能不能读懂、改动会不会牵一发而动全身、团队里的别人能不能快速接手”。这时，项目组织方式就比某个单点语法更重要。
Web API 进阶：Canvas、Web Worker、Intersection Observer 与文件处理
学 JavaScript 时，很多人会把注意力集中在语言本身，等真正做项目后才发现，浏览器提供的 Web API 才是把语言能力变成产品能力的关键。从滚动懒加载到文件上传预览，从图形绘制到复杂计算卸载，从视口观察到离屏处理，很多“像是产品功能”的东西，底层其实都在调用浏览器能力。
STAGE
工程化实践
与服务端协作：接口契约、状态码、错误码、分页结构与鉴权流程
JavaScript 进入真实业务后，很快就会碰到一个事实：前端能做的很多事情，最终都要和服务端协作完成。页面展示的数据来自接口，用户操作会触发写请求，权限判断依赖鉴权，列表要处理分页，错误提示离不开统一的错误语义。也就是说，前端并不是“拿来一个接口调一下”这么简单，而是在参与一
AST 与自动化：代码解析、批量改造、脚手架与 CLI 工具
很多人把 JavaScript 只看成“写业务页面和接口逻辑的语言”，但它在工具化和自动化领域同样强大。构建工具、Lint 工具、脚手架、代码生成器、批量迁移脚本、项目初始化命令，背后大量都由 JavaScript 驱动。也正因为如此，JavaScript 既是一门业务开发语言，
JavaScript 在 Node 与框架中的角色：从语言到 React、Vue、Node 生态
学到这里，你已经看到了 JavaScript 既能组织语言逻辑，又能驱动浏览器能力，还能承担工程工具和自动化职责。接下来一个非常重要的问题是：它为什么会成为 React、Vue、Node 这些生态的共同底座？如果只把 JavaScript 看成“框架之前的基础课”，你会低估它和整
新语法与未来演进：从 ES6 到现代提案应该怎么学
很多人学 JavaScript 到中后期，会开始焦虑一个问题：新语法太多了，到底该怎么跟？从 ES6 之后，解构、模板字符串、箭头函数、类、模块、Promise、可选链、空值合并、顶层 `await` 等能力不断进入日常开发，再加上社区里经常讨论新的语言提案，很容易给人一种“永远
漫谈与收束：面试中的 JavaScript，以及如何继续深入
一门语言学到最后，真正重要的不是“我看过多少语法点”，而是你能不能把零散知识组织成清晰主线，能不能在项目里做出更稳的判断，能不能在交流时把问题讲透。JavaScript 尤其如此，因为它覆盖语言机制、浏览器运行时、工程工具和框架生态，学习路径很长，碎片也很多。如果没有定期收束，很
STAGE
安全性能与自动化
浏览器存储与缓存：cookie、Web Storage、IndexedDB 与离线思路
前面我们已经从总览层面讲过网络与存储，这一篇要把“浏览器侧如何保存和复用数据”进一步拆深。很多项目一开始只是简单地把 token、主题配置、列表筛选条件存起来，后来功能越来越多，才发现浏览器侧数据已经变成一团：有些存在 cookie，有些在 `localStorage`，有些需要
前端安全专题：同源策略、XSS、CSRF、CSP 与鉴权协作
前端安全之所以经常被误解，是因为很多人以为安全问题只在服务端。可浏览器恰恰是风险最密集的执行环境之一：它既加载外部资源，又执行脚本，还承载用户身份和交互，一旦边界模糊，问题就会非常直接地暴露出来。真正成熟的前端开发，不可能只会写页面而不理解安全。
渲染性能专题：重排重绘、长任务、节流防抖与首屏优化
性能优化最怕两种极端：一种是完全不关注，页面慢了才到处打补丁；另一种是只会背术语，见到卡顿就机械套“虚拟列表、节流、防抖、懒加载”。真正有用的性能治理，从来不是背优化清单，而是先知道性能瓶颈通常出现在哪些层，再决定用什么策略处理。
JavaScript 工程化拆解：npm scripts、bundler、环境变量与产物管理
前面的工程化入门更像总图，这一篇我们把它进一步拆细。很多团队表面上“有构建、有脚本、有环境变量”，但一到多环境部署、构建异常、产物定位、变量泄露或脚本膨胀时，问题就会集中暴露出来。工程化真正难的地方，不在于会不会用某个工具，而在于你能不能理解这条流水线从源码到产物到底经历了什么。
JavaScript 自动化实践：AST、Codemod、CLI 与脚手架设计
如果说前面的 AST 与自动化一章是在建立概念，那么这一篇更偏向实践判断。真实团队里，自动化从来不是“有空再搞”的加分项，而是在项目规模增长后逐渐变成必要能力。框架升级、命名规范统一、模板生成、批量修复、工程初始化、重复检查，这些事越靠人工，越容易慢、漏、乱。