Giải thích Javascript Reactivity

2002

Rất nhiều thư viện Javascript như Angular, React, Vue sử dụng Reactivity, hiểu được reactivity là gì và cách nó chạy sẽ giúp nâng cao kỹ năng lập trình

Một ví dụ về Reactivity của Vue

Ở đây khi chúng ta thay đổi giá trị của price, thằng Vue nó sẽ làm 3 thứ

  1. Cập nhập lại giá trị price
  2. Tính lại giá trị total
  3. Gọi lại hàm totalPriceWithTax và cập nhập lại giá trị

Thấy hết sức bình thường, nhưng đó KHÔNG PHẢI LÀ CÁCH CHẠY BÌNH THƯỜNG CỦA JAVASCRIPT

Ví dụ với javascript bình thường


 

Bạn hãy đoán xem kết quả log ra là mấy? Sẽ là 10 chứ không phải 40 đâu.

Vấn đề và giải pháp

Vấn đề là chúng ta cần phải lưu cái cách tính price * quantity này lại ở đâu đó, để chúng ta re-run cách tính này khi gọi lại total, nó sẽ không nên là biến số mà là thành hàm, thì khi đó nếu giá trị price hoặc quantity thay đổi chúng ta sẽ có kết quả total thay đổi theo.

Chúng ta cần một nơi để lưu phần code tính toán kiểu như vậy lại ở đâu đó, để khi price hoặc quantity thay đổi, chúng ta sẽ chạy lại tất cả những gì đã lưu

Hàm record chúng ta sẽ implement nó như sau

Giải pháp tổng quát hơn

Nếu đã nắm được ý tưởng chính để giải quyết bài toán ban đầu, giờ chúng ta sẽ hiện thực hóa nó bẳng observer pattern, tạo một class để quản lý những chuyện đó

Code lại ví dụ trên sử dụng class mới tạo này

Chúng ta vẫn còn có thể nâng cấp đoạn code trên, thay vì

… chúng ta đóng gói nó vào một watcher, sau đó chỉ cần gọi

Implement cái function watcher này như bên dưới

Tách Dep cho mỗi biến

Chúng ta sẽ muốn mỗi một biến có một Dep riêng, trước tiên ta đưa price và quantity thành property của data

Chúng ta sẽ có các Dep khác nhau cho price và quantity

watcher phụ thuộc cả 2 biến

watcher chỉ phụ thuộc biến price

Chúng ta muốn khi giá trị price bị thay đổi, hàm dep.notify của price store sẽ được gọi

Đọc thêm tài liệu về Object.defineProperty nếu chưa biết. Áp dụng nó trong ví dụ này

Với cách này, chúng ta có thể chạy kèm một hàm nào đó khi giá trị price được get hoặc set. Với idea là như thế chúng ta tổng quát quá lên cho nhiều biến

Tổng hợp các ý tưởng chính

Khi một đoạn code như vậy được chạy, nó sẽ get giá trị của price, chúng ta muốn thẳng price khi bị thay đổi hoặc gọi, nó sẽ re-run một function

  • Ở Get: nhớ dùm cái function này, bọn tao sẽ nhờ mày chạy lại
  • Ở Set: chạy cái function mày đã giữ hộ ấy, thay đổi giá trị luôn nhé

Và đây là toàn bộ code

Kết quả nè

Hình mình họa lấy từ Vue

TopDev via Vuilaptrinh