Giới Thiệu

Trong công việc phát triển frontend hiện đại, chúng ta thường gặp phải vấn đề lẫn lộn giữa các chi tiết DOM và logic ứng dụng: các đối tượng sự kiện thô xuất hiện nơi mà các mô hình chỉ nên quan tâm đến dữ liệu có ý nghĩa. Rimmel.js là một trong những thư viện UI cung cấp giải pháp gọn gàng: Bộ Chuyển Đổi Sự Kiện (Event Adapters). Chúng cho phép bạn biến đổi các sự kiện DOM thành những gì mô hình dữ liệu của bạn cần. Kết quả: sự tách biệt rõ ràng giữa các mối quan tâm, dễ dàng kiểm thử và mã nguồn đơn giản hơn để lý giải.

Bộ Chuyển Đổi Sự Kiện Là Gì?

Bộ Chuyển Đổi Sự Kiện là các lớp bao bọc quanh các trình xử lý sự kiện DOM hoặc các dòng RxJS, có tác dụng chặn các sự kiện thô (ví dụ: MouseEvent, KeyboardEvent, v.v.), trích xuất hoặc biến đổi các phần có liên quan, sau đó chuyển tiếp chúng vào mô hình hoặc dòng của bạn theo định dạng sạch. Chúng giúp bạn tránh được mẫu sau:

// Một mô hình làm việc với một số, nhưng nhận một sự kiện DOM
button.onclick = (e) => {
  const num = Number(e.target.dataset.value)
  myStream.next(num)
}

Với Bộ Chuyển Đổi Sự Kiện, bạn khai báo sự biến đổi trong việc ràng buộc view sao cho mô hình của bạn luôn nhận được giá trị có kiểu dữ liệu phù hợp (ví dụ: số, chuỗi, đối tượng tùy chỉnh), mà không bao giờ phải xử lý các sự kiện thô.

Rimmel cung cấp một số Bộ Chuyển Đổi tích hợp sẵn, cùng với các công cụ để bạn có thể tự tạo của riêng mình.

Các Bộ Chuyển Đổi & Toán Tử Tích Hợp Sẵn

Dưới đây là một số bộ chuyển đổi tích hợp sẵn trong Rimmel:

• Value, ValueAsNumber, ValueAsDate, v.v.: các bộ chuyển đổi trích xuất giá trị từ trường nhập liệu (dưới dạng chuỗi, số, ngày).
• Cut: giống như Value, nhưng xóa trường nhập liệu sau khi đọc.
• OffsetXY: cho các sự kiện chuột / con trỏ, chuyển đổi sự kiện thành tọa độ [x, y].

Rimmel cung cấp một hàm gọi là inputPipe để xây dựng các bộ chuyển đổi tùy chỉnh bằng cách sử dụng các toán tử này.

Cách Bộ Chuyển Đổi Sự Kiện Hoạt Động Trong Quy Trình Của Rimmel

Trong Rimmel:

• Nguồn Sự Kiện là những thứ như sự kiện DOM, các lớp bọc có thể quan sát, v.v.
• Bộ Chuyển Đổi Sự Kiện nằm giữa các nguồn đó và các mô hình hoặc dòng mục tiêu của bạn. Chúng biến đổi sự kiện thô.
• Các Đích là nơi dữ liệu kết thúc (ví dụ: cập nhật DOM) thông qua các ràng buộc trong các mẫu rml của bạn.

Chuỗi hoạt động như sau:

DOM event → Event Adapter → Model stream / Subject → Sink → DOM update

Bằng cách di chuyển logic biến đổi vào các bộ chuyển đổi (thường trong việc ràng buộc view/mẫu), mô hình của bạn không cần biết cách dữ liệu đến. Nó chỉ nhận “đầu vào sạch”.

Tại Sao Bộ Chuyển Đổi Sự Kiện Quan Trọng

Dưới đây là một số lý do để áp dụng Bộ Chuyển Đổi Sự Kiện:

Mẫu & Mã Mô Hình Sạch Hơn

Mẫu giữ nguyên tính khai báo và không bị rối bởi logic kinh doanh. Các mô hình/dòng chỉ làm việc với dữ liệu sạch.

An Toàn Kiểu & Dự Đoán

Nếu các mô hình của bạn mong đợi các kiểu nhất định (số, chuỗi, mảng, đối tượng tùy chỉnh), các bộ chuyển đổi đảm bảo rằng những gì đi vào phù hợp với những mong đợi đó.

Dễ Dàng Kiểm Thử

Bạn có thể kiểm thử các mô hình của mình bằng cách cung cấp cho chúng các giá trị đơn giản, không phải là các đối tượng Sự Kiện DOM đầy đủ. Điều này đơn giản hóa việc tạo mô phỏng & thiết lập kiểm thử.

Tính Tái Sử Dụng

Cùng một bộ chuyển đổi có thể được áp dụng ở nhiều nơi. Bạn tránh việc phải viết lại cùng một map(value => ...) v.v.

Tách Biệt Thực Hiện View khỏi Thực Hiện Model

Mô hình của bạn không cần biết dữ liệu đến từ onchange, oninput, onclick, v.v. Nó chỉ nhận được tải đã xử lý.

Ví Dụ

Dưới đây là một số ví dụ cho thấy Bộ Chuyển Đổi Sự Kiện đang hoạt động.

Đầu Vào Đơn Giản: Trích Xuất Giá Trị

Không có bộ chuyển đổi sự kiện:

const stream = new Subject<Event>().pipe(
  map(e => e.target.value)
);

target.innerHTML = rml`
  <input onchange="${stream}">
  <div>${stream}</div>
`;

Với một bộ chuyển đổi sự kiện:

import { Value } from 'rimmel'

const stream = new Subject<string>()

target.innerHTML = rml`
  <input onchange="${Value(stream)}">
  <div>${stream}</div>
`;

Xóa Đầu Vào Sau Khi Đọc (“Cut” Adapter)

import { Cut } from 'rimmel'
const stream = new Subject<string>()

target.innerHTML = rml`
  <input onchange="${Cut(stream)}">
  Submitted: <span>${stream}</span>
`;

Ở đây, sau khi người dùng thay đổi đầu vào, Cut phát giá trị và đặt lại trường nhập liệu. Mô hình chỉ nhận được chuỗi.

Chuyển Đổi Tổ Hợp: Lọc + Ánh Xạ

Bạn có thể xây dựng các bộ chuyển đổi sự kiện của riêng mình với inputPipe:

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

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

const state = new Subject<string>()

target.innerHTML = rml`
  <input onkeydown="${UpperOnEnter(state)}">
  <div>${state}</div>
`;

Trong thiết lập này, chỉ khi phím Enter được nhấn, mô hình của bạn mới nhận được giá trị viết hoa của đầu vào. Tất cả các vấn đề về sự kiện DOM được xử lý bởi bộ chuyển đổi.

Cách Tạo Bộ Chuyển Đổi Riêng

Nếu các bộ tích hợp sẵn không bao phủ trường hợp của bạn, việc tạo một Bộ Chuyển Đổi Sự Kiện tùy chỉnh rất đơn giản:

Sử dụng inputPipe(...) để xây dựng một chuỗi các toán tử RxJS biến đổi Sự Kiện.

Đảm bảo chuỗi của bạn kết thúc bằng cách gửi dữ liệu vào một observer/subject tương ứng với mô hình của bạn.

Xuất nó như một hàm viết hoa để dễ sử dụng trong mẫu của bạn. Theo quy ước, các bộ chuyển đổi sự kiện là viết hoa.

Ví dụ, bộ chuyển đổi cho việc thả tệp:

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

const FilesOnly = inputPipe(
  map((e: DragEvent) => (e.dataTransfer?.files || [])),
  filter((files: FileList | File[]) => files.length > 0)
);

// Sử dụng bên trong một thành phần/mẫu
const fileHandler = new Subject<File[]>()

document.body.innerHTML = rml`
  <div ondrop="${FilesOnly(fileHandler)}">
    Thả tệp vào đây
  </div>
`;

Cân Nhắc & Thực Tiễn Tốt Nhất

• Đừng biến đổi quá mức trong các bộ chuyển đổi sự kiện; giữ chúng tập trung. Nếu logic quá phức tạp, có thể nó nên thuộc về mô hình thay vì trong các bộ chuyển đổi.
• Cân nhắc về hiệu suất: nhiều bộ lọc, ánh xạ, v.v. là ổn, nhưng chuỗi nhiều cái có thể gây overhead.
• Cần lưu ý giữ các tác dụng phụ ra khỏi các bộ chuyển đổi; chúng nên biến đổi, không gây ra các thay đổi bên ngoài.
• Sử dụng các bộ chuyển đổi để đảm bảo các invariant (ví dụ: chuỗi không rỗng, số hợp lệ) để logic phía dưới đơn giản hơn.

Kết Luận

Bộ Chuyển Đổi Sự Kiện trong Rimmel.js là một công cụ nhỏ nhưng mạnh mẽ và thanh lịch. Chúng giúp giữ cho mã UI của bạn sạch sẽ, mô hình không bị rối bởi các chi tiết DOM, và ứng dụng của bạn dễ dàng kiểm thử và bảo trì. Khi xây dựng các ứng dụng không phải là đồ chơi, sự tách biệt này mang lại nhiều lợi ích hơn bạn có thể mong đợi.

Nếu bạn xây dựng với Rimmel.js, một trong những điều đầu tiên bạn nên áp dụng là một chiến lược nhất quán cho các Bộ Chuyển Đổi Sự Kiện: định nghĩa các bộ chuyển đổi chung cho các mẫu của ứng dụng bạn và sử dụng chúng ở khắp mọi nơi. Bạn sẽ thấy các lớp mã của bạn trở nên dễ dàng hơn trong việc kết hợp, dự đoán và cuối cùng là dễ chịu hơn khi làm việc.