JavaScript設(shè)計(jì)模式是解決常見(jiàn)軟件設(shè)計(jì)問(wèn)題的可重用方案，有助於編寫(xiě)可維護(hù)、可擴(kuò)展和結(jié)構(gòu)清晰的代碼。 1. 模塊模式通過(guò)IIFE或ES6模塊實(shí)現(xiàn)封裝，保護(hù)私有變量並避免全局污染；2. 觀察者模式允許對(duì)象訂閱主體變化，適用於事件處理和狀態(tài)更新，是Redux等庫(kù)的基礎(chǔ)；3. 工廠模式在運(yùn)行時(shí)動(dòng)態(tài)創(chuàng)建對(duì)象，集中管理對(duì)像生成邏輯；4. 單例模式確保一個(gè)類(lèi)僅有一個(gè)實(shí)例，常用於配置管理但需謹(jǐn)慎使用以避免測(cè)試?yán)щy；5. 裝飾器模式在不修改原對(duì)象的前提下動(dòng)態(tài)添加功能，常用於日誌、緩存等場(chǎng)景；6. 揭示模塊模式通過(guò)返回私有函數(shù)的引用提供更清晰的公共接口，提升可讀性；7. 策略模式將算法封裝為可互換的策略，便於在運(yùn)行時(shí)切換驗(yàn)證等邏輯。理解這些模式有助於閱讀複雜代碼、快速調(diào)試和構(gòu)建良好架構(gòu)，但應(yīng)根據(jù)實(shí)際需求靈活選用而非盲目遵循。

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 extensible.

4. Singleton Pattern – One Instance Only

Ensures a class has only one instance and provides 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]
// Result: 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 maintainability.

7. Strategy Pattern – Switch Algorithms at Runtime

Encapsulates different algorithms and makes 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.

以上是JavaScript設(shè)計(jì)模式指南的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！