設計模式 - 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中文網其他相關文章！