Maison > interface Web > js tutoriel > Modèle de conception – Défis JavaScript

Modèle de conception – Défis JavaScript

DDD
Libérer: 2024-11-03 03:51:31
original
611 Les gens l'ont consulté

Design Pattern - JavaScript Challenges

Vous pouvez trouver tout le code dans cet article sur le repo Github.


Défis liés au modèle de conception


Émetteur d'événements

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
Copier après la connexion

Chaînage de méthodes

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

Copier après la connexion

Singleton

const globalMap = new Map();

export default {
  getInstance() {
    return globalMap;
  },
};
Copier après la connexion

Référence

  • GreatFrontEnd
  • Programmation événementielle - Wikipedia.org
  • 16. créer un émetteur d'événement - BFE.dev
  • 2694. Émetteur d'événements - LeetCode
  • 2726. Calculatrice avec chaînage de méthodes - LeetCode
  • Chaînage de méthodes - Wikipedia.org
  • Modèle Singleton - Wikipedia.org
  • Modèle Singleton - patterns.dev

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal