# 《Javascript面向对象特效&框架封装实战》学习导读
在JavaScript开发的进阶之路上，从“能写代码”到“写好代码”，核心分水岭往往在于是否真正掌握了**面向对象编程思想**。本课程《Js高手之路第二部：Javascript面向对象特效&框架封装实战》正是为此而设，它不局限于基础语法的重复讲解，而是通过系统性的案例实战，带你深入理解对象的本质，并具备独立封装轻量级类库的能力。
课程核心脉络
本课程内容层层递进，主要分为三大模块：**对象创建方式演进**、**经典特效与业务逻辑封装**、**微型框架实现**。
一、 对象创建的三种范式 课程开篇并未直接跳入复杂案例，而是梳理了JS中对象创建的三种主流方式，这是后续所有封装的基石： 1. **字面量形式**：简洁直观，适合简单数据结构封装（如四则运算、素数判断、简单DOM操作）。 2. **构造函数形式**：引入`this`指向问题，详解不同调用场景下`this`的变化，并通过实例化方式重构之前的逻辑（如排序、选项卡、全选/反选、时钟等）。 3. **原型构造方式**：重点讲解`prototype`机制，解决共享方法与内存优化问题，是构建可复用组件的核心手段。
二、 实战案例：从特效到交互 在掌握基础范式后，课程通过多个高频面试题及实战项目巩固所学： - **表格处理**：封装增删改查、隔行变色、排序等功能，涵盖DOM操作与事件绑定。 - **选项卡与图片切换**：结合链式调用思想，演示如何实现优雅的用户交互组件。 - **购物车系统**：完整模拟商品对象、购物车对象及界面整合，体现复杂状态管理。 - **抽奖功能**：利用原型模式封装随机逻辑与界面反馈。
三、 框架封装：迈向独立开发者 课程的终极目标是“造轮子”。你将在本课程中亲手实现一个简化版的jQuery框架，包括： - 自定义类相关方法（类似`$.fn`） - `onload`加载事件封装 - 基本选择器与点击事件绑定 - `show/hide`显示隐藏效果
学习目标与建议
学完本课程，你将不再满足于“复制粘贴”代码，而是能够：
✅ 清晰辨析三种对象创建方式的适用场景；
✅ 独立封装具有通用性的UI组件和业务逻辑；
✅ 理解并实践链式调用、原型扩展等高级技巧；
✅ 具备开发小型JavaScript库的基本能力。
**学习建议**：请务必动手复现每一个案例，尤其是“this指向”和“原型链”部分，理解其底层机制比记住语法更重要。框架封装部分可对照jQuery源码对比思考，体会设计精髓。
这是一门适合有一定JS基础、希望突破瓶颈向高阶迈进的学习者的实战课程。
课程目录
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)
