设计模式的优缺点分析

设计模式是软件开发中解决常见问题的可复用方案，它们提供了一套经过验证的解决方案，帮助开发者编写更高效、可维护的代码。在JavaScript中，设计模式的应用尤为广泛，从简单的单例模式到复杂的观察者模式，每种模式都有其独特的优缺点。理解这些模式的适用场景和潜在问题，能够帮助开发者在实际项目中做出更合理的选择。

单例模式

单例模式确保一个类只有一个实例，并提供一个全局访问点。这种模式在需要共享资源或控制全局状态时非常有用。

优点：

• 节省内存和资源，避免重复创建实例。
• 提供全局访问点，方便管理共享资源。
• 适合管理配置对象、缓存或日志系统。

缺点：

• 可能导致代码耦合度高，难以测试。
• 违反单一职责原则，实例可能承担过多责任。
• 在多线程环境中需要额外处理同步问题（虽然JavaScript是单线程的，但在异步场景中仍需注意）。

示例代码：

class Singleton {
  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this;
    }
    return Singleton.instance;
  }
}

const instance1 = new Singleton();
const instance2 = new Singleton();
console.log(instance1 === instance2); // true

工厂模式

工厂模式通过一个工厂类来创建对象，而不是直接使用new操作符。它封装了对象的创建逻辑，使代码更灵活。

优点：

• 将对象的创建与使用分离，降低耦合度。
• 便于扩展，新增产品类型时只需修改工厂类。
• 适合创建复杂对象或需要统一管理的对象。

缺点：

• 增加了代码复杂度，可能需要额外的工厂类。
• 如果产品类型过多，工厂类可能变得臃肿。

示例代码：

class Car {
  constructor(model, year) {
    this.model = model;
    this.year = year;
  }
}

class CarFactory {
  createCar(model) {
    switch (model) {
      case 'Sedan':
        return new Car('Sedan', 2023);
      case 'SUV':
        return new Car('SUV', 2023);
      default:
        throw new Error('Unknown car model');
    }
  }
}

const factory = new CarFactory();
const sedan = factory.createCar('Sedan');

观察者模式

观察者模式定义了一种一对多的依赖关系，当一个对象的状态发生变化时，所有依赖它的对象都会得到通知并自动更新。

优点：

• 解耦发布者和订阅者，提高代码灵活性。
• 支持动态添加或移除订阅者。
• 适合实现事件驱动系统或实时数据更新。

缺点：

• 如果订阅者过多或通知逻辑复杂，可能影响性能。
• 订阅者可能收到不必要的通知，需要额外处理。

示例代码：

class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  update(data) {
    console.log(`Received data: ${data}`);
  }
}

const subject = new Subject();
const observer1 = new Observer();
subject.subscribe(observer1);
subject.notify('Hello World');

装饰器模式

装饰器模式允许在不修改原有对象的基础上，动态地添加功能。它通过将对象包装在装饰器类中来实现功能的扩展。

优点：

• 避免使用继承导致的类爆炸问题。
• 可以动态添加或移除功能，灵活性高。
• 符合开闭原则，无需修改原有代码。

缺点：

• 可能引入大量小类，增加系统复杂度。
• 多层装饰可能导致代码难以理解。

示例代码：

class Coffee {
  cost() {
    return 5;
  }
}

class MilkDecorator {
  constructor(coffee) {
    this.coffee = coffee;
  }

  cost() {
    return this.coffee.cost() + 2;
  }
}

const coffee = new Coffee();
const coffeeWithMilk = new MilkDecorator(coffee);
console.log(coffeeWithMilk.cost()); // 7

策略模式

策略模式定义了一系列算法，并将每个算法封装起来，使它们可以互相替换。策略模式让算法的变化独立于使用它的客户端。

优点：

• 避免使用多重条件判断语句。
• 算法可以自由切换，扩展性好。
• 便于单元测试，每个策略可以单独测试。

缺点：

• 客户端必须了解所有策略的区别。
• 可能增加策略类的数量。

示例代码：

class Shipping {
  constructor(strategy) {
    this.strategy = strategy;
  }

  calculate(weight) {
    return this.strategy.calculate(weight);
  }
}

class UPS {
  calculate(weight) {
    return weight * 1.5;
  }
}

class Fedex {
  calculate(weight) {
    return weight * 2;
  }
}

const shipping = new Shipping(new UPS());
console.log(shipping.calculate(10)); // 15

代理模式

代理模式为其他对象提供一种代理以控制对这个对象的访问。代理可以在访问对象时添加额外的逻辑。

优点：

• 控制对真实对象的访问，增加安全性。
• 可以在访问对象时添加额外功能，如缓存、日志等。
• 符合开闭原则，无需修改真实对象。

缺点：

• 可能增加系统复杂度。
• 代理层可能导致请求处理变慢。

示例代码：

class RealImage {
  constructor(filename) {
    this.filename = filename;
    this.loadFromDisk();
  }

  display() {
    console.log(`Displaying ${this.filename}`);
  }

  loadFromDisk() {
    console.log(`Loading ${this.filename}`);
  }
}

class ProxyImage {
  constructor(filename) {
    this.filename = filename;
    this.realImage = null;
  }

  display() {
    if (!this.realImage) {
      this.realImage = new RealImage(this.filename);
    }
    this.realImage.display();
  }
}

const image = new ProxyImage('test.jpg');
image.display();

模块模式

模块模式利用闭包的特性，将相关的属性和方法封装在一个模块中，避免全局命名空间污染。

优点：

• 减少全局变量，避免命名冲突。
• 封装私有变量和方法，提高安全性。
• 代码组织更清晰，便于维护。

缺点：

• 私有变量难以扩展或测试。
• 过度使用可能导致闭包内存泄漏。

示例代码：

const counterModule = (function() {
  let count = 0;

  return {
    increment() {
      count++;
    },
    getCount() {
      return count;
    }
  };
})();

counterModule.increment();
console.log(counterModule.getCount()); // 1

适配器模式

适配器模式将一个类的接口转换成客户端期望的另一个接口，使原本不兼容的类可以一起工作。

优点：

• 解决接口不兼容问题。
• 可以复用现有类，无需修改原有代码。
• 灵活性高，适配器可以随时替换。

缺点：

• 过多使用可能导致系统复杂度增加。
• 可能降低系统性能，增加额外调用层次。

示例代码：

class OldCalculator {
  operations(a, b, operation) {
    switch (operation) {
      case 'add':
        return a + b;
      case 'sub':
        return a - b;
      default:
        return NaN;
    }
  }
}

class NewCalculator {
  add(a, b) {
    return a + b;
  }

  sub(a, b) {
    return a - b;
  }
}

class CalculatorAdapter {
  constructor() {
    this.calculator = new NewCalculator();
  }

  operations(a, b, operation) {
    switch (operation) {
      case 'add':
        return this.calculator.add(a, b);
      case 'sub':
        return this.calculator.sub(a, b);
      default:
        return NaN;
    }
  }
}

const adapter = new CalculatorAdapter();
console.log(adapter.operations(5, 3, 'add')); // 8

组合模式

组合模式将对象组合成树形结构以表示"部分-整体"的层次结构，使得用户对单个对象和组合对象的使用具有一致性。

优点：

• 简化客户端代码，统一处理单个对象和组合对象。
• 容易添加新类型的组件。
• 灵活性强，可以构建复杂的树形结构。

缺点：

• 设计较复杂，需要正确识别组件和组合的关系。
• 可能限制组件类型，要求所有组件实现相同接口。

示例代码：

class Component {
  constructor(name) {
    this.name = name;
  }

  display() {
    throw new Error('This method must be implemented');
  }
}

class Leaf extends Component {
  display() {
    console.log(`Leaf: ${this.name}`);
  }
}

class Composite extends Component {
  constructor(name) {
    super(name);
    this.children = [];
  }

  add(component) {
    this.children.push(component);
  }

  display() {
    console.log(`Composite: ${this.name}`);
    this.children.forEach(child => child.display());
  }
}

const root = new Composite('Root');
const branch1 = new Composite('Branch 1');
branch1.add(new Leaf('Leaf 1'));
branch1.add(new Leaf('Leaf 2'));
root.add(branch1);
root.display();

状态模式

状态模式允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。

优点：

• 将状态相关的行为局部化，减少条件判断。
• 状态转换逻辑更加清晰。
• 容易添加新状态。

缺点：

• 可能增加类的数量。
• 状态转换逻辑分散在各状态类中。

示例代码：

class TrafficLight {
  constructor() {
    this.states = [new RedLight(), new YellowLight(), new GreenLight()];
    this.current = this.states[0];
  }

  change() {
    const totalStates = this.states.length;
    let currentIndex = this.states.indexOf(this.current);
    this.current = this.states[(currentIndex + 1) % totalStates];
  }

  sign() {
    return this.current.sign();
  }
}

class Light {
  constructor(light) {
    this.light = light;
  }
}

class RedLight extends Light {
  constructor() {
    super('red');
  }

  sign() {
    return 'STOP';
  }
}

class YellowLight extends Light {
  constructor() {
    super('yellow');
  }

  sign() {
    return 'CAUTION';
  }
}

class GreenLight extends Light {
  constructor() {
    super('green');
  }

  sign() {
    return 'GO';
  }
}

const trafficLight = new TrafficLight();
console.log(trafficLight.sign()); // STOP
trafficLight.change();
console.log(trafficLight.sign()); // CAUTION