前端常见的设计模式 All In One
前端常见的设计模式 All In One
在软件工程中,设计模式(Design Pattern
)是对软件设计中普遍存在(反复出现)的各种问题,所提出的解决方案。
根据模式的目的来划分的话,GoF(Gang of Four
)设计模式可以分为以下 3 种类型:
1、创建型
模式:用来描述 “如何创建对象”,它的主要特点是 “将对象的创建和使用分离”。
包括单例
、原型
、工厂方法
、抽象工厂
和建造者
5 种模式。
2、结构型
模式:用来描述如何将类或对象按照某种布局组成更大的结构。
包括代理
、适配器
、桥接
、装饰器
、外观
、享元
和组合
7 种模式。
3、行为型
模式:用来识别对象之间的常用交流模式以及如何分配职责。
包括模板方法
、策略
、命令
、职责链
、状态
、观察者
、中介者
、迭代器
、访问者
、备忘录
和解释器
11 种模式。
创建型模式-建造者模式
建造者模式(Builder Pattern)将一个复杂对象分解成多个相对简单的部分,然后根据不同需要分别创建它们,最后构建成该复杂对象。
class Car {
constructor(
public engine: string,
public chassis: string,
public body: string
) {}
}
class CarBuilder {
engine!: string; // 引擎
chassis!: string; // 底盘
body!: string; // 车身
addChassis(chassis: string) {
this.chassis = chassis;
return this;
}
addEngine(engine: string) {
this.engine = engine;
return this;
}
addBody(body: string) {
this.body = body;
return this;
}
build() {
return new Car(this.engine, this.chassis, this.body);
}
}
创建型模式-工厂模式
工厂模式分为:简单工厂模式、工厂方法模式和抽象工厂模式
简单工厂模式又叫 静态方法模式,因为工厂类中定义了一个静态方法用于创建对象。
abstract class BMW {
abstract run(): void;
}
class BMW730 extends BMW {
run(): void {
console.log("BMW730 发动咯");
}
}
class BMW840 extends BMW {
run(): void {
console.log("BMW840 发动咯");
}
}
class BMWFactory {
public static produceBMW(model: "730" | "840"): BMW {
if (model === "730") {
return new BMW730();
} else {
return new BMW840();
}
}
}
工厂方法模式(Factory Method Pattern)又称为工厂模式,也叫多态工厂(Polymorphic Factory)模式,它属于类创建型模式。
abstract class BMWFactory {
abstract produceBMW(): BMW;
}
class BMW730Factory extends BMWFactory {
produceBMW(): BMW {
return new BMW730();
}
}
class BMW840Factory extends BMWFactory {
produceBMW(): BMW {
return new BMW840();
}
}
抽象工厂模式(Abstract Factory Pattern),提供一个创建一系列相关或相互依赖对象的接口,而无须指定它们具体的类。
abstract class BMWFactory {
abstract produce730BMW(): BMW730;
abstract produce840BMW(): BMW840;
}
class ConcreteBMWFactory extends BMWFactory {
produce730BMW(): BMW730 {
return new BMW730();
}
produce840BMW(): BMW840 {
return new BMW840();
}
}
创建型模式-单例模式
单例模式(Singleton Pattern)是一种常用的模式,有一些对象我们往往只需要一个,比如全局缓存、浏览器中的 window 对象等。单例模式用于保证一个类仅有一个实例,并提供一个访问它的全局访问点。
class Singleton {
// 定义私有的静态属性,来保存对象实例
private static singleton: Singleton;
private constructor() {}
// 提供一个静态的方法来获取对象实例
public static getInstance(): Singleton {
if (!Singleton.singleton) {
Singleton.singleton = new Singleton();
}
return Singleton.singleton;
}
}
结构型模式-适配器模式
而在软件工程中,适配器模式的作用是解决两个软件实体间的接口不兼容的问题。
使用适配器模式之后,原本由于接口不兼容而不能工作的两个软件实体就可以一起工作。
在实际生活中,也存在适配器的使用场景,比如:港式插头转换器、电源适配器和 USB 转接口。
interface Logger {
info(message: string): Promise<void>;
}
interface CloudLogger {
sendToServer(message: string, type: string): Promise<void>;
}
class AliLogger implements CloudLogger {
public async sendToServer(message: string, type: string): Promise<void> {
console.info(message);
console.info('This Message was saved with AliLogger');
}
}
class CloudLoggerAdapter implements Logger {
protected cloudLogger: CloudLogger;
constructor (cloudLogger: CloudLogger) {
this.cloudLogger = cloudLogger;
}
public async info(message: string): Promise<void> {
await this.cloudLogger.sendToServer(message, 'info');
}
}
class NotificationService {
protected logger: Logger;
constructor (logger: Logger) {
this.logger = logger;
}
public async send(message: string): Promise<void> {
await this.logger.info(`Notification sended: ${message}`);
}
}
行为模式-观察者模式
行为模式-发布订阅模式
行为模式-策略模式
行为模式-职责链模式
行为模式-模板方法模式
todo ...
refs
https://refactoringguru.cn/design-patterns/creational-patterns
https://refactoringguru.cn/design-patterns/structural-patterns
https://refactoringguru.cn/design-patterns/behavioral-patterns
https://mp.weixin.qq.com/s/WkF4laAY_PuExCjO0xkECw
(🐞 反爬虫测试!打击盗版⚠️)如果你看到这个信息, 说明这是一篇剽窃的文章,请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章!
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/13834583.html
未经授权禁止转载,违者必究!