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

什么是设计模式

软件设计中常见问题的解决方法模型：

历史经验的总结
与特定语言无关

设计模式分类

3大类设计模式，23钟设计模式

创建型-如何创建一个对象

单例模式（Singleton Pattern）：保证一个类仅有一个对象，并提供一个访问它的全局访问点。
工厂模式（Factory Pattern）：定义一个用于创建对象的接口，让子类决定将哪一个类实例化，FactoryMethod使一个类的实例化延迟到其子类。
抽象工厂模式（Abstract Factory Pattern）：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们的具体类。
建造者模式（Builder Pattern）：将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。
原型模式（Prototype Pattern）:用原型实例指定创建对象的种类，并且通过拷贝这个原型来创建新的对象。

结构性-如何灵活的将对象组装成较大的结构

适配器模式（Adapter Pattern）：将一个类的接口转换成客户希望的另一个接口。Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。
桥接模式（Bridge Pattern）：将抽象部分与它的实现部分分离，使他们都可以独立地变化。
装饰模式（Decorator Pattern）：动态地给一个对象添加一些额外的职责。就扩展功能而言，Decorator模式比生成子类的方式更为灵活。
组合模式（Composite Pattern）：将对象组合成树形结构以表示“部分-整体”的层次结构。Composite 使得客户对单个对象和复合对象的使用具有一致性。
外观模式（Facade Pattern）：为子系统中的一组接口提供一个一致的接口。Façade模式定义了一个高层接口，这个接口使得这一子系统更加容易使用。
享元模式（Flyweight Pattern）：运用共享技术有效地支持大量细粒度的对象。
代理模式（Proxy Pattern）:为其他对象提供一个代理以控制对这个对象的访问。

行为型-负责对象间的高校通信和职责划分

模版方法模式（Template Pattern）:定义一个操作中的算法的骨架，而将一些步骤延迟到子类。TemplateMethod 使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。
命令模式（Command Pattern）：将一个请求封装为一个对象，从而使你可用不同的请求对客户进行参数化，对请求排队或记录请求日志，以及支持可取消的操作。
迭代器模式（Iterator Pattern）：提供一种方法顺序访问一个聚合对象中各个元素，而又不需暴露该对象的内部表示。
观察者模式（Observer Pattern）：定义对象间的一种一对多的依赖关系，以便当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并自动刷新。
中介者模式（Mediator Pattern）：用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显示地相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。
备忘录模式（Memento Pattern）：在不破坏封装性的前提下，捕获一个对象的内部状态，并在该对象之外保持该状态，这样以后就可以将该对象恢复到保存的状态。
解释器模式（Interpreter Pattern）：定义一个语言，定义它的文法的一种表示，并定义一个解释器，该解释器使用该表示来解释语言中的句子。
状态模式（State Pattern）:允许一个对象在其内部状态改变时改变它的行为。对象看起来似乎修改了它所属的类。
策略模式（Strategy Pattern）:定义一系列的算法，把它们一个个封装起来，并且使他们可相互替换。本模式使得算法的变化可以独立于使用它的客户。
责任链模式（Chain of Responsibility Pattern）：为解除请求的发送者和接收者之间的耦合，而使多个对象都有机会处理这个请求。将这些对象连成一条链，并沿着这条链传递该请求，直到有对象处理它。
访问者模式（Visitor Pattern）:表示一个作用于某对象结构中的各元素的操作。它使你可以在不改变各元素类别的前提下定义作用于这些元素的新操作。

浏览器中的设计模式

单例模式

定义：全网唯一访问对象

应用场景：缓存，全局状态管理等

实现请求缓存

//定义api，500ms后返回
import { api } from”./utils" ;

export cLass Requset {//定义请求实例
	static instance: Requset;//定义缓存
	private cache: Recordestring, string>;

	constructor() {//初始化缓存内容
		this.cache = {};
	}
	
	static getInstance() {
		if ( this. instance) {
			return this. instance;
		}
		
		this. instance = new Requset();
		return this. instance;
	}
	
	pubLic async request(url: string) { 
		if (this . cache[url]){ 
			return this . cache[url];
		}
		const response = await api(url); 
		this . cache[url] = response;
		
		return response;
	}
}

test("should response more than 500ms with class", async () = {
	const request = Requset. getInstance();

	const startTime = Date . now();
	await request . request(" /user/1");
	const endTime = Date. now();

	const costTime = endTime - startTime;
	expect ( costTime) . toBeGreaterThanOrEquaL(500);
});


test("should response quickly second time with class", async () = {
	const request1 = Requset . getInstance();
	await request1 . request(" /user/1");

	const startTime = Date now();
	const request2 = Requset . getInstance();
	await request2 . request(" /user/1");
	const endTime = Date . now();

	const costTime = endTime - startTime;
	expect ( costTime) . toBeLessThan(50);
});

	import { api } from "./utils";

	const cache: Record<string, string> = {};
	
	export const request = async (url: string) →{
		if (cache[url]) {
			return cache[url];
		}
	
	const response = await api(url);
	
	cache[url] = response;
	return response;
};

	test(" should response quickly second time", async 0) = { 
		await request(" /user/1");
		const startTime = Date. now() ;
		await request(" /user/1");
		const endTime = Date. now() ;
		
		const costTime = endTime - startTime;

		expect (costTime) . toBeLessThan(50) ;
});

发布订阅模式

定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者

应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅、上线订阅等等，应用广泛

实现用户上线订阅

type Notify = (user: User) => void;

export class User {
  name: string;
  status: "offline" | "online";
  // user 订阅自己的人，notify 上线时的通知函数
  followers: { user: User; notify: Notify }[];

  constructor(name: string) {
    this.name = name;
    this.status = "offline";
    this.followers = [];
  }

  // 订阅参数中的 user
  subscribe(user: User, notify: Notify) {
    user.followers.push({ user, notify });
  }

  // 上线
  online() {
    // 状态改为 online
    this.status = "online";
    // 通知所有订阅自己的人
    this.followers.forEach(({ notify }) => {
      notify(this);
    });
  }
}

test("should notify followers when user is online for multiple users", () => {
  // 创建三个用户
  const user1 = new User("user1");
  const user2 = new User("user2");
  const user3 = new User("user3");

  // 通知 user1 和 user2 的函数
  const mockNotifyUser1 = jest.fn();
  const mockNotifyUser2 = jest.fn();

  // user1 订阅了 user3 的上线，传入通知 user1 的函数
  user1.subscribe(user3, mockNotifyUser1);
  user2.subscribe(user3, mockNotifyUser2);

  // user3 上线
  user3.online();

  // user3 会调用通知 user1 的函数
  expect(mockNotifyUser1).toBeCalledWith(user3);
  expect(mockNotifyUser2).toBeCalledWith(user3);
});

JavaScript中的设计模式

原型模式

定义：复制已有对象来创建新的对象

应用场景：JS中对象创建的基本模式

创建上线订阅中的用户

const baseUser: User = {
  name: "",
  status: "offline",
  followers: [],

  subscribe(user, notify) {
    user.followers.push({ user, notify });
  },

  online() {
    this.status = "online";
    this.followers.forEach(({ notify }) => {
      notify(this);
    });
  },
};

export const createUser = (name: string) => {
  // Object.create(obj) 会根据已有的对象返回一个新的对象
  // baseUser 是原型，与新创建的对象是继承关系
  const user: User = Object.create(baseUser);

  user.name = name;
  user.followers = [];

  return user;
};

test("should notify followers when user is online for multiple users", () => {
  const user1 = createUser("user1");
  const user2 = createUser("user2");
  const user3 = createUser("user3");

  const mockNotifyUser1 = jest.fn();
  const mockNotifyUser2 = jest.fn();

  user1.subscribe(user3, mockNotifyUser1);
  user2.subscribe(user3, mockNotifyUser2);

  user3.online();

  expect(mockNotifyUser1).toBeCalledWith(user3);
  expect(mockNotifyUser2).toBeCalledWith(user3);
});

代理模式

定义：可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理

应用场景：监控、代理工具、前端框架实现等等

实现用户状态订阅

type Notify = (user: User) => void;

export class User {
  name: string;
  status: "offline" | "online";
  followers: { user: User; notify: Notify }[];

  constructor(name: string) {
    this.name = name;
    this.status = "offline"; this.followers = [];
  }

  subscribe(user: User, notify: Notify) {
    user.followers.push({ user, notify });
  }

  // 添加新功能时，代码不好维护
  // online() {
  //   this.status = "online";
  //   this.followers.forEach(({ notify }) => {
  //     notify(this);
  //   });
  // }

  // online 只做上线一件事情，单一职责原则
  online() {
    this.status = 'online'
  }
}

// 实现通知
export const createProxyUser = (name: string) => {
  const user = new User(name);

  // 使用 new Proxy() 实现代理
  const proxyUser = new Proxy(user, {
    set: (target, prop: keyof User, value) => {
      target[prop] = value;
      if (prop === "status") {
        notifyStatusHandlers(target, value);
      }
      return true;
    },
  });

  const notifyStatusHandlers = (user: User, status: "online" | "offline") => {
    if (status === "online") {
      user.followers.forEach(({ notify }) => {
        notify(user);
      });
    }
  };

  return proxyUser;
};

迭代器模式

定义：在不暴露数据类型的情况下访问集合的数据

应用场景：数据结构中有多种数据类型，列表，树等，提供通用的操作接口

用 for of 迭代所有组件

// 浏览器中的 DOM 结构
class MyDomElement {
  tag: string;
  children: MyDomElement[];

  constructor(tag: string) {
    this.tag = tag;
    this.children = [];
  }

  addChildren(component: MyDomElement) {
    this.children.push(component);
  }

  // 使组件可迭代
  [Symbol.iterator]() {
    const list = [...this.children];
    let node;

    return {
      // for...of 迭代时调用的函数
      next: () => {
        while ((node = list.shift())) {
          // 层序遍历
          node.children.length > 0 && list.push(...node.children);
          // value 是迭代出的值，done 是指迭代是否完成
          return { value: node, done: false };
        }
        return { value: null, done: true };
      },
    };
  }
}

test("can iterate root element", () => {
  const body = new MyDomElement("body");
  const header = new MyDomElement("header");
  const main = new MyDomElement("main");
  const banner = new MyDomElement("banner");
  const content = new MyDomElement("content");
  const footer = new MyDomElement("footer");

  body.addChildren(header);
  body.addChildren(main);
  body.addChildren(footer);

  main.addChildren(banner);
  main.addChildren(content);

  const expectTags: string[] = [];
  for (const element of body) {
    if (element) {
      expectTags.push(element.tag);
    }
  }

  expect(expectTags.length).toBe(5);
});

前端框架中的设计模式

代理模式

Vue 组件实现计数器

<template>
  <button @click="count++">count is: {{ count }}</button>
</template>

<script setup lang="ts">
import { ref } from "vue ";
const count = ref(0);
</script>

前端框架中对DOM操作的代理

组合模式

定义：可多个对象组合使用成为一个单独的对象，也可以单个对象独立使用

应用场景： DOM，前端组件，文件目录

React 的组件结构

export const Count = () => {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount((count) => count + 1)} >
      count is: {count}
    </button >
  );
};

function App() {
  return (
    <div className="App">
      <Header />
      <Count />
      <Footer />
    </div>
  );
}

总结

今天第一次接触到前端的设计模式，感觉知识有点难以消化理解。总结出抽象的设计模式比较简单，但是套用到场景中却非常困难。

本文参考：blog.csdn.net/weixin_5750…

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

什么是设计模式

设计模式分类

浏览器中的设计模式

单例模式

发布订阅模式

JavaScript中的设计模式

原型模式

代理模式

迭代器模式

前端框架中的设计模式

代理模式

组合模式

总结