Implementando Observables a partir de Eventos en JS

// Estilo clásico de prototipos (ES5)
// Esta versión usa funciones constructoras y prototipos, el estilo anterior a las clases de ES6.

function Observable(forEach) {
  // Definimos la función constructora 'Observable' que toma un argumento 'forEach' y crea un nuevo objeto Observable.
  this._forEach = forEach;
  // Asignamos la función forEach recibida como argumento a la propiedad '_forEach' del objeto Observable.
}

Observable.prototype = {
  // Definimos las propiedades del objeto 'prototype' de la función constructora 'Observable'.
  forEach: function (onNext, onError, onCompleted) {
    // Declaramos un método 'forEach' en el prototipo de 'Observable' que toma tres argumentos: onNext, onError y onCompleted.
    if (typeof onNext === "function") {
      // Si el primer argumento 'onNext' es una función, entonces...
      return this._forEach({
        // ...ejecutamos la función almacenada en '_forEach' con un objeto que contiene las propiedades y sus valores.
        onNext: onNext,
        // 'onNext' se asigna al valor pasado como primer argumento.
        onError: onError || function () {},
        // Si se proporciona 'onError', se asigna a la propiedad 'onError'. De lo contrario, se asigna una función vacía.
        onCompleted: onCompleted || function () {},
        // Si se proporciona 'onCompleted', se asigna a la propiedad 'onCompleted'. De lo contrario, se asigna una función vacía.
      });
    } else {
      // Si el primer argumento 'onNext' no es una función, entonces...
      return this._forEach(onNext);
      // ...ejecutamos la función almacenada en '_forEach' con el primer argumento 'onNext' como parámetro.
    }
  },
};

Observable.fromEvent = function (dom, eventName) {
  // Agregamos un método estático 'fromEvent' al objeto 'Observable'.
  // Este método toma dos argumentos: un elemento del DOM 'dom' y el nombre de un evento 'eventName'.
  return new Observable(function forEach(observer) {
    // La función crea y retorna un nuevo objeto 'Observable'.
    // La función 'forEach' que se pasa como argumento al constructor toma un 'observer' como parámetro.
    var handler = (e) => observer.onNext(e);
    // Creamos un 'handler' que es una función de flecha que recibe un evento 'e' y llama al método 'onNext' del 'observer', pasándole 'e'.
    dom.addEventListener(eventName, handler);
    // Registramos el 'handler' en el elemento del DOM 'dom' para el evento especificado en 'eventName'.
    return {
      // Retornamos un objeto que tiene una única propiedad 'dispose'.
      dispose: () => {
        // La propiedad 'dispose' es una función de flecha que...
        dom.removeEventListener(eventName, handler);
        // ...elimina el 'handler' previamente registrado en el elemento del DOM 'dom' para el evento especificado en 'eventName'.
      },
    };
  });
};

const button = document.getElementById("button");
// Declaramos una constante 'button' y le asignamos el elemento del DOM con el ID "button".

const clicks = Observable.fromEvent(button, "click");
// Declaramos una constante 'clicks' y le asignamos el resultado de llamar al método estático 'fromEvent' de 'Observable',
// pasándole el elemento del DOM 'button' y el nombre del evento "click". Esto crea un objeto 'Observable' que escucha el
// evento de clic en el botón.

const clicksSubscription = clicks.forEach((event) => {
  // Declaramos una constante 'clicksSubscription' y le asignamos el resultado de llamar al método 'forEach' en el objeto
  // 'clicks'. Esta función toma una función de flecha como argumento que recibe un evento 'event'.
  console.log("El usuario hizo click", event);
  // Dentro de la función de flecha, registramos en la consola un mensaje "El usuario hizo click" seguido del objeto 'event'.
});

class Observable {
  // Declaramos una clase 'Observable'.
  constructor(subscribe) {
    // Definimos el constructor de la clase, que toma un argumento 'subscribe'.
    this._subscribe = subscribe;
    // Asignamos la función 'subscribe' recibida como argumento a la propiedad '_subscribe' de la instancia del objeto Observable.
  }
  subscribe(observer) {
    // Declaramos un método 'subscribe' en la clase 'Observable' que toma un argumento 'observer'.
    return this._subscribe(observer);
    // Ejecutamos la función almacenada en la propiedad '_subscribe' de la instancia del objeto Observable,
    // pasándole el argumento 'observer' y retornando el resultado.
  }
}

class Observable {
  // Declaramos una clase 'Observable'.

  // ...
  // Aquí se deben incluir el constructor y otros métodos que no se muestran en este fragmento de código.

  static fromEvent(domElement, eventName) {
    // Declaramos un método estático 'fromEvent' en la clase 'Observable' que toma dos argumentos: un elemento del DOM 'domElement' y el nombre de un evento 'eventName'.
    return new Observable(function subscribe(observer) {
      // La función crea y retorna un nuevo objeto 'Observable'.
      // La función 'subscribe' que se pasa como argumento al constructor toma un 'observer' como parámetro.
      const handler = (ev) => { observer.next(ev) };
      // Creamos un 'handler' que es una función de flecha que recibe un evento 'ev' y llama al método 'next' del 'observer', pasándole 'ev'.
      domElement.addEventListener(eventName, handler);
      // Registramos el 'handler' en el elemento del DOM 'domElement' para el evento especificado en 'eventName'.
      return {
        // Retornamos un objeto que tiene una única propiedad 'unsubscribe'.
        unsubscribe() {
          // La propiedad 'unsubscribe' es una función que...
          domElement.removeEventListener(eventName, handler);
          // ...elimina el 'handler' previamente registrado en el elemento del DOM 'domElement' para el evento especificado en 'eventName'.
        }
      }
    });
  }
}

// Creamos una constante llamada 'button' que almacena el elemento HTML con el ID "button"
const button = document.getElementById("button");

// Creamos una constante llamada 'clicks' que usa nuestra propia implementación de Observable para observar el evento 'click' del elemento HTML almacenado en la constante 'button'
const clicks = Observable.fromEvent(button, "click");

// Creamos una constante llamada 'clicksSubscription' que suscribe una función de devolución de llamada que se ejecuta cada vez que se detecta un evento 'click'
const clicksSubscription = clicks.subscribe({
  // La función 'next' es llamada cada vez que se detecta un evento 'click' y muestra un mensaje de registro en la consola
  next(e) {
    console.log("Click in the button");
  },
});

// Estándar antiguo
clicksSubscription.dispose();

// Estándar nuevo
clicksSubscription.unsubscribe();