Pengaturcaraan reaktif dengan JavaScript dan RxJS

Pengaturcaraan reaktif ialah paradigma pengaturcaraan yang mengendalikan aliran data tak segerak. Ini ialah cara menulis kod yang bertindak balas terhadap perubahan dengan lebih cepat dan mengendalikan peristiwa serta aliran data dengan lebih cekap.

Dalam pengaturcaraan reaktif, data diwakili sebagai aliran peristiwa. Peristiwa ini boleh menjadi apa sahaja daripada input pengguna kepada permintaan rangkaian kepada kemas kini pangkalan data. Program ini kemudian melanggan acara ini dan bertindak balas apabila ia berlaku.

Kaedah pengaturcaraan ini mempunyai banyak kelebihan. Pertama, ia memudahkan kerja dengan data tak segerak. Dalam pengaturcaraan tradisional, data tak segerak boleh menjadi sukar untuk dikendalikan kerana sukar untuk mengetahui bila data akan tersedia. Pengaturcaraan reaktif, sebaliknya, mengendalikan data tak segerak dengan cara yang lebih semula jadi dengan menganggapnya sebagai aliran peristiwa.

Kedua, pengaturcaraan reaktif membantu meningkatkan prestasi kod anda. Dengan melanggan acara, kod anda boleh dimaklumkan sebaik sahaja data baharu tersedia, jadi ia tidak perlu membuat tinjauan untuk data atau menunggu acara berlaku.

Akhir sekali, pengaturcaraan reaktif boleh membantu kod anda menjadi lebih boleh diselenggara. Dengan menganggap data sebagai aliran peristiwa, kod anda menjadi lebih deklaratif dan lebih mudah untuk memahami cara bahagian kod yang berlainan berinteraksi antara satu sama lain.

RxJS

RxJS ialah perpustakaan JavaScript yang menyediakan API pengaturcaraan reaktif. Ia ialah perpustakaan popular yang digunakan oleh banyak rangka kerja JavaScript yang popular seperti Angular dan React.

RxJS menawarkan banyak ciri yang menjadikannya sesuai untuk pengaturcaraan reaktif. Ciri-ciri ini termasuk -

• Pemerhatian− Pemerhatian ialah blok binaan asas RxJS. Ia mewakili aliran peristiwa dan boleh digunakan untuk mewakili sebarang jenis data, termasuk nombor, rentetan, objek dan tatasusunan.

• Operator− Operator ialah fungsi yang boleh digunakan untuk mengubah, menapis dan menggabungkan Observables. Terdapat sejumlah besar operator yang tersedia dalam RxJS, yang memungkinkan untuk melaksanakan pelbagai operasi dengan Observables.

• Scheduler−Scheduler digunakan untuk mengawal masa Observables. Ia boleh digunakan untuk menyebabkan Observable menyala pada masa tertentu, atau untuk menangguhkan pelepasan peristiwa.

Pasang RxJS

Untuk mula menggunakan RxJS, kami perlu memasangnya. Buka terminal dan jalankan arahan berikut -

npm install rxjs

Selepas pemasangan selesai, kita boleh mula meneroka kuasa pengaturcaraan reaktif RxJS.

Buat Pemerhatian

Pemerhatian berada di tengah-tengah RxJS. Mereka mewakili aliran data yang boleh diperhatikan oleh pelanggan.

Mari mulakan dengan mencipta Observable ringkas yang mengeluarkan urutan nombor -

Contoh

import { Observable } from 'rxjs';

const numberObservable = new Observable((observer) => {
   let count = 0;

   const interval = setInterval(() => {
      observer.next(count);
      count++;

      if (count > 5) {
         clearInterval(interval);
         observer.complete();
      }
   }, 1000);
});

numberObservable.subscribe((number) => {
   console.log(number);
});

Arahan

Dalam kod di atas, kami mencipta Observable menggunakan kelas Observable dalam RxJS. Di dalam pembina, kami mentakrifkan logik untuk memancarkan nilai. Dalam contoh ini, kami menggunakan setInterval untuk mengeluarkan nombor setiap saat. Setelah kiraan mencapai 5, kami menghentikan selang dan memanggil observer.complete() untuk menandakan tamat strim.

Untuk memerhatikan nilai yang dipancarkan oleh Observable, kami memanggil kaedah langgan dan menyediakan fungsi panggil balik. Dalam kes ini, fungsi panggil balik hanya log nombor yang dipancarkan ke konsol.

Output

0 
1
2 
3 
4
5

Pengendali dalam RxJS

RxJS menyediakan rangkaian luas pengendali yang membolehkan kami mengubah, menapis, menggabungkan dan memanipulasi data yang dipancarkan oleh Observables. Mari lihat beberapa pengendali biasa.

Operator Peta

Operator

map membolehkan kami mengubah nilai yang dipancarkan oleh Observable. Sebagai contoh, mari kita ubah suai contoh sebelumnya untuk menggandakan nombor yang dipancarkan -

Contoh

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

const numberObservable = new Observable((observer) => {
   let count = 0;

   const interval = setInterval(() => {
      observer.next(count);
      count++;

      if (count > 5) {
         clearInterval(interval);
         observer.complete();
      }
   }, 1000);
});

numberObservable
   .pipe(map((number) => number * 2))
   .subscribe((number) => {
      console.log(number);
   });

Arahan

Dalam kod ini, kami menggunakan kaedah saluran paip untuk memautkan operator pemetaan kepada Observable kami. Operator pemetaan mengambil fungsi panggil balik yang menukar setiap nombor yang dipancarkan dengan menggandakannya. Nilai yang terhasil kemudiannya dihantar ke fungsi panggil balik pelanggan.

Output

0
2
4
6
8 
10

Operator Penapis

Pengendali penapis membolehkan kami menapis secara selektif nilai yang dipancarkan oleh Observable berdasarkan keadaan. Mari tambahkan penapis pada contoh sebelumnya untuk mengeluarkan nombor genap sahaja -

示例

import { Observable } from 'rxjs';
import { filter } from 'rxjs/operators';

const numberObservable = new Observable((observer) => {
   let count = 0;

   const interval = setInterval(() => {
      observer.next(count);
      count++;

      if (count > 5) {
         clearInterval(interval);
         observer.complete();
      }
   }, 1000);
});

numberObservable
   .pipe(filter((number) => number % 2 === 0))
   .subscribe((number) => {
      console.log(number);
   });

说明

在提供的代码中，我们创建了一个名为 numberObservable 的 Observable，它发出一系列数字。 Observable 使用 setInterval 发出从 0 开始的数字，每秒递增 1。发出数字 5 后，间隔被清除，Observable 使用observer.complete() 发出完成信号。

接下来，我们使用管道方法将过滤运算符应用于 numberObservable。过滤器运算符采用定义条件的回调函数。它过滤掉不满足条件的值，只允许偶数通过。

最后，我们订阅过滤后的 Observable，并使用订阅者的回调函数将每个发出的数字记录到控制台。

输出

0
2
4

结论

总之，使用 JavaScript 和 RxJS 进行响应式编程提供了一种强大而有效的方法来处理异步数据流和构建响应式应用程序。通过拥抱 Observables 的概念并利用 RxJS 提供的丰富的运算符集，开发人员可以以声明式且优雅的方式轻松操作、转换和组合数据流。

通过本文讨论的示例，我们了解了如何创建 Observables、应用映射和过滤器等运算符来转换和过滤发出的值，以及订阅 Observables 来接收和处理数据。 RxJS 通过提供一致且可组合的方法简化了复杂异步流的管理。

Atas ialah kandungan terperinci Pengaturcaraan reaktif dengan JavaScript dan RxJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!