uniapp微信小程序-前端设计模式学习（下）

1、适配器模式

用于将一个类的接口转换成客户期望的另一个接口。

// 旧系统类
class OldSystem {
    // 旧系统的方法
    request() {
        // old system logic
        console.log("Old System Request");
    }
}

// 适配器类
class Adapter {
    constructor(oldSystem) {
        // 在适配器内部保存旧系统的实例
        this.oldSystem = oldSystem;
    }

    // 新的方法，实际上调用了旧系统的方法
    newRequest() {
        this.oldSystem.request();
    }
}

// 创建旧系统的实例
const oldSystemInstance = new OldSystem();

// 创建适配器实例，传递旧系统的实例
const adaptedSystem = new Adapter(oldSystemInstance);

// 使用适配器调用新的方法，内部委托给旧系统的方法
adaptedSystem.newRequest();

1. 创建了一个 OldSystem 类，代表旧系统，其中有一个 request 方法用于执行旧系统的逻辑。

2. 创建了一个 Adapter 类，作为适配器。该类的构造函数接收一个 oldSystem 参数，表示旧系统的实例。

3. 在适配器类中定义了一个新的方法 newRequest，该方法内部调用了旧系统的 request 方法。

4. 创建了旧系统的实例 oldSystemInstance。

5. 创建了适配器的实例 adaptedSystem，并将旧系统的实例传递给适配器。

6. 使用适配器调用了新的方法 newRequest，实际上内部通过适配器委托给了旧系统的 request 方法。

7. 这样，适配器模式就将旧系统的接口适配成新的接口，使得新系统可以通过适配器使用旧系统的功能。

 2、装饰器模式

它允许向对象添加新功能而不改变其结构。该模式通过创建一个包装类，也称为装饰器，来包裹原始类的实例。这个包装类具有与原始类相同的接口，同时还可以在原始类的行为之前或之后添加额外的功能。

// Component（组件）
class Coffee {
    cost() {
        return 5; // 原始咖啡的价格
    }
}

// Decorator（装饰器）
class MilkDecorator {
    constructor(coffee) {
        this.coffee = coffee;
    }

    // 在调用组件方法之前或之后添加额外的功能
    cost() {
        return this.coffee.cost() + 2; // 加了牛奶的咖啡价格
    }
}

// 使用装饰器
const originalCoffee = new Coffee(); // 原始咖啡
const coffeeWithMilk = new MilkDecorator(originalCoffee); // 加了牛奶的咖啡

console.log(originalCoffee.cost()); // 输出: 5
console.log(coffeeWithMilk.cost()); // 输出: 7

• Coffee 类是组件，表示原始的咖啡，有一个 cost 方法返回咖啡的价格。

• MilkDecorator 类是装饰器，构造函数接收一个 coffee 参数，表示被装饰的咖啡。它也实现了 cost 方法，调用原始咖啡的 cost 方法，并在其基础上加上牛奶的价格。

• 在使用时，先创建原始咖啡对象 originalCoffee，然后用 MilkDecorator 包装它，形成一个新的对象 coffeeWithMilk。最后，可以分别输出原始咖啡和加了牛奶的咖啡的价格。

这样，通过装饰器模式，可以在不修改原始咖啡类的情况下，动态地添加额外的功能，实现了开闭原则。