Pengaturcaraan reaktif telah mengubah cara kami menangani data tak segerak dalam JavaScript. RxJS (Sambungan Reaktif untuk JavaScript) ialah pustaka berkuasa yang menjadikan kerja dengan aliran data menjadi mudah. Walaupun pengendali seperti peta, penapis dan mergeMap biasanya digunakan, RxJS mempunyai banyak permata tersembunyi yang boleh memudahkan logik kompleks. Panduan ini memperkenalkan lima pengendali RxJS yang kurang dikenali, menerangkan kes penggunaan mereka dan cara melaksanakannya langkah demi langkah.
Pengendali RxJS ialah fungsi yang membolehkan anda mengubah, menapis atau menggabungkan yang boleh diperhatikan dalam pelbagai cara. Mereka menjadikan pengendalian strim tak segerak lebih deklaratif dan intuitif. Dengan merantai operator, anda boleh membina aliran kerja yang teguh dan reaktif.
Sesetengah operator dalam RxJS menyelesaikan masalah yang sangat spesifik atau meningkatkan kebolehbacaan dan prestasi kod. Mempelajari permata tersembunyi ini boleh menjadikan kod anda lebih cekap dan elegan.
Operator partition digunakan untuk memisahkan satu boleh diperhatikan kepada dua boleh diperhatikan berdasarkan predikat. Satu yang boleh diperhatikan memancarkan nilai yang memenuhi predikat, dan yang lain memancarkan selebihnya.
Gunakan partition apabila anda perlu mengendalikan jenis data yang berbeza dalam strim berasingan, seperti ralat penapisan atau memisahkan nombor genap dan ganjil.
import { from } from 'rxjs';
import { partition } from 'rxjs/operators';
const numbers$ = from([1, 2, 3, 4, 5, 6, 7, 8, 9]);
const [even$, odd$] = partition(numbers$, (num) => num % 2 === 0);
even$.subscribe((num) => console.log(`Even: ${num}`));
odd$.subscribe((num) => console.log(`Odd: ${num}`));
Even: 2 Even: 4 Even: 6 Even: 8 Odd: 1 Odd: 3 Odd: 5 Odd: 7 Odd: 9
partition memudahkan logik yang memerlukan berbilang operator penapis.
Pengendali ini menggabungkan nilai terkini daripada berbilang pemerhatian kepada satu pemerhatian.
Gunakan combineLatestWith apabila anda perlu bertindak balas terhadap perubahan dalam berbilang strim serentak, seperti menggabungkan input pengguna dengan data masa nyata.
import { from } from 'rxjs';
import { partition } from 'rxjs/operators';
const numbers$ = from([1, 2, 3, 4, 5, 6, 7, 8, 9]);
const [even$, odd$] = partition(numbers$, (num) => num % 2 === 0);
even$.subscribe((num) => console.log(`Even: ${num}`));
odd$.subscribe((num) => console.log(`Odd: ${num}`));
combineLatestWith sangat bagus untuk menyegerakkan berbilang strim dalam masa nyata.
Pengendali audit mengeluarkan nilai terkini daripada sumber yang boleh diperhatikan selepas tempoh tertentu.
Gunakan audit apabila anda ingin mengawal pelepasan, seperti semasa acara seret dan lepas atau menatal.
Even: 2 Even: 4 Even: 6 Even: 8 Odd: 1 Odd: 3 Odd: 5 Odd: 7 Odd: 9
import { fromEvent, of } from 'rxjs';
import { combineLatestWith } from 'rxjs/operators';
const input$ = fromEvent(document.getElementById('input'), 'input');
const apiData$ = of({ name: 'John Doe', age: 30 });
input$
.pipe(combineLatestWith(apiData$))
.subscribe(([event, data]) => {
console.log(`Input: ${event.target.value}, API Data: ${JSON.stringify(data)}`);
});
audit memastikan pendikitan yang tepat tanpa kehilangan nilai terkini.
Pengendali kembangkan secara rekursif mengunjurkan setiap nilai yang dipancarkan ke dalam pemerhatian baharu.
Gunakan kembangkan untuk senario seperti panggilan API rekursif atau traversal pokok.
Input: Hello, API Data: {"name":"John Doe","age":30}
import { fromEvent, interval } from 'rxjs';
import { audit } from 'rxjs/operators';
const scroll$ = fromEvent(window, 'scroll');
scroll$
.pipe(audit(() => interval(1000)))
.subscribe(() => console.log('Scrolled!'));
kembangkan sesuai untuk mengendalikan operasi rekursif dengan elegan.
Pengendali groupBy membahagikan yang boleh diperhatikan kepada berbilang yang boleh diperhatikan, dikumpulkan mengikut kunci yang ditentukan.
Gunakan groupBy apabila anda perlu mengkategorikan data secara dinamik, seperti menyusun log mengikut keterukan.
Scrolled! Scrolled!
import { of } from 'rxjs';
import { expand, take } from 'rxjs/operators';
const fetchPage = (page) => of(`Page ${page}`);
fetchPage(1)
.pipe(
expand((page) => (page < 5 ? fetchPage(page + 1) : of())),
take(5)
)
.subscribe((data) => console.log(data));
groupBy memudahkan penyusunan data mengikut kategori secara dinamik.
Pengendali seperti peta, penapis dan mergeMap digunakan secara meluas untuk mengubah dan menapis strim data.
Pilih operator berdasarkan keperluan aliran data anda. Gunakan partition untuk membelah, combineLatestWith untuk penyegerakan dan groupBy untuk pengkategorian.
Ya, anda boleh merantai operator ini untuk membina aliran kerja yang kompleks, seperti menggabungkan partition dengan kembangan untuk logik lanjutan.
Mempelajari lima operator RxJS ini akan membantu anda menulis kod reaktif yang lebih bersih dan cekap. Mula bereksperimen dengan contoh ini dan lihat aplikasi Angular anda menjadi lebih dinamik dan berkuasa!
Atas ialah kandungan terperinci Buka Potensi Penuh Angular Dengan Pengendali xJS Ini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
git undo menyerahkan komit
Bagaimana untuk membuka akaun dengan mata wang u
Mengapa Windows tidak boleh mengakses laluan peranti atau fail yang ditentukan
freelaunchbar
Apakah kaedah penghasilan penghasilan animasi html5?
Platform dagangan mata wang maya
Penyelesaian kepada gmail disekat
Apakah masalah dengan menggunakan php
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
