將事件映射器與 Rimmel.js 結合使用：簡單介紹

如果您想提高程式碼的整體質量，您可能希望將資料模型與底層視圖完全解耦。

功能響應式框架或UI 函式庫（如Rimmel.js）完全支援Observables，除了鮮為人知的設計之外，還可讓您將模型定義為Observable 串流（例如：簡單的資料輸入、資料輸出流）模式，即事件適配器。

事件適配器可協助您將任何來源事件（例如：DOM 的 MouseEvent、PointerEvent、KeyboardEvent 等）對應到資料模型實際使用的格式，因此它們將從這種轉換任務中解放出來，並最終與使用者介面。

Rimmel 讓將此類流連接到 DOM 變得簡單：

import { rml } from 'rimmel';

const component = () => {
  const total = new Subject().pipe(
    map(x => doSomethingWith(x)),
  );

  return rml`
    <button onclick="${stream}">click me</button>
    <div id="display">${stream}</div>
  `;
}

綁定很簡單：Rimmel 將來自按鈕的點擊事件直接連接到您的可觀察流中，每次單擊按鈕時，該流都會接收 PointerEvent 的實例。

到目前為止一切順利。如果您的串流需要從多個來源獲取數據，並且根據每個來源的行為有所不同，該怎麼辦？
讓我們創建一個帶有遞增和遞減按鈕的簡單計數器，每個按鈕都會加一或減一。

import { scan } from 'rxjs';
import { rml } from 'rimmel';

const component = () => {
  const total = new BehaviorSubject(0).pipe(
    scan((old, new) => old+new, 0),
  );

  return rml`
    <button onclick="${() => total.next(1)}">inc</button>
    <button onclick="${() => total.next(-1)}">dec</button>

    <div>${total}</div>
  `;
}

這可行，但模板部分包含一些邏輯，這是一種反模式。理想情況下，我們應該努力擁有無邏輯的模板，以最大限度地提高整體可測試性。

因此，Rimmel 1.2 提供了一項新功能：事件映射器，它可以幫助解決這個問題。它們可協助您將 DOM 事件對應到模型所需的內容，以便您可以將邏輯與範本完全分開。這是它的工作原理。

import { map, scan } from 'rxjs';
import { rml, reversePipe } from 'rimmel';

const Inc = reversePipe(map(() => 1));
const Dec = reversePipe(map(() => -1));
const component = () => {
  const total = new BehaviorSubject(0).pipe(
    scan((old, new) => old+new, 0),
  );

  return rml`
    <button onclick="${Inc(total)}">inc</button>
    <button onclick="${Dec(total)}">dec</button>

    <div>${total}</div>
  `;
};

reversePipe 是這裡的創新補充：一個管道創建工具，與 RxJS 中的 pipeline() 函數相反。後者將轉換應用於流的輸出，reversePipe() 將它們應用於輸入。
這樣您就可以確保您的主流Subject/BehaviorSubject/Observer/EventListener 始終以您想要的格式獲取數據，並且您可以將適配器作為單獨的關注點。

您可以在反向管道中使用任何 RxJS 運算子。您是否只想過濾掉某些事件，例如當使用者按 Enter 鍵時，而不是任何其他鍵？只需使用過濾運算符：

import { Subject, filter, map } from 'rxjs';
import { rml, inputPipe } from 'rimmel';

const UpperOnEnter = inputPipe(
  filter((e: Event) => e.key == 'Enter'),
  map((e: Event) => e.target.value.toUpperCase()),
);

const Component = () => {
  const state = new Subject();

  return rml`
    Type some text and hit Enter<br>
    <input onkeydown="${UpperOnEnter(state)}">
    <div>${state}</div>
  `;
};

關於單元測試，這是一個微小但有用的補充，將使測試更簡單、更有效率。

查看此 Stackblitz 上正在執行的事件映射器

以上是將事件映射器與 Rimmel.js 結合使用：簡單介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！