快速掌握前端必会的 7 种设计模式(完结)

itspxx · 发表于 2022-7-6 17:11:34

〖课程介绍〗:
      从“写代码”到“写好代码”到“设计代码”，不仅是技术的提升，更是编程思维的提升，其中最关键的就是设计模式。但很多人想学习设计模式时，往往是查到的资料一堆，有用的知识少见，学得云里雾里，难以实践。本课从23种设计模式中精选前端常用的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 章总结-讲义
      作业：
      2-18 课后作业
      第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 章总结-讲义
      作业：
      3-12 作业
      第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 章总结-讲义
      作业：
      4-13 课后作业-并动手画出 UML 类图
      第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 章总结-讲义
      作业：
      5-10 作业-把其中的 Typescript 代码演示自己写一遍
      第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 章总结-讲义
      作业：
      6-18 模拟面试：请描述观察者模式和发布订阅模式的区别
      第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)
      作业：
      7-16 模拟面试：请使用 Generator 遍历一个 DOM 树
      第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)
      作业：
      8-19 课后作业
      第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-14 作业：根据你的理解，写一个 AOP 的示例
      图文：
      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)
      作业：
      10-18 作业：写代码，语法监
      第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)
      作业：
      11-13 作业：请分别描述职责链模式、策略模式、适配器模式的作用和场景
      第12章实战演练 - 看两个面试真题，体会一下设计模式的价值12 节 | 83分钟
      对于工作经验超过 3 年的同学，面试是经常考察项目设计问题的，这就会用到设计模式。本章就准备了两个面试真题，让你亲身体会面试过程中设计模式的重要性。

      收起列表
      图文：
      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章课程总结1 节 | 8分钟
      课程内容回顾，课程总结。

      收起列表
      视频：
      13-1 课程总结 (07:42)

〖视频截图〗:

〖百度网盘下载地址〗:

游客，如果您要查看本帖隐藏内容请回复

---------------------------------华丽分割线-----------------------------------华丽分割线--------------------------华丽分割线-------------------------华丽分割线-----------------------

〖下载地址失效反馈〗:
如果下载地址失效，请尽快反馈给我们，我们尽快修复。反馈地址：https://www.itspxx.com/forum-85-1.html

〖赞助VIP免学币下载全站资源〗:
全站资源高清无密，每天更新，vip特权了解一下：https://www.itspxx.com/plugin.php?id=threed_vip#vip_info

〖客服24小时咨询〗:
有任何问题，请点击右侧QQ咨询。

lxplxp · 发表于 2022-7-6 17:30:17

看到这样的好资源真是高兴！感谢【it视频学习网】的无私分享！

xiaolong51067 · 发表于 2022-7-6 17:47:32

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

Nokia · 发表于 2022-7-6 18:04:09

看到这样的好资源真是高兴！感谢【it视频学习网】的无私分享！

fukaikiso · 发表于 2022-7-6 18:07:46

看到这样的好资源真是高兴！感谢【it视频学习网】的无私分享！

油爷 · 发表于 2022-7-6 19:06:15

太生气了，无法HOLD啦 >_<......为什么我才发现【it视频学习网】这样的好站！

muyun · 发表于 2022-7-6 19:43:11

【IT视频学习网】加油，我们都看好你哦，快分享更多好资源吧！

iloveit · 发表于 2022-7-6 20:43:24

真是难得给力的资源啊！支持【IT视频学习网】！

prassein · 发表于 2022-7-6 21:43:24

感恩【it视频学习网】无私的分享与奉献！

sarck1 · 发表于 2022-7-7 08:51:05

看到这样的好资源真是高兴！感谢【it视频学习网】的无私分享！

docker与k8s kubernetes超清视频教程-2018

[Web] 快速掌握前端必会的 7 种设计模式(完结)

相关帖子

编程开发

互联网主流

其他热门

产品与服务