前端设计模式精讲课：前端必学七种设计模式

从“写代码”到“写好代码”到“设计代码”，不仅是技术的提升，更是编程思维的提升，其中最关键的就是设计模式。但很多人想学习设计模式时，往往是查到的资料一堆，有用的知识少见，学得云里雾里，难以实践。本课从23种设计模式中精选前端常用的7种设计模式，利用场景化实例教学，让想学的人真正学明白、会应用、能实践。

适合人群

任何想学习设计模式的前端人员

希望一鸣惊人的应届生

想要造轮子搭工具的技术玩咖

技术储备

熟悉 Javascript

了解 Vue 和 React

环境参数

vue 3.0

React 17

课程目录：

├──第1章课程介绍

| ├──1-1导学.mp4 25.23M

| └──1-2-下载课程源代码和电子书.mp4 83.88M

├──第2章面向对象OOP和UML类图-前端开发的必备编程思想

| ├──2-10面向对象三要素-继承，封装，多态.mp4 129.65M

| ├──2-11Vue和React组件也是对象.mp4 22.45M

| ├──2-12UML类图.pdf 6.92M

| ├──2-13UML类图-单个类.mp4 96.25M

| ├──2-14UML类图-类之间的关系.mp4 114.80M

| ├──2-15UML类图-关联关系的细化.mp4 25.05M

| ├──2-16章总结.mp4 8.10M

| ├──2-17章总结-讲义.pdf 6.57M

| ├──2-1章介绍.mp4 20.54M

| ├──2-2章介绍-讲义.pdf 6.57M

| ├──2-3Typescript介绍-前端最热门的编程语言.mp4 61.05M

| ├──2-4TS简介-讲义.pdf 6.60M

| ├──2-5Typescript基础类型.mp4 79.69M

| ├──2-6Typescript自定义类型和interface.mp4 60.14M

| ├──2-7面向对象-前端主流的编程思想.mp4 28.91M

| ├──2-8什么是面向对象-讲义.pdf 6.61M

| └──2-9面向对象重要概念-类和实例.mp4 49.31M

├──第3章设计原则-设计模式只是套路，设计原则是指导思想

| ├──3-10章总结.mp4 5.29M

| ├──3-11章总结-讲义.pdf 6.56M

| ├──3-1章介绍.mp4 13.65M

| ├──3-2章介绍.pdf 6.56M

| ├──3-3设计原则-讲义.pdf 6.62M

| ├──3-4-设计原则-感性与理性.mp4 70.00M

| ├──3-5SOLID五大设计原则-软件设计和开发的参考标准.mp4 92.45M

| ├──3-6Unix-Linux设计哲学-前辈们总结出来的经验.mp4 47.83M

| ├──3-7UNIXLinux设计哲学-讲义.pdf 6.60M

| ├──3-8介绍23种设计模式.mp4 42.38M

| └──3-9介绍23种设计模式-讲义.pdf 6.64M

├──第4章工厂模式-封装实例的创建过程，解放VueReact内部都在

| ├──4-10场景-讲义.pdf 75.26kb

| ├──4-11章总结.mp4 14.10M

| ├──4-12章总结-讲义.pdf 33.82kb

| ├──4-1章介绍.mp4 7.94M

| ├──4-2章介绍-讲义.pdf 30.58kb

| ├──4-3工厂模式介绍-讲义.pdf 52.62kb

| ├──4-4什么是工厂模式，它主要解决什么问题.mp4 44.96M

| ├──4-5工厂模式代码演示和UML类图-简易版本.mp4 84.81M

| ├──4-6工厂模式代码演示和UML类图-标准版本.mp4 84.56M

| ├──4-7演示-讲义.pdf 151.74kb

| ├──4-8工厂模式的场景-jQuery.mp4 180.74M

| └──4-9工厂模式的场景-Vue和React的createEleme.mp4 62.58M

├──第5章单例模式-全局只允许有一个实例，多则出错（用TS语法实现更

| ├──5-1章介绍.mp4 6.30M

| ├──5-2章介绍-讲义.pdf 27.07kb

| ├──5-3什么是单例模式，它解决什么问题.mp4 46.14M

| ├──5-4单例模式的演示-使用Typescript.mp4 120.73M

| ├──5-5单例模式的演示-使用Javascript.mp4 50.58M

| ├──5-6单例模式的演示-讲义.pdf 96.45kb

| ├──5-7单例模式的场景-登录框.mp4 41.01M

| ├──5-8章总结.mp4 6.65M

| └──5-9章总结-讲义.pdf 36.10kb

├──第6章观察者模式-前端（及其他UI编程）最常用的设计模式，工作必

| ├──6-10观察者模式的场景-讲义.pdf 236.59kb

| ├──6-11观察者模式和发布订阅模式的区别.mp4 20.98M

| ├──6-12vs发布订阅模式-讲义.pdf 138.03kb

| ├──6-13发布订阅模式的场景-自定义事件-Vue3推荐使用mitt.mp4 80.95M

| ├──6-14发布订阅模式的场景-postMessage通讯.mp4 55.46M

| ├──6-15组件销毁前off自定义事件.mp4 42.21M

| ├──6-16章总结.mp4 7.58M

| ├──6-17章总结-讲义.pdf 37.20kb

| ├──6-1章介绍.mp4 9.02M

| ├──6-2章介绍-讲义.pdf 28.35kb

| ├──6-3什么是观察者模式，它解决什么问题.mp4 23.33M

| ├──6-4观察者模式-讲义.pdf 159.61kb

| ├──6-5观察者模式代码演示和UML类图.mp4 108.48M

| ├──6-6观察者模式的场景-Vue组件生命周期.mp4 50.56M

| ├──6-7-观察者模式的场景-Vuewatch.mp4 108.72M

| ├──6-8-观察者模式的场景-各种异步回调函数.mp4 109.18M

| └──6-9-观察者模式的场景-MutationObserver.mp4 57.43M

├──第7章迭代器模式-遍历数据不仅仅是for和forEach，还有I

| ├──7-10迭代器的场景-自定义简易迭代器.mp4 26.60M

| ├──7-11迭代器模式的场景-迭代器在JS中的实际应用.mp4 95.97M

| ├──7-12迭代器模式的场景-Generator生成器.mp4 74.67M

| ├──7-13迭代器模式的场景-使用Generator遍历DOM树.mp4 31.47M

| ├──7-14章总结-讲义.pdf 27.27kb

| ├──7-15章总结.mp4 6.32M

| ├──7-1章介绍-讲义.pdf 26.14kb

| ├──7-2章介绍.mp4 7.00M

| ├──7-3普通for循环不是迭代器.mp4 16.81M

| ├──7-4迭代器介绍-讲义.pdf 44.83kb

| ├──7-5迭代器模式-UML类图和代码演示-讲义.pdf 81.29kb

| ├──7-6迭代器模式-UML类图和代码演示.mp4 101.44M

| ├──7-7迭代器模式的场景-讲义.pdf 57.76kb

| ├──7-8迭代器模式的场景-JS中的有序结有那些？.mp4 28.21M

| └──7-9迭代器模式的场景-JS内置迭代器Symbol.iterat.mp4 40.14M

├──第8章原型模式-原型和原型链是JS必备的基础知识，还扩展了JS对

| ├──8-10JS对象属性描述符-讲义.pdf 78.46kb

| ├──8-11对象属性描述符-如何获取和设置.mp4 40.71M

| ├──8-12对象属性描述符-value.mp4 29.35M

| ├──8-13对象属性描述符-configurable.mp4 21.51M

| ├──8-14-对象属性描述符-writable-对比Object.f.mp4 73.56M

| ├──8-15对象属性描述符-ennumerable.mp4 34.98M

| ├──8-16扩展-如何遍历对象的Symbol属性.mp4 18.03M

| ├──8-17章总结-讲义.pdf 25.68kb

| ├──8-18章总结.mp4 6.07M

| ├──8-1章介绍-讲义.pdf 25.39kb

| ├──8-2章介绍.mp4 10.08M

| ├──8-3原型模式的介绍和演示-讲义.pdf 57.11kb

| ├──8-4原型模式的介绍和演示.mp4 26.54M

| ├──8-5JS原型的基础知识-prototype和__proto__.mp4 81.44M

| ├──8-6原型和原型链-讲义.pdf 68.23kb

| ├──8-7图解JS原型链.mp4 68.01M

| ├──8-8原型模式的场景-讲义.pdf 25.82kb

| └──8-9原型模式的场景-Object.create.mp4 19.58M

├──第9章装饰器模式-Decorator现已是JS的标准语法，装饰器

| ├──9-10装饰器模式的场景-Angular和React-redux.mp4 25.21M

| ├──9-11装饰器模式的场景-AOP面向切面编程.mp4 94.30M

| ├──9-12章总结-讲义.pdf 40.65kb

| ├──9-15扩展-AOP介绍.pdf 87.08kb

| ├──9-1章介绍-讲义.pdf 29.62kb

| ├──9-2章介绍.mp4 5.86M

| ├──9-3装饰器模式介绍-讲义.pdf 275.45kb

| ├──9-4什么是装饰器模式，它解决什么问题.mp4 25.37M

| ├──9-5演示-讲义.pdf 66.77kb

| ├──9-6装饰器模式的UML类图和代码演示.mp4 36.56M

| ├──9-7装饰器模式的场景-讲义.pdf 52.88kb

| ├──9-8装饰器模式的场景-装饰class.mp4 42.40M

| └──9-9装饰器模式的场景-装饰class方法.mp4 61.17M

├──第10章代理模式-无论开发环境还是线上环境，编程处处有代理icl

| ├──10-10代理模式的场景-Nginx反向代理.mp4 45.33M

| ├──10-11Proxy的使用场景-讲义.pdf 53.24kb

| ├──10-12Proxy语法-模拟明星经纪人示例.mp4 82.84M

| ├──10-13Proxy语法会用于哪些地方？.mp4 85.10M

| ├──10-14Proxy可能会遇到的坑.mp4 33.00M

| ├──10-15Proxy的注意事项-讲义.pdf 43.70kb

| ├──10-16章总结-讲义.pdf 24.19kb

| ├──10-17章总结.mp4 4.98M

| ├──10-1章介绍-讲义.pdf 26.40kb

| ├──10-2章介绍.mp4 4.08M

| ├──10-3什么是代理模式-讲义.pdf 47.31kb

| ├──10-4什么是代理模式，它解决了什么问题.mp4 6.01M

| ├──10-5代理模式的UML类图和代码演示-讲义.pdf 70.77kb

| ├──10-6代理模式的UML类图和代码演示.mp4 67.91M

| ├──10-7代理模式的场景-讲义.pdf 65.11kb

| ├──10-8代理模式的场景-DOM事件代理.mp4 54.32M

| └──10-9代理模式的场景-webpack-dev-server的代.mp4 56.67M

├──第11章其他设计模式-虽然有些模式不常用，但其编程思路很常用ic

| ├──11-10章总结.mp4 2.89M

| ├──11-11MVC和MVVM-讲义.pdf 6.64M

| ├──11-12关于MVC和MVVM.mp4 11.49M

| ├──11-1章介绍-讲义.pdf 6.56M

| ├──11-2章介绍.mp4 3.15M

| ├──11-3职责链模式-讲义.pdf 6.57M

| ├──11-4职责链模式-把一个流程分为多个步骤，链式执行.mp4 28.28M

| ├──11-5策略模式-讲义.pdf 6.56M

| ├──11-6策略模式-避免大量的if-else或switch-cas.mp4 59.31M

| ├──11-7适配器模式-讲义.pdf 6.64M

| ├──11-8适配器模式-灵活转换数据格式.mp4 23.30M

| └──11-9章总结-讲义.pdf 6.56M

├──第12章实战演练-看两个面试真题，体会一下设计模式的价值

| ├──12-11章总结-讲义.pdf 22.96kb

| ├──12-1章介绍-讲义.pdf 30.26kb

| ├──12-3打车面试题-题目解读和分析.mp4 33.80M

| ├──12-4面试题-打车.pdf 118.50kb

| ├──12-5打车面试题-代码演示和UML类图.mp4 72.83M

| ├──12-6面试题-停车场.pdf 325.37kb

| ├──12-7停车场面试题-题目解读和分析.mp4 35.57M

| ├──12-8停车场面试题-代码演示.mp4 109.53M

| └──12-9停车场面试题-UML类图.mp4 121.70M

├──第13章课程总结

| └──13-1课程总结.mp4 47.21M

├──课件.zip 5.27M

└──说明.png 2.50M