The JavaScript design pattern is a reusable solution to common software design problems, helping to write maintainable, extensible, and well-structured code. 1. The module mode is encapsulated through IIFE or ES6 modules to protect private variables and avoid global pollution; 2. The observer mode allows object subscription to the main body changes, which is suitable for event processing and state updates, and is the basis of Redux and other libraries; 3. The factory mode dynamically creates objects at runtime and centrally manages object generation logic; 4. The singleton mode ensures that there is only one instance of a class, which is often used for configuration management but needs to be used with caution to avoid testing difficulties; 5. The decorator mode dynamically adds functions without modifying the original object, and is often used in logs, caches and other scenarios; 6. Reveals the module mode provides a clearer public interface by returning references to private functions to improve readability; 7. The policy mode encapsulates the algorithm into interchangeable policies, which facilitates switching of verification and other logic at runtime. Understanding these patterns can help read complex code, quickly debug and build a good architecture, but should be flexibly selected rather than blindly followed according to actual needs.

JavaScript design patterns are reusable solutions to common problems in software design. They help developers write maintainable, scalable, and organized code—especially important in large JavaScript applications. While JavaScript is flexible and doesn't enforce patterns, using them wisely improves code structure and team collaboration.

Here's a practical guide to the most useful JavaScript design patterns, explained in simple terms with real-world relevance.

1. Module Pattern – Keep Code Organized and Private

The Module Pattern is one of the most widely used patterns in JavaScript. It helps you encapsulate code, create private variables and functions, and expose only what's necessary.

Why use it?
Avoid polluting the global scope and protect internal logic from accidental changes.

How it works:
Use an IIFE (Immediately Invoked Function Expression) or ES6 modules to create a closure.

 const ShoppingCart = (function () {
  let items = []; // private

  function calculateTotal() {
    return items.reduce((sum, item) => sum item.price, 0);
  }

  return {
    addItem(item) {
      items.push(item);
    },
    getTotal() {
      return calculateTotal();
    }
  };
})();

ShoppingCart.addItem({ name: 'Laptop', price: 999 });
console.log(ShoppingCart.getTotal()); // 999

Note: Modern ES6 modules ( import / export ) have largely replaced the classic Module Pattern, but the concept of encapsulation remains key.

2. Observer Pattern – Handle Events and State Changes

This pattern lets objects (observers) subscribe to changes in another object (the subject). It's the foundation of event handling and reactive programming.

Use cases:

• UI updates when data changes
• Event systems (eg, button clicks, form inputs)
• Implementing pub/sub systems

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

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

  unsubscribe(fn) {
    this.observers = this.observers.filter(subscriber => subscriber !== fn);
  }

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

const observer = new EventObserver();

const logData = data => console.log('Received:', data);
const uppercaseData = data => console.log('Uppercase:', data.toUpperCase());

observer.subscribe(logData);
observer.subscribe(uppercaseData);

observer.notify('hello'); 
// Output: 
// Received: hello
// Uppercase: HELLO

This pattern is behind libraries like Redux and frameworks like Vue and Angular.

3. Factory Pattern – Create Objects Without new

Use the Factory Pattern when you need to create multiple similar objects without tightly coupling your code to specific classes.

When to use:

• You don't know the exact type of object needed until runtime
• You want to centralize object creation logic

 function createPerson(type) {
  if (type === 'developer') {
    return {
      role: 'Developer',
      skills: ['JavaScript', 'React'],
      code() { console.log('Writing code...'); }
    };
  } else if (type === 'designer') {
    return {
      role: 'Designer',
      skills: ['Figma', 'Photoshop'],
      design() { console.log('Creating mockups...'); }
    };
  }
}

const dev = createPerson('developer');
dev.code(); // Writing code...

Keeps object creation logic clean and extendible.

4. Singleton Pattern – One Instance Only

Ensures a class has only one instance and provide a global point to access it.

Useful for:

• Database connections
• Configuration managers
• Logging services

 let ConfigManager = (function () {
  let instance;

  function createInstance() {
    const object = { theme: 'dark', language: 'en' };
    return object;
  }

  return {
    getInstance() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

const config1 = ConfigManager.getInstance();
const config2 = ConfigManager.getInstance();

console.log(config1 === config2); // true – same instance

Be cautious: Singletons can make testing harder and introduce global state.

5. Decorator Pattern – Add Features Without Modifying Code

Allows you to add behavior to objects dynamically without altering their structure.

Real-world use:

• Adding logging, caching, or validation to functions
• Used heavily in TypeScript decorators

 function withLogging(fn) {
  return function (...args) {
    console.log(`Calling ${fn.name} with`, args);
    const result = fn(...args);
    console.log(`Result:`, result);
    return result;
  };
}

function add(a, b) {
  return ab;
}

const addLogged = withLogging(add);
addLogged(2, 3);
// Logs: Calling add with [2, 3]
// Results: 5

This functional approach is common in modern JS and aligns well with higher-order functions.

6. Revealing Module Pattern – Cleaner Public Interface

An improvement over the classic Module Pattern. It lets you define all functions privately and selectively expose them.

 const TaskManager = (function () {
  let tasks = [];

  function add(task) {
    tasks.push(task);
  }

  function list() {
    return tasks;
  }

  // Reveal only what's needed
  return {
    add: add,
    list: list
  };
})();

Makes it clear which functions are public—improves readability and maintenance.

7. Strategy Pattern – Switch Algorithms at Runtime

Encapsulates different algorithms and make them interchangeable.

Example:
Validation logic for different form types.

 const validationStrategies = {
  email(value) {
    return value.includes('@') && value.includes('.');
  },
  password(value) {
    return value.length >= 8 && /\d/.test(value);
  },
  phone(value) {
    return /^\d{10}$/.test(value);
  }
};

function validate(input, type) {
  return validationStrategies[type](input);
}

console.log(validate('test@example.com', 'email')); // true
console.log(validate('pass1234', 'password')); // true

Promotes loose coupling and makes adding new strategies easy.

Final Thoughts

Design patterns aren't silver bullets—they're tools. Use them when they solve a real problem, not just because they're "best practice."

Some modern JavaScript (especially with React, Vue, etc.) abstracts these patterns away, but understanding them helps you:

• Read complex codebases
• Debug issues faster
• Design better architectures

You don't need to memorize all patterns. Start with Module , Observer , and Factory —they're the most practical in day-to-day JS development.

Basically, know the patterns, but stay flexible.

The above is the detailed content of A Guide to JavaScript Design Patterns. For more information, please follow other related articles on the PHP Chinese website!