如何选择合适的设计模式

设计模式是解决特定问题的模板，选择合适的设计模式可以提升代码的可维护性和可扩展性。在JavaScript中，设计模式的应用需要结合语言特性和实际场景，避免过度设计或模式滥用。

理解常见设计模式的适用场景

JavaScript中常用的设计模式包括创建型、结构型和行为型三类。创建型模式如工厂模式、单例模式适合对象创建场景；结构型模式如装饰器模式、适配器模式用于处理对象组合；行为型模式如观察者模式、策略模式则关注对象间的通信。

工厂模式适用于需要根据不同条件创建相似对象的场景。例如，一个UI组件库可能需要根据不同的配置生成按钮、输入框等组件：

class Button {
  constructor(type) {
    this.type = type;
  }
}

class Input {
  constructor(type) {
    this.type = type;
  }
}

function createComponent(type, componentType) {
  switch(componentType) {
    case 'button':
      return new Button(type);
    case 'input':
      return new Input(type);
    default:
      throw new Error('未知组件类型');
  }
}

分析项目需求与复杂度

选择设计模式前需要评估项目规模、团队熟悉度和维护周期。小型项目可能不需要复杂的设计模式，而大型长期维护的项目则可能受益于更结构化的模式应用。

观察者模式适合组件间松耦合的通信需求。比如实现一个事件总线：

class EventBus {
  constructor() {
    this.events = {};
  }
  
  subscribe(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }
  
  publish(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  }
}

// 使用示例
const bus = new EventBus();
bus.subscribe('dataLoaded', (data) => {
  console.log('收到数据:', data);
});
bus.publish('dataLoaded', { id: 1, name: '示例' });

考虑JavaScript的语言特性

JavaScript的原型继承、闭包等特性会影响设计模式的选择。例如，模块模式利用闭包实现私有变量：

const counterModule = (() => {
  let count = 0;
  
  return {
    increment() {
      count++;
    },
    getCount() {
      return count;
    }
  };
})();

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

评估模式的可测试性和可维护性

策略模式将算法封装成独立策略，便于测试和维护。比如实现不同的验证策略：

const validationStrategies = {
  isNonEmpty(value) {
    return value.trim() !== '';
  },
  isNumber(value) {
    return !isNaN(parseFloat(value));
  }
};

function validate(value, strategies) {
  return strategies.every(strategy => validationStrategies[strategy](value));
}

console.log(validate('123', ['isNonEmpty', 'isNumber'])); // true

避免常见的选择误区

不要为了使用模式而使用模式。简单的场景直接实现可能更合适。例如，如果只需要一个全局配置对象，直接使用对象字面量比单例模式更简洁：

// 简单的配置对象
const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
};

// 比下面这种单例实现更简洁
class Config {
  constructor() {
    if (!Config.instance) {
      this.apiUrl = 'https://api.example.com';
      this.timeout = 5000;
      Config.instance = this;
    }
    return Config.instance;
  }
}

结合现代JavaScript特性

ES6+引入的类、模块、Proxy等特性可以简化某些模式的实现。例如，使用Proxy实现数据绑定：

function createReactiveObject(target, callback) {
  return new Proxy(target, {
    set(obj, prop, value) {
      obj[prop] = value;
      callback(prop, value);
      return true;
    }
  });
}

const data = createReactiveObject({}, (prop, value) => {
  console.log(`${prop}变为${value}`);
});
data.name = '新值'; // 控制台输出: name变为新值

重构现有代码时的模式选择

当重构复杂代码时，识别代码坏味道可以帮助选择合适模式。例如，多个条件语句可能适合用状态模式重构：

// 重构前
class Order {
  constructor() {
    this.state = 'pending';
  }
  
  next() {
    if (this.state === 'pending') {
      this.state = 'shipped';
    } else if (this.state === 'shipped') {
      this.state = 'delivered';
    }
  }
}

// 重构后 - 状态模式
class OrderState {
  constructor(order) {
    this.order = order;
  }
  
  next() {
    throw new Error('必须实现next方法');
  }
}

class PendingState extends OrderState {
  next() {
    this.order.setState(new ShippedState(this.order));
  }
}

class ShippedState extends OrderState {
  next() {
    this.order.setState(new DeliveredState(this.order));
  }
}

class Order {
  constructor() {
    this.setState(new PendingState(this));
  }
  
  setState(state) {
    this.state = state;
  }
  
  next() {
    this.state.next();
  }
}