[575] 快速掌握前端必会的 7 种设计模式 – 网盘下载 - 专注 7 种，没接触过设计模式的前端新手也能“0压力”学习

网盘链接：

1. 课程介绍

• 1-1 导学
• 1-2 -下载课程源代码和电子书

2. 面向对象 OOP 和 UML 类图 – 前端开发的必备编程思想

• 2-1 章介绍
• 2-2 章介绍-讲义
• 2-3 Typescript 介绍 – 前端最热门的编程语言
• 2-4 TS 简介-讲义
• 2-5 Typescript 基础类型
• 2-6 Typescript 自定义类型和 interface
• 2-7 面向对象 – 前端主流的编程思想
• 2-8 什么是面向对象?-讲义
• 2-9 面向对象重要概念-类和实例
• 2-10 面向对象三要素-继承，封装，多态
• 2-11 Vue 和 React 组件也是对象
• 2-12 UML 类图
• 2-13 UML 类图-单个类
• 2-14 UML 类图-类之间的关系
• 2-15 UML 类图-关联关系的细化
• 2-16 章总结
• 2-17 章总结-讲义
• 2-18 课后作业

3. 设计原则 – 设计模式只是套路，设计原则是指导思想

• 3-1 章介绍
• 3-2 章介绍
• 3-3 设计原则-讲义
• 3-4 -设计原则-感性与理性
• 3-5 SOLID 五大设计原则 – 软件设计和开发的参考标准
• 3-6 Unix-Linux 设计哲学 – 前辈们总结出来的经验
• 3-7 UNIX Linux 设计哲学-讲义
• 3-8 介绍 23 种设计模式
• 3-9 介绍 23 种设计模式-讲义
• 3-10 章总结
• 3-11 章总结-讲义
• 3-12 作业

4. 工厂模式 – 封装实例的创建过程，解放 Vue React 内部都在用

• 4-1 章介绍
• 4-2 章介绍-讲义
• 4-3 工厂模式介绍-讲义
• 4-4 什么是工厂模式，它主要解决什么问题
• 4-5 工厂模式代码演示和 UML 类图-简易版本
• 4-6 工厂模式代码演示和 UML 类图-标准版本
• 4-7 演示-讲义
• 4-8 工厂模式的场景-jQuery
• 4-9 工厂模式的场景-Vue和React的createElement
• 4-10 场景-讲义
• 4-11 章总结
• 4-12 章总结-讲义
• 4-13 课后作业-并动手画出 UML 类图

5. 单例模式 – 全局只允许有一个实例，多则出错（用 TS 语法实现更优雅）

• 5-1 章介绍
• 5-2 章介绍-讲义
• 5-3 什么是单例模式，它解决什么问题
• 5-5 单例模式的演示-使用 Typescript
• 5-6 单例模式的演示-使用 Javascript
• 5-7 单例模式的演示-讲义
• 5-8 单例模式的场景-登录框
• 5-10 章总结
• 5-11 章总结-讲义
• 5-12 作业-把其中的 Typescript 代码演示自己写一遍

6. 观察者模式 – 前端（及其他 UI 编程）最常用的设计模式，工作必用，面试必考

• 6-1 章介绍
• 6-2 章介绍-讲义
• 6-3 什么是观察者模式，它解决什么问题
• 6-4 观察者模式-讲义
• 6-5 观察者模式代码演示和 UML 类图
• 6-6 观察者模式的场景-Vue 组件生命周期
• 6-7 -观察者模式的场景-Vue watch
• 6-8 -观察者模式的场景-各种异步回调函数
• 6-9 -观察者模式的场景-MutationObserver
• 6-10 观察者模式的场景-讲义
• 6-11 观察者模式和发布订阅模式的区别
• 6-12 vs 发布订阅模式-讲义
• 6-13 发布订阅模式的场景-自定义事件-Vue3 推荐使用 mitt
• 6-14 发布订阅模式的场景-postMessage 通讯
• 6-15 组件销毁前 off 自定义事件
• 6-16 章总结
• 6-17 章总结-讲义
• 6-18 模拟面试：请描述观察者模式和发布订阅模式的区别

7. 迭代器模式 – 遍历数据不仅仅是for和forEach ，还有Iterator

• 7-1 章介绍-讲义
• 7-2 章介绍
• 7-3 普通 for 循环不是迭代器
• 7-4 迭代器介绍-讲义
• 7-5 迭代器模式-UML类图和代码演示-讲义
• 7-6 迭代器模式-UML类图和代码演示
• 7-7 迭代器模式的场景-讲义
• 7-8 迭代器模式的场景-JS中的有序结有那些？
• 7-9 迭代器模式的场景-JS 内置迭代器 Symbol.iterator
• 7-10 迭代器的场景-自定义简易迭代器
• 7-11 迭代器模式的场景-迭代器在 JS 中的实际应用
• 7-12 迭代器模式的场景-Generator 生成器
• 7-13 迭代器模式的场景-使用Generator遍历DOM树
• 7-14 章总结-讲义
• 7-15 章总结
• 7-16 模拟面试：请使用 Generator 遍历一个 DOM 树

8. 原型模式 – 原型和原型链是 JS 必备的基础知识，还扩展了JS对象属性描述符

• 8-1 章介绍-讲义
• 8-2 章介绍
• 8-3 原型模式的介绍和演示-讲义
• 8-4 原型模式的介绍和演示
• 8-5 JS 原型的基础知识- prototyp e和 __proto__
• 8-6 原型和原型链-讲义
• 8-7 图解 JS 原型链
• 8-8 原型模式的场景-讲义
• 8-9 原型模式的场景-Object.create
• 8-10 JS 对象属性描述符-讲义
• 8-11 对象属性描述符-如何获取和设置
• 8-12 对象属性描述符-value
• 8-13 对象属性描述符-configurable
• 8-14 -对象属性描述符-writable-对比Object.freeze和Object.seal
• 8-15 对象属性描述符-ennumerable
• 8-16 扩展-如何遍历对象的Symbol属性
• 8-17 章总结-讲义
• 8-18 章总结
• 8-19 课后作业

9. 装饰器模式 – Decorator现已是JS 的标准语法，装饰器正在前端普及开来

• 9-1 章介绍-讲义
• 9-2 章介绍
• 9-3 装饰器模式介绍-讲义
• 9-4 什么是装饰器模式，它解决什么问题
• 9-5 演示-讲义
• 9-6 装饰器模式的 UML 类图和代码演示
• 9-7 装饰器模式的场景-讲义
• 9-8 装饰器模式的场景-装饰 class
• 9-9 装饰器模式的场景-装饰 class 方法
• 9-10 装饰器模式的场景-Angular和React-redux
• 9-11 装饰器模式的场景- AOP 面向切面编程
• 9-12 章总结-讲义
• 9-13 章总结
• 9-14 作业：根据你的理解，写一个 AOP 的示例
• 9-15 扩展-AOP 介绍

10. 代理模式 – 无论开发环境还是线上环境，编程处处有代理

• 10-1 章介绍-讲义
• 10-2 章介绍
• 10-3 什么是代理模式-讲义
• 10-4 什么是代理模式，它解决了什么问题
• 10-5 代理模式的UML类图和代码演示-讲义
• 10-6 代理模式的UML类图和代码演示
• 10-7 代理模式的场景-讲义
• 10-8 代理模式的场景-DOM事件代理
• 10-9 代理模式的场景-webpack-dev-server的代理proxy
• 10-10 代理模式的场景-Nginx反向代理
• 10-11 Proxy 的使用场景-讲义
• 10-12 Proxy语法-模拟明星经纪人示例
• 10-13 Proxy语法会用于哪些地方？
• 10-14 Proxy可能会遇到的坑
• 10-15 Proxy 的注意事项-讲义
• 10-16 章总结-讲义
• 10-17 章总结
• 10-18 作业：写代码， 语法监

11. 其他设计模式 – 虽然有些模式不常用，但其编程思路很常用

• 11-1 章介绍-讲义
• 11-2 章介绍
• 11-3 职责链模式-讲义
• 11-4 职责链模式-把一个流程分为多个步骤，链式执行
• 11-5 策略模式-讲义
• 11-6 策略模式-避免大量的if-else或switch-case
• 11-7 适配器模式-讲义
• 11-8 适配器模式-灵活转换数据格式
• 11-9 章总结-讲义
• 11-10 章总结
• 11-11 MVC 和 MVVM-讲义
• 11-12 关于MVC和MVVM
• 11-13 作业：请分别描述职责链模式、策略模式、适配器模式的作用和场景

12. 实战演练 – 看两个面试真题，体会一下设计模式的价值

• 12-1 章介绍-讲义
• 12-2 章介绍
• 12-3 打车面试题-题目解读和分析
• 12-4 面试题 – 打车
• 12-5 打车面试题-代码演示和UML类图
• 12-6 面试题 – 停车场
• 12-7 停车场面试题-题目解读和分析
• 12-8 停车场面试题-代码演示
• 12-9 停车场面试题-UML类图
• 12-10 章总结
• 12-11 章总结-讲义
• 12-12 作业

13. 课程总结

• 13-1 课程总结