디자인 패턴 - JavaScript 과제

이 게시물의 모든 코드는 repo Github에서 확인하실 수 있습니다.

---

디자인 패턴 관련 과제

---

이벤트 이미터

class EventEmitter {
  constructor() {
    this._events = Object.create(null);
    this._key = 0;
  }

  on(eventName, listener) {
    if (!Object.hasOwn(this._events, eventName)) {
      this._events[eventName] = {};
    }

    const listenerId = this._key;
    this._key += 1;

    this._events[eventName][listenerId] = listener;

    return {
      off: () => {
        delete this._events[eventName][listenerId];
      }
    }
  }

  emit(eventName, ...args) {
    if (
      !Object.hasOwn(this._events, eventName) ||
      !Object.keys(this._events[eventName]).length
    ) {
      return false;
    }

    const listeners = { ...this._events[eventName] };
    Object.values(listeners).map((listener) => {
      listener.call(null, ...args);
    });

    return true;
  }

  once(eventName, listener) {
    const subscription = this.on(eventName, (...args) => {
      subscription.off();
      listener(...args);
    });

    return subscription;
  }
}

// Usage example
const emitter = new EventEmitter();

function addTwoNumbers(a, b) {
  console.log(`The sum is ${a + b}`);
}

const sub = emitter.on('foo', addTwoNumbers);
emitter.emit('foo', 1, 2);
// => "The sum is 3"

emitter.on('foo', (a, b) => {
  console.log(`The product is ${a * b}`);
});
emitter.emit('foo', 4, 5);
// > "The sum is 9"
// > "The product is 20"

sub.off();
emitter.emit('foo', -3, 9);
// > "The product is -27"
// (Only the multiply callback is triggered, the first one was unsubscribed.)

emitter.once('bar', (x) => {
  console.log(`Bar was called with ${x}`);
});

emitter.emit('bar', 1); // Logs: "Bar was called with 1"
emitter.emit('bar', 2); // Does nothing, the listener was already removed

---

메소드 체이닝

class Calculator {
  constructor(value) {
    this.result = value;
  }

  add(value) {
    this.result += value;
    return this;
  }

  subtract(value) {
    this.result -= value;
    return this;
  }

  multiply(value) {
    this.result *= value;
    return this;
  }

  divide(value) {
    if (value === 0) {
      throw new Error("Division by zero is not allowed");
    }
    this.result /= value;
    return this;
  }

  power(value) {
    this.result **= value;
    return this;
  }

  getResult() {
    return this.result;
  }
}

// Usage example
const calculator = new Calculator(10);
console.log(calculator.add(5).subtract(7).getResult()); // => 8

---

하나씩 일어나는 것

const globalMap = new Map();

export default {
  getInstance() {
    return globalMap;
  },
};

---

참조

• 그레이트프론트엔드
• 이벤트 중심 프로그래밍 - Wikipedia.org
• 16. 이벤트 이미터 생성 - BFE.dev
• 2694. 이벤트 이미터 - LeetCode
• 2726. 메소드 체이닝을 사용한 계산기 - LeetCode
• 메소드 체이닝 - Wikipedia.org
• 싱글턴 패턴 - Wikipedia.org
• 싱글턴 패턴 - Patterns.dev

위 내용은 디자인 패턴 - JavaScript 과제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!