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

admin8

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

第2章 面向对象 OOP 和 UML 类图 - 前端开发的必备编程思想
本章是课程的基础知识铺垫。课程使用 Typescript 做代码演示，所以先介绍 Typescript 类型。设计模式是基于面向对象编程 OOP 的，所以先介绍面向对象的概念。UML 类图是面向对象编程的重要设计工具。

第3章 设计原则 - 设计模式只是套路，设计原则是指导思想
设计模式应该分开读:从设计到模式。因此先从基本的设计原则入手，引用《UNIX/Linux设计哲学》一书来辅助讲解。然后再由设计过度到模式，介绍 23 种设计模式。

第4章 工厂模式 - 封装实例的创建过程，解放 Vue React 内部都在用
工厂模式是前端常用设计模式之一。本章将详细讲解工厂模式，从概念背景，到代码示例和 UML 类图，最后到它的具体使用场景。

第5章 单例模式 - 全局只允许有一个实例，多则出错（用 TS 语法实现更优雅）
单例模式是前端常用设计模式之一，而且单例模式的设计思想到处都能体现，如 Vuex 全局唯一的 store 。本章将详细讲解单例模式，从概念背景，到代码示例和 UML 类图，最后到它的具体使用场景。

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

第7章 迭代器模式 - 遍历数据不仅仅是for和forEach ，还有Iterator
普通的 for 循环不是迭代器，它有很多限制，所有高级编程语言都需要迭代器。JS 的有序结构就内置了迭代器，学完本章你讲详细掌握 JS 内置迭代器，以及 Generator 生成器。

第8章 原型模式 - 原型和原型链是 JS 必备的基础知识，还扩展了JS对象属性描述符
JS 对象是基于原型的，原型和原型链是 JS 的基础知识。因此，原型模式也是我们必须要学习掌握的。本章将详细介绍原型模式，并配合 JS 原型和原型链一起理解。

第9章 装饰器模式 - Decorator现已是JS 的标准语法，装饰器正在前端普及开来
装饰器模式是前端常用的设计模式之一。ES 规范早已引入了装饰器语法，Typescript 也原生支持装饰器语法，是前端工程师必备的技能。本章将详细讲解装饰器模式，从概念背景，到代码示例和 UML 类图，最后到它的具体使用场景:Typescript 装饰器语法。...

第10章 代理模式 - 无论开发环境还是线上环境，编程处处有代理
代理模式是前端常用的设计模式之一，Proxy 早已是 ES 的标准语法，Vue3 也使用 Proxy 实现数据响应式。本章将详细介绍代理模式，并配合 Proxy 语法和应用一起理解。

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

第12章 实战演练 - 看两个面试真题，体会一下设计模式的价值
对于工作经验超过 3 年的同学，面试是经常考察项目设计问题的，这就会用到设计模式。本章就准备了两个面试真题，让你亲身体会面试过程中设计模式的重要性。

第13章 课程总结
课程内容回顾，课程总结。


下载地址:

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

17770767379

啥也不说了，感谢楼主分享哇！

zxhy

珍惜生命，果断回帖。

gxkm

额，看不懂在说神马~@_@

joky5699

啥也不说了，感谢楼主分享哇！

ironman

啥也不说了，感谢楼主分享哇！

a5120399

正需要，支持楼主大人了！

whj1984

啥也不说了，感谢楼主分享哇！

mytest123

啥也不说了，感谢楼主分享哇！

2430402739

这个帖一般般，还可以哦。