这是我参与「第四届青训营」笔记创作活动的第4天

一、重点内容

介绍了设计模式的基本概念和背景；
详细说明了设计模式的各个分类。

二、详细知识点

设计模式是啥？

设计模式是在软件设计开发的过程当中反复出现的问题的通用解决方案。

注意：设计模式是解决方案的思路，而不是现成代码。

设计模式背景

模式语言：城镇、建筑、建造
（A Pattern Language:Towns,Buildings,Construction）1977
设计模式：可复用面向对象软件的基础
（Design Patterns:Elements of Reusable Object-Oriented Sostware）1994

设计模式分类（23种）

创建型（5种）：字如其意，创建一个对象。
结构型（7种）：字如其意，将对象组成较大的结构。
行为型（11种）：负责对象间的高效通信和职责的划分。

浏览器中的设计模式

单例模式
发布订阅模式

单例模式

定义：只能创建一个对象。
应用场景：处理资源访问冲突。

class Person{
  constructor(){}
}
 
let p1 = new Person();
let p2 = new Person();
 
console.log(p1===p2) //false

发布订阅模式

定义：一种订阅机制，订阅者把要订阅的事件弄到调度中心，只要被订阅对象发布事件到调度中心，那么就会通知订阅者（一对多）。
应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等，应用广泛。

JavaScript中的设计模式

原型模式
代理模式
迭代器模式

原型模式

定义：通过拷贝原型，创建出新的对象。
应用场景：JS中对象创建的基本模式，属于JavaScript的灵魂。

代理模式（委托模式）

定义：为某一个对象选择出代理对象，还要让代理对象控制原来对象的访问。
应用场景：监控、统计、鉴权、限流、缓存、代理工具，前端框架实现等等。

迭代器模式

定义：在不暴露对象内部情况下，分离出迭代过程，然后访问集合中的每个数据。
应用场景：数据结构中有多种数据类型，列表，树等，提供通用操作接口。
分类：

内部迭代器
外部迭代器

  function Iterator(data){
    this.data=data;
  }
  Iterator.prototype.dealEach=function(fn){
    if(this.data instanceof Array){
      for(var i=0;i<this.data.length;i++){
        fn(this.data[i],i)
      }
    }else{
      for(var item in this.data){
        fn(this.data[item],item)
      }
    }
  }

前端框架中的设计模式

代理模式
组合模式

组合模式

定义：可以多个对象组合使用，也可以单个对象独立使用
应用场景：以树形结构来统一单个对象和组合对象的逻辑处理（递归遍历）

三、总结

设计模式不是固定的某种方法，没有固定的适用场景，所以需要我们在学习的过程中，不断的思考和总结。

四、引用参考

设计模式这样学也太简单了吧！ - 掘金 (juejin.cn)

前端设计模式应用 | 青训营笔记