Codexpal - Learn Programming Interactively

Lesson Content

JavaScript Design Patterns

Design patterns are reusable solutions to common programming problems. They help write maintainable, scalable code.

Module Pattern

const MyModule = (function() {
  let privateVar = 0;
  return {
    increment: () => ++privateVar,
    getValue: () => privateVar
  };
})();

Observer Pattern

class EventEmitter {
  constructor() {
    this.events = {};
  }
  on(event, callback) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback);
  }
  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(cb => cb(data));
    }
  }
}

Singleton Pattern

const Singleton = (function() {
  let instance;
  function createInstance() {
    return { data: 'Singleton data' };
  }
  return {
    getInstance: function() {
      if (!instance) instance = createInstance();
      return instance;
    }
  };
})();

Factory Pattern

function createUser(type) {
  if (type === 'admin') return new Admin();
  if (type === 'user') return new User();
}

Example Code

Implement common design patterns

// Observer Pattern
class EventEmitter {
  constructor() {
    this.events = {};
  }
  on(event, callback) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback);
  }
  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(cb => cb(data));
    }
  }
}

const emitter = new EventEmitter();
emitter.on('message', (data) => console.log('Received:', data));
emitter.emit('message', 'Hello!');

// Module Pattern
const Counter = (function() {
  let count = 0;
  return {
    increment: () => ++count,
    getValue: () => count
  };
})();

Counter.increment();
console.log('Count:', Counter.getValue());

Expected Output:

Received: Hello!
Count: 1

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code