妙味课堂原创JavaScript视频教程

妙味课堂这套 JavaScript 视频教程在圈子里流传很久了，特点是讲得细、动手多，不是那种念 PPT 的录屏。它面向的是已经能写 HTML/CSS、想把 JS 真正学扎实的人——如果你只会用 jQuery 拼页面，或者看框架文档时对原型、闭包、事件模型一知半解，这套内容正好补上那块地基。

技术栈与内容边界

教程的核心是原生 JavaScript，不依赖任何框架。语言版本以 ES5 为主，同时涉及 ES6 的新语法（let/const、箭头函数、模板字符串、解构等），这个组合对理解后续框架很有用：Vue 和 React 的很多设计都能在原生 DOM 操作和函数式写法里找到影子。

内容覆盖大致分几块：语言基础（数据类型、运算符、流程控制、函数、作用域与闭包）、面向对象（原型链、构造函数、继承、this 指向）、DOM 与 BOM 操作（节点增删改查、事件流、事件委托、兼容性处理）、以及正则、JSON、Ajax 等工程中高频出现的部分。最后的综合案例会把零散知识点串成一个可跑起来的小项目，这一步比单纯记 API 更值钱。

项目结构与可复用模块

资料包按章节组织，视频与配套笔记分开存放。笔记不是简单抄板书，而是把每节的关键代码、易错点和结论单独整理出来，适合课后对照复盘。对自学的人来说，这种「视频 + 文字笔记」的双轨结构很关键：视频负责讲清思路，笔记负责让你快速检索。

其中几类代码值得单独拎出来反复看：

• 事件处理层：事件绑定、解绑、事件对象兼容写法、委托的封装，这套逻辑在实际项目里复用率极高。
• DOM 工具函数：选择器封装、类名操作、样式读写，写多了就是一个小型工具库。
• 运动与动画：定时器驱动的缓动、多属性运动、链式运动，是理解「帧」和「状态」的好素材。
• Ajax 封装：从原生 XHR 到参数序列化、回调组织，能直接迁到真实接口调用场景。

把这些模块整理成自己的 utils 目录，比看完就丢强得多。

怎么用这份资料

不要只放视频。建议每看完一节，先在编辑器里不看源码默写一遍核心逻辑，跑通后再对照原代码找差异——差异点往往就是你没真正理解的地方。笔记里的结论可以直接并入自己的技术文档，按「知识点—示例—坑」三段式记，面试前翻一遍比重看视频快得多。

案例部分不要照抄，试着改需求：换个数据结构、加个交互状态、把回调改成 Promise。改的过程中暴露的问题，才是这套教程真正能给你的东西。

适合谁，不适合谁

适合：有 HTML/CSS 基础、想系统补齐原生 JS 的初学者；工作中用框架但底层不稳、想回头补课的前端；准备面试需要梳理原型、闭包、事件机制这些高频考点的人。

不太适合：已经能熟练手写组件、想直接学框架源码或工程化配置的人，这套内容偏语言与 DOM 基础，不涉及构建工具链和现代模块规范。

把它当成一套可对照实践的底层训练材料，配合编辑器边看边写，收益最大。