Friday, January 22, 2021
Lưu Xuân Trường's Blog
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ
No Result
View All Result
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ
No Result
View All Result
Lưu Xuân Trường's Blog
No Result
View All Result

RxJS toàn tập (P1 giới thiệu RxJS là gì)

truongluu by truongluu
15/10/2020
in RxJS
Reading Time: 4min read
0 0
0
RxJS toàn tập (P1 giới thiệu RxJS là gì)
0
SHARES
624
VIEWS
Share on FacebookShare on Twitter

Giới thiệu RxJS là gì ?

RxJS là một thư viện cho chương trình soạn bất đồng bộ và dựa trên sự kiện sử dụng trình tự có thể quan sát (observable). Nó cung cấp 1 kiểu lõi ( Observable), các kiểu vệ tinh (Observer, Schedulers, Subjects) và toán tử lấy cảm hứng từ mảng (map, filter, reducer, every,…) cho phép thao tác các sự kiện bất đồng bộ như tập hợp (collections)

Hãy nghĩ về RxJS giống như Lodash cho các sự kiện.

Các khái niệm cơ bản trong RxJS giải quyết sự quản lý sự kiện không đồng bộ là:

  1. Observable: đại diện cho ý tưởng về 1 bộ sưu tập bất khả xâm phạm cho các giá trị hoặc sự kiện trong tương lai.
  2. Observer: là tập hợp các cuộc gọi lại biết lắng nghe cái giá trị được phát ra từ Observable
  3. Subscription: Đại diện cho việc  thực hiện 1 Observable. mục đích chính sử dụng để huỷ bỏ việc thực hiện
  4. Operators: là các pure function cho phép một kiểu lập trình chức năng xử lý các bộ sưu tập với các phép toán như map, filter, concat, reduce,…
  5. Subject: tương đương với một EventEmitter và là cách duy nhất để phát nhiều hướng một giá trị hoặc sự kiện cho nhiều người quan sát (Observer).
  6. Schedulers: này sẽ nói sau.

Ví dụ:

Bình thường bạn đăng ký lắng nghe 1 sự kiện:

JavaScript
1
2
const button = document.querySelector('button');
button.addEventListener('click', () => console.log('Clicked!'));

Sử dụng RxJS bạn tạo ra 1 Observable thay thế như đoạn mã bên dưới:

JavaScript
1
2
3
4
5
const { fromEvent } = rxjs;
 
const button = document.querySelector('button');
fromEvent(button, 'click')
  .subscribe(() => console.log('Clicked!'));

Độ tinh khiết

Điều gì làm cho RxJS mạnh mẽ là khả năng tạo ra cái giá trị từ các hàng thuần tuý (Pure function). Điều này có nghĩa là mã của bạn ít lỗi hơn.

Thông thường bạn tạo ra 1 hàm không tinh khiết (impure function), nơi các phần khác của mã có thể làm hỏng trạng thái của bạn.

JavaScript
1
2
3
var count = 0;
var button = document.querySelector('button');
button.addEventListener('click', () => console.log(`Clicked ${++count} times`));

Sử dụng RxJS bạn cô lập được trạng thái của bạn.

JavaScript
1
2
3
4
5
6
7
8
const { fromEvent } = rxjs;
const { scan } = rxjs.operators;
 
const button = document.querySelector('button');
fromEvent(button, 'click').pipe(
  scan(count => count + 1, 0)
)
.subscribe(count => console.log(`Clicked ${count} times`));

phép toán scan cho phép làm việc giống như reduce của mảng, nó lấy một giá trị đầu vào cho một cuộc gọi lại (callback). Giá trị trả về của cuộc gọi lại sau đó sẽ trở thành giá trị tiếp theo được hiển thị trong lần chạy tiếp theo.

Lưu lượng

RxJS có một loạt các toán tử giúp bạn kiểm soát cách các sự kiện chảy qua các quan sát của bạn

Đây là cách bạn cho phép nhiều nhất một lần click chuột mổi giây với mã Javascript đơn giản:

JavaScript
1
2
3
4
5
6
7
8
9
10
var count = 0;
var rate = 1000;
var lastClick = Date.now() - rate;
var button = document.querySelector('button');
button.addEventListener('click', () => {
  if (Date.now() - lastClick >= rate) {
    console.log(`Clicked ${++count} times`);
    lastClick = Date.now();
  }
});

Với RxJS, thật đơn giản phải không nào:

JavaScript
1
2
3
4
5
6
7
8
9
const { fromEvent } = rxjs;
const { throttleTime, scan } = rxjs.operators;
 
const button = document.querySelector('button');
fromEvent(button, 'click').pipe(
  throttleTime(1000),
  scan(count => count + 1, 0)
)
.subscribe(count => console.log(`Clicked ${count} times`));

Giá trị

Bạn có thể chuyển đổi các giá trị được chuyển qua các Observables của bạn
Dưới đây là cách bạn có thể thêm vị trí x chuột hiện tại cho mỗi nhấp chuột, trong JavaScript đơn giản:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
let count = 0;
const rate = 1000;
let lastClick = Date.now() - rate;
const button = document.querySelector('button');
button.addEventListener('click', (event) => {
  if (Date.now() - lastClick >= rate) {
    count += event.clientX;
    console.log(count)
    lastClick = Date.now();
  }
});

Với RxJS:

JavaScript
1
2
3
4
5
6
7
8
9
10
const { fromEvent } = rxjs;
const { throttleTime, map, scan } = rxjs.operators;
 
const button = document.querySelector('button');
fromEvent(button, 'click').pipe(
  throttleTime(1000),
  map(event => event.clientX),
  scan((count, clientX) => count + clientX, 0)
)
.subscribe(count => console.log(count));

 

Tags: observeroperatersoservablerxjsSchedulersSubjects
Previous Post

Một số câu hỏi phỏng vấn frontend developer

Next Post

RxJS toàn tập (P2 hướng dẫn cài đặt RxJS)

truongluu

truongluu

Next Post
RxJS toàn tập (P1 giới thiệu RxJS là gì)

RxJS toàn tập (P2 hướng dẫn cài đặt RxJS)

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Repetition is the mother of all skills

Tony Robbins

Quotations

About me

Field of interests: Svelte, ReactJS, Angular, VueJS, React Native, Flutter, NodeJS, MongoDB, Message Broker, WordPress, AdonisJS, NestJS, NuxtJS, Docker, Microservice, Arduino, Game HTML5. Hope to share my experiences with everybody

Recent Posts

  • Styled components trong ReactJS
  • Frontity cơ bản phần I (Tạo và chạy dự án)
  • React framework for WordPress
  • How to run bash script in NodeJS
  • Thiết lập việc ưu tiên gọi saga worker trong redux-saga

Recent Comments

  • truongluu on Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)
  • Hung on Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)
  • Redux Saga phần III (Tips khi làm việc) - Lưu Xuân Trường's Blog on Quản lý trạng thái tải khi dùng redux-saga
  • Redux Saga phần II (Các khái niệm cơ bản) - Lưu Xuân Trường's Blog on Cheatsheets Non Blocking, Blocking Redux Saga
  • truongluu on Giới thiệu về UmiJS P4 (Server Side Rendering)

Archives

  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • March 2020
  • February 2020
  • January 2020
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • April 2018
  • March 2018

Categories

  • Angular
  • Arduino
  • Backend
  • Câu Hỏi Phỏng Vấn
  • CSS
  • Ebook
  • Frontend
  • Frontity
  • Góc Ngoài Lề
  • How to
  • IOS
  • IQ Test
  • Javascript
  • Kinh nghiệm
  • Kinh nghiệm làm việc
  • Máy chủ
  • MongoDB
  • NestJS
  • NodeJS
  • NuxtJS
  • Plugins
  • React Native
  • React Native
  • ReactJS
  • Redis
  • Redux-Saga
  • RxJS
  • Tutorials
  • UmiJS
  • Uncategorized
  • VueJS
  • WordPress

Friends

Phu's blog
  • Giới thiệu về UmiJS P1 (Tổng quan về umiJS)

    Giới thiệu về UmiJS P1 (Tổng quan về umiJS)

    0 shares
    Share 0 Tweet 0
  • RxJS toàn tập (P1 giới thiệu RxJS là gì)

    0 shares
    Share 0 Tweet 0
  • Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)

    0 shares
    Share 0 Tweet 0
  • Redux Saga phần I (Giới thiệu)

    0 shares
    Share 0 Tweet 0
  • Giới thiệu về UmiJS P3 (Permission routing)

    0 shares
    Share 0 Tweet 0

About me

Lưu Xuân Trường

Field of interests: Svelte, ReactJS, Angular, VueJS, React Native, Flutter, NodeJS, MongoDB, Message Broker, WordPress, AdonisJS, NestJS, NuxtJS, Docker, Microservice, Arduino, Game HTML5. Hope to share my experiences with everybody

© 2020 https://luuxuantruong.info

No Result
View All Result
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ

© 2020 https://luuxuantruong.info

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In