快速掌握前端必会的 7 种设计模式

课程目录

从“写代码”到“写好代码”到“设计代码”，不仅是技术的提升，更是编程思维的提升，其中关键的就是设计模式。但很多人想学习设计模式时，往往是查到的资料一堆，有用的知识少见，学得云里雾里，难以实践。本课从23种设计模式中精选前端常用的7种设计模式，利用场景化实例教学，让想学的人尽可能学明白、会应用、能实践。 第1章 课程介绍 1-1 导学 (06:45) 1-2 -下载课程源代码和电子书 (10:41) 第2章 面向对象 OOP 和 UML 类图 – 前端开发的必备编程思想 2-1 章介绍 (08:20) 2-2 章介绍-讲义 2-3 Typescript 介绍 – 前端最热门的编程语言 (09:41) 2-4 TS 简介-讲义 2-5 Typescript 基础类型 (10:58) 2-6 Typescript 自定义类型和 interface (11:27) 2-7 面向对象 – 前端主流的编程思想 (08:06) 2-8 什么是面向对象?-讲义 2-9 面向对象重要概念-类和实例 (08:54) 2-

10 面向对象三要素-继承，封装，多态 (22:43) 2-

11 Vue 和 React 组件也是对象 (04:42) 2-

12 UML 类图 2-

13 UML 类图-单个类 (12:43) 2-

14 UML 类图-类之间的关系 (14:53) 2-

15 UML 类图-关联关系的细化 (06:04) 2-

16 章总结 (03:08) 2-

17 章总结-讲义 2-

18 课后作业 第3章 设计原则 – 设计模式只是套路，设计原则是指导思想 3-1 章介绍 (06:28) 3-2 章介绍 3-3 设计原则-讲义 3-4 -设计原则-感性与理性 (11:24) 3-5 SOLID 五大设计原则 – 软件设计和开发的参考标准 (13:10) 3-6 Unix-Linux 设计哲学 – 前辈们总结出来的经验 (13:02) 3-7 UNIX Linux 设计哲学-讲义 3-8 介绍 

23 种设计模式 (09:09) 3-9 介绍 

23 种设计模式-讲义 3-

10 章总结 (02:14) 3-

11 章总结-讲义 3-

12 作业 第4章 工厂模式 – 封装实例的创建过程，解放 Vue React 内部都在用 4-1 章介绍 (04:35) 4-2 章介绍-讲义 4-3 工厂模式介绍-讲义 4-4 什么是工厂模式，它主要解决什么问题 (06:37) 4-5 工厂模式代码演示和 UML 类图-简易版本 (08:25) 4-6 工厂模式代码演示和 UML 类图-标准版本 (15:34) 4-7 演示-讲义 4-8 工厂模式的场景-jQuery (17:27) 4-9 工厂模式的场景-Vue和React的createElement (09:34) 4-

10 场景-讲义 4-

11 章总结 (03:48) 4-

12 章总结-讲义 4-

13 课后作业-并动手画出 UML 类图 第5章 单例模式 – 全局只允许有一个实例，多则出错（用 TS 语法实现更优雅） 5-1 章介绍 (02:49) 5-2 章介绍-讲义 5-3 什么是单例模式，它解决什么问题 (06:21) 5-4 单例模式的演示-使用 Typescript (15:40) 5-5 单例模式的演示-使用 Javascript (08:40) 5-6 单例模式的演示-讲义 5-7 单例模式的场景-登录框 (07:56) 5-8 章总结 (02:58) 5-9 章总结-讲义 5-

10 作业-把其中的 Typescript 代码演示自己写一遍 第6章 观察者模式 – 前端（及其他 UI 编程）最常用的设计模式，工作必用，面试必考 6-1 章介绍 (03:22) 6-2 章介绍-讲义 6-3 什么是观察者模式，它解决什么问题 (05:36) 6-4 观察者模式-讲义 6-5 观察者模式代码演示和 UML 类图 (14:01) 6-6 观察者模式的场景-Vue 组件生命周期 (06:15) 6-7 -观察者模式的场景-Vue watch (19:06) 6-8 -观察者模式的场景-各种异步回调函数 (19:03) 6-9 -观察者模式的场景-MutationObserver (10:50) 6-

10 观察者模式的场景-讲义 6-

11 观察者模式和发布订阅模式的区别 (05:05) 6-

12 vs 发布订阅模式-讲义 6-13 发布订阅模式的场景-自定义事件-Vue3 推荐使用 mitt (10:35) 6-

14 发布订阅模式的场景-postMessage 通讯 (07:59) 6-

15 组件销毁前 off 自定义事件 (07:24) 6-

16 章总结 (02:34) 6-

17 章总结-讲义 6-

18 模拟面试：请描述观察者模式和发布订阅模式的区别 第7章 迭代器模式 – 遍历数据不仅仅是for和forEach ，还有Iterator 7-1 章介绍-讲义 7-2 章介绍 (03:02) 7-3 普通 for 循环不是迭代器 (05:22) 7-4 迭代器介绍-讲义 7-5 迭代器模式-UML类图和代码演示-讲义 7-6 迭代器模式-UML类图和代码演示 (13:20) 7-7 迭代器模式的场景-讲义 7-8 迭代器模式的场景-JS中的有序结有那些？ (05:54) 7-9 迭代器模式的场景-JS 内置迭代器 Symbol.iterator (07:02) 7-

10 迭代器的场景-自定义简易迭代器 (04:02) 7-

11 迭代器模式的场景-迭代器在 JS 中的实际应用 (15:26) 7-

12 迭代器模式的场景-Generator 生成器 (12:18) 7-13 迭代器模式的场景-使用Generator遍历DOM树 (06:23) 7-

14 章总结-讲义 7-

15 章总结 (02:35) 7-

16 模拟面试：请使用 Generator 遍历一个 DOM 树 第8章 原型模式 – 原型和原型链是 JS 必备的基础知识，还扩展了JS对象属性描述符 8-1 章介绍-讲义 8-2 章介绍 (03:45) 8-3 原型模式的介绍和演示-讲义 8-4 原型模式的介绍和演示 (02:55) 8-5 JS 原型的基础知识- prototyp e和 proto (11:30) 8-6 原型和原型链-讲义 8-7 图解 JS 原型链 (11:10) 8-8 原型模式的场景-讲义 8-9 原型模式的场景-Object.create (03:33) 8-

10 JS 对象属性描述符-讲义 8-

11 对象属性描述符-如何获取和设置 (05:13) 8-

12 对象属性描述符-value (04:14) 8-

13 对象属性描述符-configurable (02:48) 8-14 -对象属性描述符-writable-对比Object.freeze和Object.seal (10:24) 8-

15 对象属性描述符-ennumerable (06:25) 8-

16 扩展-如何遍历对象的Symbol属性 (03:08) 8-

17 章总结-讲义 8-

18 章总结 (02:07) 8-

19 课后作业 第9章 装饰器模式 – Decorator现已是JS 的标准语法，装饰器正在前端普及开来 9-1 章介绍-讲义 9-2 章介绍 (02:15) 9-3 装饰器模式介绍-讲义 9-4 什么是装饰器模式，它解决什么问题 (04:11) 9-5 演示-讲义 9-6 装饰器模式的 UML 类图和代码演示 (06:40) 9-7 装饰器模式的场景-讲义 9-8 装饰器模式的场景-装饰 class (06:43) 9-9 装饰器模式的场景-装饰 class 方法 (09:37) 9-10 装饰器模式的场景-Angular和React-redux (04:39) 9-

11 装饰器模式的场景- AOP 面向切面编程 (10:38) 9-

12 章总结-讲义 9-

13 章总结 (02:17) 9-

14 作业：根据你的理解，写一个 AOP 的示例 9-

15 扩展-AOP 介绍 第10章 代理模式 – 无论开发环境还是线上环境，编程处处有代理 10-1 章介绍-讲义 10-2 章介绍 (01:45) 10-3 什么是代理模式-讲义 10-4 什么是代理模式，它解决了什么问题 (03:49) 10-5 代理模式的UML类图和代码演示-讲义 10-6 代理模式的UML类图和代码演示 (09:17) 10-7 代理模式的场景-讲义 10-8 代理模式的场景-DOM事件代理 (06:08) 10-9 代理模式的场景-webpack-dev-server的代理proxy (08:28) 10-

10 代理模式的场景-Nginx反向代理 (07:08) 10-

11 Proxy 的使用场景-讲义 10-

12 Proxy语法-模拟明星经纪人示例 (08:17) 10-

13 Proxy语法会用于哪些地方？ (14:46) 10-

14 Proxy可能会遇到的坑 (06:40) 10-

15 Proxy 的注意事项-讲义 10-

16 章总结-讲义 10-

17 章总结 (02:44) 10-

18 作业：写代码， 语法监 第11章 其他设计模式 – 虽然有些模式不常用，但其编程思路很常用 11-1 章介绍-讲义 11-2 章介绍 (01:24) 11-3 职责链模式-讲义 11-4 职责链模式-把一个流程分为多个步骤，链式执行 (03:48) 11-5 策略模式-讲义 11-6 策略模式-避免大量的if-else或switch-case (06:07) 11-7 适配器模式-讲义 11-8 适配器模式-灵活转换数据格式 (03:30) 11-9 章总结-讲义 11-

10 章总结 (01:17) 11-

11 MVC 和 MVVM-讲义 11-

12 关于MVC和MVVM (04:08) 11-13 作业：请分别描述职责链模式、策略模式、适配器模式的作用和场景 第12章 实战演练 – 看两个面试真题，体会一下设计模式的价值 12-1 章介绍-讲义 12-2 章介绍 (06:38) 12-3 打车面试题-题目解读和分析 (09:24) 12-4 面试题 – 打车 12-5 打车面试题-代码演示和UML类图 (13:12) 12-6 面试题 – 停车场 12-7 停车场面试题-题目解读和分析 (12:10) 12-8 停车场面试题-代码演示 (18:14) 12-9 停车场面试题-UML类图 (21:05) 12-

10 章总结 (02:16) 12-

11 章总结-讲义 12-

12 作业 第13章 课程总结 13-1 课程总结 (07:42) 网盘截图：