RxJS – Đam mê Code

rxjs là một thư viện phát triển web được sử dụng rộng rãi hiện nay. Thư viện chuyên về các vấn đề liên quan đến sự kiện và bao gồm một bộ khung, thư viện và tiện ích phong phú, khiến nó trở nên rất hấp dẫn đối với cộng đồng phát triển. Ngoài ra, sử dụng rxjs giúp chúng tôi hiểu rõ hơn về lập trình phản ứng, đây là một phong cách lập trình rất khác.

Nhưng học rxjs không hề đơn giản, vì có rất nhiều khái niệm, lớp api và đặc biệt là các ý tưởng lập trình khác nhau. Bài viết này sẽ giới thiệu ngắn gọn về rxjs để bạn dễ dàng truy cập, sau đó tìm hiểu sâu hơn về thư viện tuyệt vời này.

Tính năng chính của rxjs là nó có thể xử lý các sự kiện và luồng dữ liệu một cách không đồng bộ, nhờ các chuỗi sự kiện có thể quan sát được – các chuỗi sự kiện có thể quan sát được. Cốt lõi của nó là loại có thể quan sát, có các loại liên quan (người quan sát, người lập lịch, chủ thể). Các toán tử được thư viện này sử dụng lấy cảm hứng từ các toán tử mảng, chẳng hạn như map, filter, reduce, every… Điểm khác biệt duy nhất là rxjs không xử lý dữ liệu mảng tĩnh mà sử dụng các toán tử này cho luồng dữ liệu. Vật chất.

Để dễ hiểu, hãy xem một ví dụ đơn giản

Bạn thường chỉ định các sự kiện cho html như thế nào? Đúng vậy, bạn cần sử dụng addeventlistener()

Nếu sử dụng rxjs

Hàm fromevent() ở đây hoạt động giống như hàm addeventlistener ở trên, nhưng thay vì tạo ra một sự kiện, nó tạo ra một đối tượng có thể quan sát được mà bạn có thể đăng ký giống như bất kỳ luồng dữ liệu thông thường nào.

Nếu bạn đã biết khái niệm hàm thuần túy (pure function), tức là hàm chỉ thay đổi giá trị của đầu vào để trả về giá trị mới mà không gây tác dụng phụ (hàm tác động đến biến ngoài) thì bạn sẽ thấy những lợi thế của việc sử dụng các chức năng thuần túy. rxjs tận dụng tốt các hàm thuần túy này, chẳng hạn như ví dụ sau

Lập trình với js thông thường, khi muốn đếm số lần click thì ta làm thế này

Và rxjs

Nếu bạn không quen thuộc với các toán tử rxjs, nó có thể hơi khó hiểu. Trong ví dụ trên, pipe() là một hàm dùng để tương tác với giá trị trả về của observable, trong pipe bạn có thể sử dụng các hàm toán tử khác nhau để thao tác với giá trị. Hàm scan() ở đây tương tự như hàm reduce() của mảng, giúp thực hiện các phép toán số học trên giá trị đếm mỗi khi giá trị trả về được trả về. Vì vậy khi sử dụng rxjs, bạn không cần khai báo biến đếm và tương tác trực tiếp với nó mà vẫn có thể đếm số lần click thông qua giá trị đếm được trả về bởi observable.

rxjs có nhiều toán tử để tương tác với các sự kiện thông qua các đối tượng quan sát. Đây là một ví dụ về cách giới hạn số lần truy cập mỗi giây

jascipt thuần túy

sử dụng rxjs

Rxjs rõ ràng là rất có khả năng giải quyết các vấn đề về quản lý lưu lượng so với js thuần túy. Ngoài hàm throttletime() ở trên, còn có nhiều hàm như filter, delay, debouncetime, v.v. take, takeuntil, distinct, distinctuntilchanged

Hãy xem xét một ví dụ cuối cùng về cách xử lý giá trị của rxjs.

Ví dụ sau đây nói về việc thêm giá trị tọa độ x mỗi lần nhấp. Sử dụng javascript thuần túy, nó sẽ trông như thế này

Xử lý với rxjs

Trong ví dụ này, lần nhấp sẽ được chuyển đổi thành có thể quan sát được, đặt thời gian chờ thành 1 giây, sau đó mỗi sự kiện nhấp được ánh xạ tới giá trị clientx của nó và cuối cùng, chức năng quét được sử dụng để tích lũy giá trị của clientx.