前端宝典十六：深入浅出8大设计模式

本文主要探讨前端开发中的各种设计模式，主要分类有：

• 单例模式
• 建造者模式
• 代理模式
• 装饰器模式
• 适配器模式
• 策略模式
• 观察者模式
• 发布订阅模式

通过对他们实际开发中的使用场景的解析，深入浅出的一起更全面直观的进行学习：

一、单例模式

介绍：

单例模式确保一个类只有一个实例，并提供一个全局访问点。

实际使用场景：

实现全局唯一的状态管理，如全局配置对象、日志记录器等。

优点：

• 减少系统资源开销，因为只创建一个实例。
• 提供全局访问点，方便在不同部分的代码中使用。

缺点：

• 违反单一职责原则，因为单例类可能承担过多的职责。
• 可能会导致代码的紧耦合，因为其他部分的代码都依赖于这个单例。

代码实现1：

class Singleton {
   
    private static instance: Singleton;

    private constructor() {
   }

    public static getInstance(): Singleton {
   
        if (!Singleton.instance) {
   
            Singleton.instance = new Singleton();
        }
        return Singleton.instance;
    }

    public someMethod(): void {
   
        console.log('Singleton method called.');
    }
}

const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();
console.log(singleton1 === singleton2); // true

通过静态方法 getInstance 来获取唯一的实例。如果实例不存在则创建一个新的实例并保存起来，下次调用时直接返回已有的实例。

代码实例2

element-ui对于全局loading的处理，使用的就是单例模式进行控制，每次只能触发一个全局loading

let fullscreenLoading;
const loading = (options = {
    }) =>{
   	
	// options不传的话默认是fullscreen
	options = merge({
   }, defaults, options);
	if(options.fullscreen && fullscreenLoading){
   
        return fullscreenLoading; // 存在直接return
	}
    let parent = options.body? document.body: options.target;
    let instance = new LoadingConstrutor({
   
        el: document.createElement('div')
    });
    if (options.fullscreen) {
   
        fullscreenLoading = instance
    }
    return instance
}

这样通过Element的loading的时候，如果同时调用两次，只有一个loading的遮罩层，不会有两个

二、建造者模式

介绍：

将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。目的是为了生成对象，把复杂的创建过程从构造函数分离出来，然后在不改变原有构造函数的基础上，创建各种各样的对象。

实际使用场景：

构建复杂的表单对象、配置对象等。

优点：

• 使得对象的创建过程更加清晰，易于理解和维护。
• 可以方便地创建不同表示的对象，提高了代码的灵活性。

缺点：

• 增加了代码的复杂性，需要创建多个类来实现建造者模式。
• 对于简单的对象创建，可能会显得过于繁琐。

代码实现：

class Product {
   
    parts: string[] = [];

    addPart(part: string): void {
   
        this.parts.push(part);
    }
}

class Builder {
   
    buildPartA(</