别拿“会用 jQuery”掩盖面向对象的盲区

很多写前端的人，业务页写得飞快，但一被问到“怎么自己封装一个类”就卡壳。这门课解决的就是这个断层：你不缺 DOM 操作熟练度，缺的是把散装函数重构成可复用对象的能力。资料里没有空讲原型链的理论推导，而是直接拿 jQuery 里四个 class 操作方法开刀，逼你从零手写实现。如果你的基础停留在“能调用 API 但不知道内部怎么转”，或者转岗时被面试官追着问“手写一个简化版框架”就大脑空白，这就是对症的补漏材料。它默认你已经能熟练操作 DOM、理解基本函数作用域，如果连 document.querySelector 都要查文档，先去补基础再来看。

先从字面量重构入手，再死磕链式调用

建议别按编号顺序硬啃。第一遍先集中看字面量封装那几块：从四则运算、素数计算到简单的 DOM 与 CSS 方法，这是在训练你“把过程式代码揉进对象”的肌肉记忆。看完这几节，立刻去对照 new Object 创建对象的演变方式，体会两种写法在内存和复用上的差异。第二遍重点啃选项卡和隔行变色的组合实例，这里藏着链式调用的核心逻辑——怎么让方法返回 this，怎么让对象自己接管状态流转。资料里的表格封装和数组排序别只当例子看，把它们当成你的配套练习场：视频里演示一遍，你关掉画面自己写一遍，写不出来再回去对照。排序和素数计算尤其要自己敲，别只看懂，手生是转岗最大的敌人。

学完能独立做什么，以及怎么检验

学完的标准很具体：你能脱离任何第三方库，用纯 JavaScript 封装出一组带链式调用的 DOM 操作方法，并且能把选项卡、表格这类常见交互抽象成可实例化的类。检验方式是关掉所有资料，自己从空文件开始写一个迷你工具库，包含 class 操作、隔行变色、选项卡三个模块，要求支持链式调用。写完后再问自己三个问题：每个方法内部为什么要 return this？字面量方式和 new Object 方式在扩展子类时各有什么硬伤？如果让你给封装好的选项卡加一个回调钩子，改动会波及哪些地方？答得上来，这部分的缺口才算补上。资料包里的目录线索只用来定位主题，别指望看一遍视频就自动内化，代码是写会的，不是看会的。

课程目录

1 框架封装-实现jQuery中的4个class相关方法 (15:10)
2 选项卡-隔行变色组合实例(面向对象&链式调用) (11:24)
3 自定义对象的两种方式 (12:20)
4 字面量定义对象的常见写法 (03:36)
5 字面量封装四则运算 (04:19)
6 字面量封装素数 (04:50)
7 字面量封装素数-计算长度 (04:27)
8 字面量封装简单Dom&css方法 (04:52)
9 字面量方式封装表格 (04:46)
10 new Object创建对象的演变方式 (07:31)
11 第二种面向对象方式修改四则运算 (02:48)
12 第二种面向对象方式修改素数 (05:55)
13 第二种面向对象方式封装数组排序 (06:17)
14 第二种面向对象方式封装选项卡 (08:01)
15 字面量方式封装选项卡 (04:38)
16 第二种面向对象方式封装全选，不选，反选 (07:00)
17 第二种面向对象方式封装隔行变色 (06:15)
18 第二种面向对象方式封装时钟 (11:32)
19 原型构造方式 (11:35)
20 this是谁 (07:18)
21 原型构造方式封装抽奖 (10:20)
22 原型构造方式封装购物车-产品对象 (11:28)
23 原型构造方式封装购物车-购物车对象 (13:01)
24 原型构造方式封装购物车-界面整合 (12:54)
25 原型构造方式封装图片切换功能 (10:36)
26 用原型扩充数组去重复的方法(2种) (06:43)
27 用原型扩充数组的排序方法 (04:15)
28 框架封装-实现jQuery中的onload加载 (08:34)
29 框架封装-实现jQuery中的基本选择器&点击事件 (10:00)
30 框架封装-实现jQuery中的show&hide方法 (05:09)
31 框架封装-实现jQuery中的css方法 (08:07)
32 框架封装-实现jQuery中的hover方法 (08:00)
33 框架封装-实现jQuery中的each方法 (06:17)
34 框架封装-实现jQuery中的eq,html,val方法 (10:29)
35 框架封装-实现jQuery中的index,parent方法 (05:36)
36 框架封装-实现jQuery中的attr方法 (05:32)
37 框架封装-实现jQuery中的children方法 (05:42)
38 框架封装-实现jQuery中的siblings方法 (07:21)
39 框架封装-利用现有框架封装的方法实现选项卡 (03:24)
40 选项卡-隔行变色组合实例(面向过程解法一) (07:42)
41 选项卡-隔行变色组合实例(面向过程解法二) (03:22)