How to choose the appropriate design pattern

Design patterns are templates for solving specific problems, and choosing the appropriate design pattern can enhance code maintainability and extensibility. In JavaScript, the application of design patterns requires combining language features with real-world scenarios to avoid over-engineering or pattern misuse.

Understanding Applicable Scenarios for Common Design Patterns

Common design patterns in JavaScript fall into three categories: creational, structural, and behavioral. Creational patterns like the Factory Pattern and Singleton Pattern are suitable for object creation scenarios; structural patterns like the Decorator Pattern and Adapter Pattern handle object composition; behavioral patterns like the Observer Pattern and Strategy Pattern focus on communication between objects.

The Factory Pattern is suitable for scenarios where similar objects need to be created based on different conditions. For example, a UI component library might need to generate components like buttons or input fields based on different configurations:

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('Unknown component type');
  }
}

Analyzing Project Requirements and Complexity

Before selecting a design pattern, evaluate the project's scale, team familiarity, and maintenance cycle. Small projects may not require complex design patterns, while large, long-term projects may benefit from more structured pattern applications.

The Observer Pattern is suitable for loosely coupled communication between components. For example, implementing an event bus:

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));
    }
  }
}

// Usage example
const bus = new EventBus();
bus.subscribe('dataLoaded', (data) => {
  console.log('Data received:', data);
});
bus.publish('dataLoaded', { id: 1, name: 'Example' });

Considering JavaScript Language Features

JavaScript's prototype inheritance, closures, and other features influence design pattern choices. For example, the Module Pattern uses closures to implement private variables:

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

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

Evaluating Pattern Testability and Maintainability

The Strategy Pattern encapsulates algorithms into independent strategies, making them easier to test and maintain. For example, implementing different validation strategies:

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

Avoiding Common Selection Pitfalls

Do not use patterns for the sake of using patterns. For simple scenarios, direct implementation may be more appropriate. For example, if only a global configuration object is needed, using an object literal is more concise than the Singleton Pattern:

// Simple configuration object
const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
};

// More concise than the Singleton implementation below
class Config {
  constructor() {
    if (!Config.instance) {
      this.apiUrl = 'https://api.example.com';
      this.timeout = 5000;
      Config.instance = this;
    }
    return Config.instance;
  }
}

Combining Modern JavaScript Features

ES6+ features like classes, modules, and Proxy can simplify the implementation of certain patterns. For example, using Proxy for data binding:

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} changed to ${value}`);
});
data.name = 'New Value'; // Console output: name changed to New Value

Selecting Patterns for Refactoring Existing Code

When refactoring complex code, identifying code smells can help select the appropriate pattern. For example, multiple conditional statements may be suitable for refactoring with the State Pattern:

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

// After refactoring - State Pattern
class OrderState {
  constructor(order) {
    this.order = order;
  }
  
  next() {
    throw new Error('Must implement next method');
  }
}

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();
  }
}