Под капотом как rx js слушает изменения

Question

Поскольку DOM API браузеров работает через событие l oop и для прослушивания изменений в dom мы регистрируем обработчики событий.

Что RX JS за сценой реализует для подписчиков, чтобы прослушивать изменения в данных.

Я мог бы здесь полностью пропустить сюжет. (Я использую их изо дня в день, но хотел бы узнать, как они работают с DOM API).

Я понимаю паттерн наблюдателя, но это абстракция дизайна, то, как ядро ​​RX JS работает с DOM, это то, что я ищу.

Answer 1

Наблюдаемые - это просто функции . Они не предоставляют ничего особенного, они просто предлагают то, что предлагает Javascript платформа, браузер или узел, с другой мощной парадигмой. Сила Rx JS заключается в богатом наборе функций и операторов, которые можно составить в конвейерах преобразования. Вот откуда берутся маги c Наблюдаемых.

Рассмотрим следующий пример, охватывающий функцию readline, предоставляемую модулем fs Узел .

const readLineObs = (filePath: string): Observable<string> => {
  return Observable.create(
    (observer: Observer<string>): TeardownLogic => {
      const rl = readline.createInterface({
        input: fs.createReadStream(filePath),
        crlfDelay: Infinity
      });

      rl.on("line", (line: string) => {
        observer.next(line);
      });
      rl.on("close", () => {
        observer.complete();
      });
    }
  );
};

Этот код полагается на Node apis, чтобы выполнять построчное чтение файла, но предлагает результат в виде Observable. Преимущество состоит в том, что вы можете использовать операторы Observable для обработки результатов, как в следующем примере

readLinesObs('my_path_to_file').pipe(
  filter(line => line[0] === 'A'), // take only the lines which start with A
  map((line, i) => i + '_' + line),  // add a line number at the start of the line
  take(10),  // just take the first 10 lines
  // do all other types of transformations you may need
)

Answer 2

Прямой путь - взглянуть на исходный код: fromEvent, если вы хотите увидеть взаимодействие DOM и планировщики для DOM API (например, setInterval)