第1章 课程介绍 试看 1 节 | 8分钟

学习设计模式的必要性，课程包含的知识点，课程安排，学习前提

收起列表

• 视频： 1-1 导学 (07:44) 试看

第2章 面向对象 13 节 | 95分钟

讲解javascript中的面向对象的概念，包括 ES6 class 语法、UML 类图、以及面向对象三要素

收起列表

• 视频： 2-1 搭建开发环境1 (09:26)
• 视频： 2-2 搭建开发环境2 (07:05)
• 视频： 2-3 搭建开发环境3 (05:35)
• 视频： 2-4 搭建开发环境4 (01:02)
• 视频： 2-5 什么是面向对象 (05:54) 试看
• 视频： 2-6 面向对象-继承 (09:05)
• 视频： 2-7 面向对象-封装 (12:47)
• 视频： 2-8 面向对象-多态 (06:41)
• 视频： 2-9 面向对象-应用举例 (09:34)
• 视频： 2-10 面向对象-总结 (07:12)
• 视频： 2-11 UML类图1-介绍 (07:25)
• 视频： 2-12 UML类图2-关系 (07:49)
• 视频： 2-13 总结 (04:31)

第3章 设计原则 试看 13 节 | 102分钟

设计原则是理解设计模式的基础，是从设计到模式的过度。本章介绍何为设计，5大原则，另外，还会讲解两个关于面向对象与设计原则的真实面试题。

收起列表

• 视频： 3-1 设计原则-介绍 (07:01) 试看
• 视频： 3-2 设计原则-何为设计1 (13:54)
• 视频： 3-3 设计原则-何为设计2 (04:21)
• 视频： 3-4 设计原则-5大原则 (13:40)
• 视频： 3-5 用promise演示 (06:37)
• 视频： 3-6 设计模式简介 (02:54)
• 视频： 3-7 23种设计模式介绍 (09:44)
• 视频： 3-8 面试真题1-介绍 (03:04)
• 视频： 3-9 面试真题1-解答 (11:30)
• 视频： 3-10 面试真题2-介绍 (05:35)
• 视频： 3-11 面试真题2-画图 (04:40)
• 视频： 3-12 面试真题2-编码 (16:12)
• 视频： 3-13 总结 (01:44)

第4章 工厂模式 2 节 | 20分钟

工厂模式是我们最常用的实例化对象模式，本章介绍工厂模式的基本概念，以快餐店汉堡作为生活实例加深理解，讲解并绘制了UML类图，最后列举了JS中的常见使用场景，如 jquery中的$，React.createElement，vue 异步组件等

收起列表

• 视频： 4-1 工厂模式-介绍 (05:08)
• 视频： 4-2 工厂模式-演示和场景 (14:20)

第5章 单例模式 3 节 | 24分钟

单例模式的核心结构中只包含一个被称为单例的特殊类。概念、UML类图仍是必须，本章使用的场景是 jquery中只有一个$，redux 和 vuex 的 store，一个系统中只有一套登录逻辑

收起列表

• 视频： 5-1 单例模式-介绍 (07:08)
• 视频： 5-2 单例模式-演示 (05:32)
• 视频： 5-3 单例模式-场景(jq的$和登录框逻辑)和总结 (10:56)

第6章 适配器模式 3 节 | 16分钟

将一个类的接口适配成用户所期待的，这就是适配器。替换老项目中jquery的$.ajax，vue中计算机属性computed的使用，都可以看作是适配器模式。

收起列表

• 视频： 6-1 适配器模式-介绍 (04:40)
• 视频： 6-2 适配器模式-演示 (02:00)
• 视频： 6-3 适配器模式-场景(封装旧接口&Vue的computed) (08:47)

第7章 装饰器模式 4 节 | 37分钟

装饰器模式属于结构型模式，它是作为现有的类的一个包装，允许向一个现有的对象添加新的功能，同时又不改变其结构。本章同样介绍概念、UML。同时使用了丰富/实用的场景示例，包括ES7装饰器、core-decorators模块等

收起列表

• 视频： 7-1 装饰器模式-介绍 (08:20)
• 视频： 7-2 装饰器模式-场景1 (04:22)
• 视频： 7-3 装饰器模式-场景2(装饰类和方法) (15:00)
• 视频： 7-4 装饰器模式-场景3和总结 (08:20)

第8章 代理模式 4 节 | 31分钟

为其他对象提供一种代理以控制对这个对象的访问。网络代理，明星/经纪人的场景恰如其分

收起列表

• 视频： 8-1 代理模式-介绍和演示 (06:12)
• 视频： 8-2 代理模式-场景1(事件代理和jq的proxy) (09:30)
• 视频： 8-3 代理模式-场景2(明星经纪人) (10:49)
• 视频： 8-4 代理&适配器&装饰模式对比 (03:35)

第9章 外观模式 1 节 | 9分钟

本章讲解外观模式，讲解其概念、示例

收起列表

• 视频： 9-1 外观模式 (08:02)

第10章 观察者模式 4 节 | 48分钟

观察者模式是前端最常用、最重要的设计模式，如果让你只掌握一种设计模式，那肯定就是观察者模式！！！星巴克点咖啡就是比较帖近的生活场景， jquery和NodeJs中的自定义事件更是经典的使用

收起列表

• 视频： 10-1 观察者模式-介绍和演示 (12:33)
• 视频： 10-2 观察者模式-场景1jquery (09:56)
• 视频： 10-3 观察者模式-场景2NodeJs自定义事件 (16:32)
• 视频： 10-4 观察者模式-其它场景 (08:26)

第11章 迭代器模式 5 节 | 41分钟

用于顺序访问集合对象的元素，是的，就是循环。自己封装，通用的循环方法就是迭代器模式的经典实现。

收起列表

• 视频： 11-1 迭代器模式-介绍 (09:30)
• 视频： 11-2 迭代器模式-演示 (07:34)
• 视频： 11-3 迭代器模式-场景(ES6 Iterator)1 (08:16)
• 视频： 11-4 迭代器模式-场景2 (04:20)
• 视频： 11-5 迭代器模式-代码演示和总结 (11:11)

第12章 状态模式 3 节 | 47分钟

对于复杂的状态管理，如果只用 if…else来判断，扩展性是非常差的。状态模式提出了一种处理复杂状态变化且扩展性好的设计思路。有限状态机、自己实现Promise等场景的讲解，经典而深入

收起列表

• 视频： 12-1 状态模式-介绍和演示 (08:05)
• 视频： 12-2 状态模式-场景1(有限状态机) (18:13)
• 视频： 12-3 状态模式-场景2(写一个promise) (20:31)

第13章 其他设计模式 12 节 | 82分钟

本章统一讲解一些 JS 中使用不是很频繁的设计模式。虽然不常用，但是也要理解其概念和用意。

收起列表

• 视频： 13-1 其他设计模式概述 (03:19)
• 视频： 13-2 原型模式 (09:12)
• 视频： 13-3 桥接模式 (04:26)
• 视频： 13-4 组合模式 (06:20)
• 视频： 13-5 享元模式 (05:48)
• 视频： 13-6 策略模式 (07:18)
• 视频： 13-7 模板方法模式和职责连模式 (08:35)
• 视频： 13-8 命令模式 (09:46)
• 视频： 13-9 备忘录模式 (11:14)
• 视频： 13-10 中介者模式 (09:09)
• 视频： 13-11 访问者模式和解释器模式 (02:51)
• 视频： 13-12 关于面试和日常使用 (03:16)

第14章 综合应用 10 节 | 101分钟

设计模式好学，不易用。最难的是不知道在什么场景下应该使用什么模式。本章以一个简单的购物车综合示例来演示几个常用的设计模式如何落地使用，包括项目的分析、设计、编码和设计模式解析。

收起列表

• 视频： 14-1 综合应用-介绍和演示 (08:17)
• 视频： 14-2 综合应用-UML类图分析 (11:10)
• 视频： 14-3 综合应用-画UML类图 (08:40)
• 视频： 14-4 综合应用-代码基础环境 (10:41)
• 视频： 14-5 综合应用-实现List组件 (13:58)
• 视频： 14-6 综合应用-实现item&cart (17:31)
• 视频： 14-7 综合应用-状态模式实现购物车操作 (07:55)
• 视频： 14-8 综合应用-实现购物车列表和折扣 (12:19)
• 视频： 14-9 综合应用-实现日志 (04:21)
• 视频： 14-10 综合应用-总结 (05:38)

第15章 课程总结 1 节 | 4分钟

回顾课程脉落，总结课程内容

收起列表

• 视频： 15-1 课程总结 (03:15)

第16章 常见问题解析 2 节 | 38分钟

讲师针对积累一年的问题，挑选活跃问题进行答疑，并讲解常见的解题思路。

收起列表

• 视频： 16-1 活跃问题讲解 part1 (16:53)
• 视频： 16-2 活跃问题讲解 part2 (20:57)