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

前言

设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案，是在软件开发中提供可复用的基础。设计模式随着需求的变化，变化也是越来越快。

设计模式分类

创建型（一般用在如何创建对象上面）。
结构性（一般用在将多个对象组成更复杂的对象）。
行为性（负责对象之间通信和职责划分）。

浏览器常用的2种设计模式

单例模式

单例模式在很多场景都很常用，它指在全局中只存在一个实例的对象，多用于缓存，全局状态管理等。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不需要实例化该类的对象。

请求缓存案例

export class Request{
 static instance:Request;
 private cache:Record<string,string>
 
 constructor(){
  this.cache = {}
 }
 /*
 *获取全局唯一实例
 *
 */
 static getInstance(){
  if(this.instance){
   return this.instance;
  }
  this.instance = new Request();
  return this.instance;
 }
 
 public async request(url:string){
  if(this.cache[url]){
   return this.cache[url];
  }
  const respoonse = await api(url)
  this.cache[url] = response;
  return response;
 }

}

发布订阅模式

发布订阅模式应用场景在前端领域很广泛，例如Vue，React这些MVVM框架都用了此设计模式。它是用来订阅对象发生变化时候通知订阅者来做更新的模式。常用于邮箱订阅，上线订阅等应用非常广泛。

JavaScript中的设计模式

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

原型模式

用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。它主要面对的问题是：“某些结构复杂的对象”的创建工作；由于需求的变化，这些对象经常面临着剧烈的变化，但是他们却拥有比较稳定一致的接口。

代理模式

可自定义控制原对象的访问方式，并且允许在更新前后做一些额外处理。Vue3版本就是使用Proxy来对数据获取和赋值的时候做拦截。代理模式的应用场景用于监控，代理工具，前端框架实现等。这种类型的设计模式属于结构型模式。

迭代器模式

在不暴露数据类型的情况下访问集合中的元素。迭代器模式属于行为型模式。

组合模式

组合模式又叫部分整体模式，是用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象，用来表示部分以及整体层次。这种类型的设计模式属于结构型模式，这种模式创建了一个包含自己对象组的类。该类提供了修改相同对象组的方式。应用场景DOM,前端组件，文件目录，部门。

总结

今天学习了前端的几个常用的设计模式，让我在学习Vue和其它现代框架的时候能更快速的理解框架的思想知道为什么要这样做。在日后的编码中，也能更加准确的选择和编写正确的设计模式代码提高整体项目水平。

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

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

前言