获取资料

给前端同学的设计模式精讲课(快速掌握前端必会的7种设计模式)

给前端同学的设计模式精讲课(快速掌握前端必会的7种设计模式)

第1章 课程介绍 2 节 | 18分钟

本章介绍课程主要内容,学习目标,学习方法和注意事项。

1-1 导学 (06:45)

1-2 -下载课程源代码和电子书 (10:41)

第2章 面向对象 OOP 和 UML 类图 – 前端开发的必备编程思想18 节 | 122分钟

本章是课程的基础知识铺垫。课程使用 Typescript 做代码演示,所以先介绍 Typescript 类型。设计模式是基于面向对象编程 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 章总结-讲义

第3章 设计原则 – 设计模式只是套路,设计原则是指导思想 12 节 | 56分钟

设计模式应该分开读:从设计到模式。因此先从基本的设计原则入手,引用《UNIX/Linux设计哲学》一书来辅助讲解。然后再由设计过度到模式,介绍 23 种设计模式。

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 章总结-讲义

第4章 工厂模式 – 封装实例的创建过程,解放 Vue React 内部都在用13 节 | 66分钟

工厂模式是前端常用设计模式之一。本章将详细讲解工厂模式,从概念背景,到代码示例和 UML 类图,最后到它的具体使用场景。

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 章总结-讲义

第5章 单例模式 – 全局只允许有一个实例,多则出错(用 TS 语法实现更优雅)10 节 | 45分钟

单例模式是前端常用设计模式之一,而且单例模式的设计思想到处都能体现,如 Vuex 全局唯一的 store 。本章将详细讲解单例模式,从概念背景,到代码示例和 UML 类图,最后到它的具体使用场景。

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 章总结-讲义

第6章 观察者模式 – 前端(及其他 UI 编程)最常用的设计模式,工作必用,面试必考18 节 | 112分钟

观察者模式是前端最常见的设计模式,也是其他 UI 编程最常用的编程模式。本章将详细讲解观察者模式,从概念背景,到代码示例和 UML 类图,最后到它的具体使用场景。此外,还要对比观察者模式和发布订阅模式,学完能让你一眼看出他们的区别。…

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 章总结-讲义

第7章 迭代器模式 – 遍历数据不仅仅是for和forEach ,还有Iterator16 节 | 76分钟

普通的 for 循环不是迭代器,它有很多限制,所有高级编程语言都需要迭代器。JS 的有序结构就内置了迭代器,学完本章你讲详细掌握 JS 内置迭代器,以及 Generator 生成器。

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)

第8章 原型模式 – 原型和原型链是 JS 必备的基础知识,还扩展了JS对象属性描述符19 节 | 68分钟

JS 对象是基于原型的,原型和原型链是 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)

第9章 装饰器模式 – Decorator现已是JS 的标准语法,装饰器正在前端普及开来15 节 | 47分钟

装饰器模式是前端常用的设计模式之一。ES 规范早已引入了装饰器语法,Typescript 也原生支持装饰器语法,是前端工程师必备的技能。本章将详细讲解装饰器模式,从概念背景,到代码示例和 UML 类图,最后到它的具体使用场景:Typescript 装饰器语法。…

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-15 扩展-AOP 介绍

第10章 代理模式 – 无论开发环境还是线上环境,编程处处有代理18 节 | 70分钟

代理模式是前端常用的设计模式之一,Proxy 早已是 ES 的标准语法,Vue3 也使用 Proxy 实现数据响应式。本章将详细介绍代理模式,并配合 Proxy 语法和应用一起理解。

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)

第11章 其他设计模式 – 虽然有些模式不常用,但其编程思路很常用13 节 | 21分钟

除了上述常用的设计模式之外,还有其他一些不太常用、但对日常编程启发很大的设计模式,也值得一起学习。本章讲详细介绍这些设计模式,包括职责链模式、策略模式、适配器模式、组合模式,以及常见的 MVC 和 MVVM。

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)

评论0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址