درک RxJS و Observables در Angular: راهنمای مبتدی دوستانه

Summarize this content to 400 words in Persian Lang
RxJS (افزونه‌های واکنش‌گرا برای جاوا اسکریپت) یک کتابخانه قدرتمند برای مدیریت جریان‌های داده ناهمزمان در جاوا اسکریپت است. اگر در RxJS تازه کار هستید یا برای درک مفاهیمی مانند Observables، Promises و Operators مشکل دارید، این راهنما آنها را گام به گام برای شما ساده می کند.

RxJS چیست؟

RxJS راهی برای کار با جریان های داده ناهمزمان ارائه می دهد. این جزء اصلی برنامه های Angular است که به طور گسترده برای مدیریت رویدادها، درخواست های HTTP و موارد دیگر استفاده می شود. RxJS حول محور می چرخد قابل مشاهده، یک ساختار داده ای که مقادیر متعددی را در طول زمان منتشر می کند.این امکان مدیریت بهتر جریان های داده ناهمزمان مانند:

تماس های API
به روز رسانی داده ها در زمان واقعی
تعاملات کاربر
جریان های رویداد

چرا RxJS در Angular؟برنامه های Angular به طور گسترده از RxJS برای مدیریت استفاده می کنند:

درخواست های HTTP (به عنوان مثال، HttpClient)
مدیریت رویداد
فرم های واکنشی
ارتباط مؤلفه

RxJS اپراتورهایی مانند نقشه، فیلتر، ادغام و موارد دیگر را برای تبدیل، ترکیب و کنترل موثر جریان های داده ارائه می دهد.

قابل مشاهده در مقابل وعده

هر دو Observables و Promises برای برنامه‌نویسی ناهمزمان استفاده می‌شوند، اما تفاوت‌های مشخصی دارند:

ویژگی
قابل مشاهده
قول بده

ارزش های چندگانه
می تواند چندین مقدار را در طول زمان منتشر کند.
یک مقدار واحد (حل شده یا رد شده) را منتشر می کند.

اعدام تنبل
فقط با مشترک شدن شروع می شود.
بلافاصله پس از تعریف شروع می شود.

لغو
پشتیبانی از لغو از طریق unsubscribe().
پس از شروع نمی توان آن را لغو کرد.

اپراتورها
پشتیبانی از عملگرهای قدرتمند برای تبدیل.
عملکرد محدود

چرا Observables را انتخاب کنیم؟

قابل مشاهده ها در مقایسه با Promises انعطاف پذیری بیشتری دارند:

انتشار چندگانه: آنها می توانند دنباله ای از مقادیر را منتشر کنند که برای سناریوهایی مانند به روز رسانی داده های زنده ایده آل است.

اعدام تنبل: می‌توانید زمان شروع Observable را کنترل کنید.

لغو: در صورت عدم نیاز به داده، با لغو اشتراک در منابع صرفه جویی کنید.

مفاهیم کلیدی در RxJS

قبل از ورود به کد، اجازه دهید چند اصطلاح مهم را درک کنیم:

1. مشاهده پذیرهای سرد در مقابل گرم:

مشاهدات سرد: شروع به تولید مقادیر فقط زمانی که مشترک هستید.

موارد قابل مشاهده داغ: بدون در نظر گرفتن اشتراک، فوراً شروع به تولید مقادیر کنید.

2. چندپخشی: به چندین مشترک اجازه می دهد تا جریان داده یکسانی را به اشتراک بگذارند.

3. اپراتورها: توابعی که به شما امکان می دهد جریان ها را تبدیل، فیلتر یا ترکیب کنید.

راه اندازی RxJS در Angular

برای شروع استفاده از RxJS در یک پروژه Angular:

1. Angular CLI را نصب کنید:

npm install -g @angular/cli

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. یک برنامه Angular جدید ایجاد کنید:

ng new rxjs-demo
cd rxjs-demo

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. RxJS را نصب کنید:Angular در حال حاضر شامل RxJS است، اما در صورت نیاز می توانید آن را نصب یا به روز کنید:

npm install rxjs

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مثال: قابل مشاهده در مقابل وعده

در اینجا یک مقایسه ساده برای نشان دادن رفتار Observables و Promises آورده شده است:

استفاده از Promise

const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘Promise resolved’);
}, 2000);
});

promise.then((value) => console.log(value));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خروجی:

Promise resolved

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با استفاده از Observable

import { Observable } from ‘rxjs’;

const observable = new Observable((observer) => {
setTimeout(() => {
observer.next(‘Observable emitted value’);
observer.complete();
}, 2000);
});

observable.subscribe({
next: (value) => console.log(value),
complete: () => console.log(‘Observable complete’),
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خروجی:

Observable emitted value
Observable complete

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مثال واقعی: درخواست های HTTP در Angular

آنگولار HttpClient به طور یکپارچه با Observables برای رسیدگی به درخواست های API کار می کند.

1. وارد کردن HttpClientModule:آن را اضافه کنید app.module.ts:

import { HttpClientModule } from ‘@angular/common/http’;

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. یک درخواست HTTP GET ایجاد کنید:

import { HttpClient } from ‘@angular/common/http’;
import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
template: “,
})
export class AppComponent {
posts: any[] = [];

constructor(private http: HttpClient) {
this.http.get<any[]>(‘https://jsonplaceholder.typicode.com/posts’)
.subscribe((data) => {
this.posts = data;
});
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مفاهیم کلیدی RxJS توضیح داده شده است

1. اشتراک در Observablesبرای مصرف داده‌های یک Observable، باید مشترک شوید:

observable.subscribe({
next: value => console.log(value),
error: err => console.error(err),
complete: () => console.log(‘Done!’),
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. Error Handling

خطاها را به خوبی در جریان ها مدیریت کنید:

وارد کردن { catchError } از 'rxjs/operators';

observable.pipe(
catchError(error => {
console.error(‘Error occurred:’, error);
return of(‘Fallback value’);
})
).subscribe(data => console.log(data));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. لغو اشتراک

برای جلوگیری از نشت حافظه، همیشه اشتراک Observables را لغو کنید:

const subscription = observable.subscribe(data => console.log(data));
subscription.unsubscribe();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اپراتورهای کلیدی در RxJS

اپراتورها قلب RxJS هستند. در اینجا برخی از موارد رایج استفاده می شود:

map: داده ها را تبدیل می کند.

import { of } from ‘rxjs’;
import { map } from ‘rxjs/operators’;

of(1, 2, 3)
.pipe(map((x) => x * 2))
.subscribe((value) => console.log(value));
// Output: 2, 4, 6

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

filter: مقادیر را بر اساس یک شرط فیلتر می کند.

import { filter } from ‘rxjs/operators’;

of(1, 2, 3, 4, 5)
.pipe(filter((x) => x % 2 === 0))
.subscribe((value) => console.log(value));
// Output: 2, 4

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

take: تعداد مقادیر منتشر شده را محدود می کند.

import { take } from ‘rxjs/operators’;

of(1, 2, 3, 4, 5)
.pipe(take(3))
.subscribe((value) => console.log(value));
// Output: 1, 2, 3

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بهترین شیوه ها

1. لغو اشتراک برای جلوگیری از نشت حافظه:همیشه زمانی که Observables دیگر مورد نیاز نیست اشتراک خود را لغو کنید:

import { Subscription } from ‘rxjs’;

let subscription: Subscription = myObservable.subscribe();
subscription.unsubscribe();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. از AsyncPipe در قالب ها استفاده کنید:برای جلوگیری از اشتراک دستی، از Angular استفاده کنید AsyncPipe:

*ngIf=”data$ | async as data”>
{{ data }}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. ترکیب عملگرها برای منطق پیچیده:چند عملگر زنجیره ای برای تبدیل های پیچیده:

import { of } from ‘rxjs’;
import { map, filter } from ‘rxjs/operators’;

of(1, 2, 3, 4, 5)
.pipe(
filter((x) => x % 2 === 0),
map((x) => x * 10)
)
.subscribe((value) => console.log(value));
// Output: 20, 40

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

استفاده پیشرفته از RxJS: تبدیل ها، اپراتورها و بهترین روش ها

در دنیای برنامه نویسی واکنشی، RxJS (افزونه های واکنشی برای جاوا اسکریپت) توسعه دهندگان را قادر می سازد تا جریان های داده ناهمزمان را با دقت و انعطاف پذیری مدیریت کنند. همانطور که عمیق تر می شویم، بررسی خواهیم کرد که چگونه لوله و اپراتورها به ما کمک می کنند تا داده ها را به طور موثر پردازش و تبدیل کنیم.

نقش پایپ در RxJS

یک لوله در RxJS مشابه خط مونتاژ است، جایی که داده ها به طور متوالی از طریق یک سری عملیات جریان می یابد. این مفهوم با استفاده از pipe روش، به توسعه دهندگان اجازه می دهد:

اصلاح داده ها: تبدیل داده های خام به فرمت مناسب برای پردازش بیشتر.

فیلتر مقادیر ناخواسته: از شرایط برای حذف اطلاعات نامربوط استفاده کنید.

اعمال منطق: عملیات سفارشی را برای ساده کردن مدیریت داده ها ترکیب کنید.

مثال: راه اندازی یک لوله اصلی

import { of } from ‘rxjs’;
import { map, filter } from ‘rxjs/operators’;

const numbers$ = of(1, 2, 3, 4, 5);

numbers$
.pipe(
filter((n) => n % 2 === 0), // Only even numbers
map((n) => n * 10) // Multiply by 10
)
.subscribe(console.log); // Output: 20, 40

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اینجا، filter اعداد فرد را استثنا نمی کند و map مقادیر باقی مانده را تبدیل می کند.

تحولات: اپراتورهای کلیدی در عمل

RxJS تعداد زیادی از اپراتورها را برای تبدیل، دستکاری و مدیریت جریان های داده ارائه می دهد. بیایید چند مورد انتقادی را بررسی کنیم:

1. اپراتور نقشه

را map عملگر هر مقدار ساطع شده توسط یک قابل مشاهده را تغییر می دهد. این شبیه به جاوا اسکریپت است Array.prototype.map.

import { map } from ‘rxjs/operators’;

source$
.pipe(map((value) => value * 2))
.subscribe((val) => console.log(val));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، هر مقدار در جریان منبع قبل از انتشار دو برابر می شود.

2. روی اپراتور ضربه بزنید

را tap اپراتور به شما اجازه می دهد تا عوارض جانبی مانند ورود به سیستم یا اشکال زدایی را بدون تأثیر بر جریان داده انجام دهید.

import { tap } from ‘rxjs/operators’;

source$
.pipe(
tap((value) => console.log(‘Before processing:’, value)),
map((value) => value * 2),
tap((value) => console.log(‘After processing:’, value))
)
.subscribe();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

استفاده از موارد برای tap شامل ورود به سیستم، تجزیه و تحلیل، یا بازرسی موقت مقادیر است.

3. رسیدگی به خطا در خطوط لوله

خطا در برنامه نویسی واکنشی می تواند کل خط لوله را متوقف کند. RxJS اپراتورهایی مانند catchError و retry برای مدیریت زیبا شکست ها

import { of, throwError } from ‘rxjs’;
import { catchError, retry } from ‘rxjs/operators’;

const source$ = throwError(‘Error occurred!’);

source$
.pipe(
retry(2), // Retry twice before failing
catchError((err) => of(‘Fallback value’)) // Provide a fallback
)
.subscribe(console.log);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، خط لوله دو بار دوباره تلاش می‌کند و سپس به مقدار پیش‌فرض برمی‌گردد.

بهترین روش ها برای RxJS

خوانایی خطوط لوله: منطق پیچیده را به خطوط لوله کوچکتر و مدولار تقسیم کنید تا خوانایی و قابلیت نگهداری را افزایش دهید.

به حداقل رساندن عوارض جانبی: استفاده کنید tap از تغییر حالت مشترک در خطوط لوله اجتناب کنید.

خطاها را با ظرافت مدیریت کنید: همیشه خطاهای احتمالی را با اپراتورهای رسیدگی به خطا در نظر بگیرید.

اپراتورهای ایجاد اهرم: از عملگرهایی مانند استفاده کنید from و of برای ایجاد جریان های کارآمد

بهینه سازی لوله: یک سناریوی عملی

بیایید یک مثال عملی از پردازش داده های کاربر را در نظر بگیریم. ما جریانی از جزئیات کاربر داریم و می‌خواهیم نام‌های کاربری را استخراج کنیم، بر اساس معیارهای خاص فیلتر کنیم و نتایج را ثبت کنیم.

import { from } from ‘rxjs’;
import { filter, map, tap } from ‘rxjs/operators’;

const users$ = from([
{ id: 1, name: ‘Alice’, age: 25 },
{ id: 2, name: ‘Bob’, age: 30 },
{ id: 3, name: ‘Charlie’, age: 35 }
]);

users$
.pipe(
filter((user) => user.age > 30), // Select users older than 30
map((user) => user.name), // Extract usernames
tap((name) => console.log(‘Selected user:’, name)) // Log usernames
)
.subscribe();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

RxJS یک ابزار قدرتمند برای مدیریت عملیات ناهمزمان است، اما پتانسیل واقعی آن در درک و استفاده موثر از اپراتورهای آن نهفته است. با طراحی خطوط لوله شفاف و اعمال نفوذ اپراتورهایی مانند map، filter، و tap، توسعه دهندگان می توانند سیستم های واکنشی قوی و قابل نگهداری بسازند.

همانطور که بر این مفاهیم تسلط دارید، الگوهای پیشرفته ای مانند بازیابی خطا، چندپخشی و اپراتورهای سفارشی را بررسی کنید تا مهارت های RxJS خود را بیشتر ارتقا دهید.

استفاده پیشرفته از RxJS: تبدیل ها، اپراتورها و سناریوهای عملی

RxJS یک کتابخانه قدرتمند برای مدیریت جریان داده های ناهمزمان در جاوا اسکریپت است. در حالی که قبلا خطوط لوله و اپراتورهای اصلی را بررسی کرده بودیم، بیایید به سناریوهای پیشرفته مانند یکپارچه سازی جریان های مبتنی بر رویداد، مدیریت تعاملات DOM و استفاده از fromEvent اپراتور

تعاملات DOM با RxJS

یکی از کاربردی ترین برنامه های RxJS مدیریت تعاملات کاربر در زمان واقعی است. برای مثال، می‌توانیم رویدادهای DOM را با استفاده از آن به جریان‌های قابل مشاهده تبدیل کنیم fromEvent اپراتور این ما را قادر می‌سازد تا تغییرات ورودی، کلیک‌های دکمه‌ها و سایر رویدادهای DOM را به صورت واکنشی مدیریت کنیم.

مثال: استفاده از fromEvent برای ثبت تغییرات ورودی

تصور کنید یک فیلد ورودی داریم که در آن کاربران یک عبارت جستجو را تایپ می کنند و ما می خواهیم ورودی آنها را در زمان واقعی ثبت کنیم. در اینجا نحوه دستیابی به این امر آورده شده است:

import { fromEvent } from ‘rxjs’;
import { map, debounceTime } from ‘rxjs/operators’;

// Reference the input element
const searchInput = document.getElementById(‘search’);

// Create an observable for the input’s ‘input’ event
const searchObservable = fromEvent(searchInput, ‘input’)
.pipe(
map((event) => event.target.value), // Extract the input value
debounceTime(300) // Delay emissions for better performance
);

// Subscribe to the observable
searchObservable.subscribe((value) => {
console.log(‘Search query:’, value);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

درک کردن fromEvent

را fromEvent عملگر یک رویداد DOM را به یک قابل مشاهده تبدیل می کند. این به ما امکان می دهد با رویدادهایی مانند کلیک ها، فشار دادن کلیدها یا تغییرات ورودی به عنوان جریان داده کار کنیم. در اینجا خلاصه ای از مزایای آن آورده شده است:

به روز رسانی در زمان واقعی: تعاملات کاربر را فوراً پردازش کنید.

سهولت ادغام: یکپارچه با عناصر DOM موجود کار می کند.

خطوط لوله انعطاف پذیر: با عملگرهایی مانند ترکیب کنید map، filter، و debounceTime برای ایجاد رفتارهای پویا

مدیریت کلیک روی دکمه ها

بیایید مثال را با افزودن یک دکمه که مقدار ورودی فعلی را ارسال می کند، تقویت کنیم.

// Reference the button element
const submitButton = document.getElementById(‘submit’);

// Create an observable for the button’s ‘click’ event
const buttonClickObservable = fromEvent(submitButton, ‘click’);

// Combine with the input observable
buttonClickObservable
.pipe(
map(() => searchInput.value) // Get the current input value on click
)
.subscribe((value) => {
console.log(‘Submitted value:’, value);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

متغیرهای قالب و ViewChild در انگولار

هنگام کار با Angular، اغلب نیاز داریم که عناصر DOM را به روشی ساختاریافته ارجاع دهیم. با استفاده از ViewChild و متغیرهای قالب، ما به راحتی می توانیم منابع عناصر را برای برنامه نویسی واکنشی جذب کنیم.

مثال: گرفتن منابع عنصر

اینجا، ViewChild برای ارجاع به عناصر DOM تعریف شده در قالب استفاده می شود. مشاهده پذیرها هر دو رویداد ورودی و کلیک را مدیریت می کنند.

خوراکی های کلیدی

Lazy Initialization: مشاهده پذیر ایجاد شده از fromEvent مقادیری را تا زمانی که مشترک نشوند، منتشر نمی کنند، و این امر استفاده کارآمد از منابع را تضمین می کند.

تبدیل های انعطاف پذیر: استفاده از عملگرهایی مانند map، filter، و debounceTime، می توانید جریان داده را مطابق با نیازهای برنامه خود سفارشی کنید.

بازخورد بلادرنگ: برنامه نویسی واکنشی امکان به روز رسانی های فوری را بر اساس تعاملات کاربر می دهد.

نتیجه گیری

ادغام RxJS با عناصر DOM از طریق fromEvent مدیریت رویداد را ساده می کند در حالی که دستکاری های پیشرفته جریان داده را فعال می کند. از گرفتن ورودی های جستجو گرفته تا مدیریت کلیک روی دکمه، RxJS یک راه بصری و کارآمد برای مدیریت تعاملات کاربر ارائه می دهد.

بهینه سازی مدیریت ورودی کاربر با اپراتورهای RxJS: بینش های عملی

قابلیت تکمیل خودکار به یک ویژگی اساسی در برنامه‌های کاربردی وب مدرن تبدیل شده است و با پیش‌بینی و پیشنهاد گزینه‌های مرتبط هنگام تایپ کاربران، تجربه کاربر را افزایش می‌دهد. با استفاده از اپراتورهای RxJS مانند map و switchMap، توسعه دهندگان می توانند جریان های پیچیده داده های ناهمزمان را به طور موثر مدیریت کنند. در اینجا یک تفکیک گام به گام از نحوه استفاده از این اپراتورها برای ایجاد عملکرد تکمیل خودکار قوی آورده شده است:

1. درک مسئله

هنگام ایجاد یک ویژگی تکمیل خودکار:

کاربران در یک فیلد ورودی تایپ می‌کنند و برای واکشی پیشنهادها، تماس‌های API را راه‌اندازی می‌کنند.
اگر کاربر به سرعت تایپ کند، چندین تماس API برقرار می‌شود که منجر به پاسخ‌های غیرضروری و قدیمی می‌شود.
هدف این است که اطمینان حاصل شود که فقط آخرین ورودی یک تماس API را آغاز می کند و درخواست های قبلی را لغو می کند.

2. نقش RxJS در بهینه سازی مدیریت ورودی

اپراتورهای کلیدی:

debounceTime:

قبل از ارسال یک مقدار، برای زمان مشخصی منتظر می ماند و تعداد رویدادهای ارسال شده را در حین تایپ سریع کاهش می دهد.

distinctUntilChanged:

اطمینان حاصل می کند که جریان فقط مقادیر متوالی متمایز را منتشر می کند، بدون توجه به موارد تکراری.

switchMap:

هنگامی که یک مقدار جدید منتشر می شود، مشاهده پذیر قبلی را لغو می کند و اطمینان حاصل می کند که فقط آخرین درخواست پردازش می شود.

3. پیاده سازی تکمیل خودکار با RxJS

در اینجا توضیح اسکریپت و کد ساخت یک سیستم تکمیل خودکار آمده است:

توضیح گام به گام:

جریان ورودی:

ورودی کاربر را گرفته و با استفاده از آن به جریانی از رویدادها تبدیل کنید fromEvent.

منحرف کننده:

a اضافه کنید debounceTime برای تأخیر در پردازش تا زمانی که کاربر برای لحظه ای کوتاه تایپ را متوقف کند.

سوئیچینگ مشاهده پذیرها:

استفاده کنید switchMap برای لغو تماس های قبلی API در صورت شناسایی ورودی جدید.

واکشی پیشنهادات:

هر ورودی معتبر یک تماس API را راه‌اندازی می‌کند و پیشنهادات را به کاربر برمی‌گرداند.

مثال کد:

import { fromEvent } from ‘rxjs’;
import { debounceTime, distinctUntilChanged, switchMap, filter } from ‘rxjs/operators’;

// HTML Input Element
const inputField = document.getElementById(‘search-input’);

// Stream of Input Events
const inputStream = fromEvent(inputField, ‘input’);

inputStream.pipe(
// Extract the input value
map(event => event.target.value),

// Ignore empty or unchanged inputs
filter(value => value.trim() !== ”),
distinctUntilChanged(),

// Delay for user convenience
debounceTime(300),

// Cancel previous API calls and fetch new suggestions
switchMap(searchTerm => fetchSuggestions(searchTerm))
).subscribe(suggestions => {
displaySuggestions(suggestions);
});

// API Call Function
function fetchSuggestions(query) {
return fetch(`https://api.example.com/suggestions?q=${query}`)
.then(response => response.json());
}

// Display Suggestions
function displaySuggestions(suggestions) {
const suggestionsBox = document.getElementById(‘suggestions’);
suggestionsBox.innerHTML = suggestions
.map(suggestion => `${suggestion}`)
.join(”);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. مزایای استفاده از switchMap

کارایی: مطمئن می شود فقط آخرین درخواست API فعال است.

عملکرد: از پردازش غیر ضروری داده های قدیمی جلوگیری می کند.

مقیاس پذیری: مناسب برای برنامه هایی با تعامل کاربر بالا.

5. مورد استفاده عملی

بیایید یک مثال را در نظر بگیریم:سناریو: کاربر تایپ می کند M-u-k-e-s-h در یک فیلد ورودی

با هر ضربه کلید، debounceTime تضمین می کند که تایپ سریع API را با درخواست ها پر نمی کند.

distinctUntilChanged از تماس های تکراری برای ورودی های بدون تغییر مانند بک اسپیس های مکرر جلوگیری می کند.

switchMap درخواست‌های قدیمی را لغو می‌کند و فقط آخرین درخواست‌ها را تکمیل می‌کند.

6. گسترش عملکرد

برای بهبود تجربه تکمیل خودکار:

یک ظاهر طراحی سفارشی: CSS را برای استایل دادن به کادر پیشنهاد اضافه کنید.

ناوبری صفحه کلید: پیمایش با کلید پیکان را برای پیشنهادات انتخابی فعال کنید.

برای انتخاب کلیک کنید: به کاربران اجازه دهید تا روی پیشنهادات برای تکمیل خودکار فیلد ورودی کلیک کنند.

نتیجه گیری

این رویکرد بهینه نه تنها تعامل کاربر را ساده می کند، بلکه عملکرد برنامه را به طور قابل توجهی بهبود می بخشد. با تسلط بر عملگرهای RxJS مانند debounceTime و switchMap، توسعه دهندگان می توانند ویژگی هایی بسازند که هم بصری و هم کارآمد باشند. اجرای این تکنیک ها را شروع کنید تا برنامه های خود را به سطح بعدی ببرید!

مدیریت اشتراک پیشرفته در Angular

مدیریت اشتراک‌ها در برنامه‌های Angular می‌تواند مشکل باشد، اما برای جلوگیری از نشت حافظه و اطمینان از عملکرد بهینه بسیار مهم است. بیایید به برخی از مفاهیم پیشرفته که با مثال های عملی نشان داده شده اند، بپردازیم.

لغو اشتراک آسان شد

هنگامی که شما مشترک یک قابل مشاهده هستید، ضروری است زمانی که جزء از بین می رود، اشتراک خود را لغو کنید. عدم انجام این کار می تواند منجر به نشت حافظه، به خصوص در برنامه های بزرگتر شود. Angular قلاب‌های چرخه حیات را مانند آن فراهم می‌کند ngOnDestroy برای مدیریت این

در اینجا یک پیاده سازی معمولی وجود دارد:

import { Component, OnDestroy } from ‘@angular/core’;
import { Subscription } from ‘rxjs’;

@Component({
selector: ‘app-example’,
templateUrl: ‘./example.component.html’,
styleUrls: [‘./example.component.css’] })
export class ExampleComponent implements OnDestroy {
private subscription: Subscription = new Subscription();

ngOnInit() {
this.subscription.add(
someObservable.subscribe(data => {
console.log(data);
})
);
}

ngOnDestroy() {
this.subscription.unsubscribe();
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این رویکرد تضمین می‌کند که همه اشتراک‌ها به subscription هنگامی که جزء از بین می رود، شی پاک می شود.

مشاهده پذیرهای سرد در مقابل گرم

قابل مشاهده ها یا هستند سرد یا داغ.

مشاهدات سرد فقط زمانی که مشترکی وجود داشته باشد داده تولید کند. هر اشتراک یک اجرای جدید را آغاز می کند.

قابل مشاهده های داغ به اشتراک گذاشتن اجرای یکسان در بین همه مشترکین، آنها را در سناریوهایی که داده ها باید پخش شوند کارآمد می کند.

مثال:

import { of } from ‘rxjs’;

const coldObservable = of(‘Cold Data’);
coldObservable.subscribe(data => console.log(data)); // Executes for each subscription

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای یک قابل مشاهده داغ، می توانید از عملگرهایی مانند استفاده کنید share یا publish.

مدیریت حافظه با موضوعات

سوژه ها ابزارهای همه کاره ای در RxJS هستند که هم به عنوان یک مشاهده پذیر و هم به عنوان ناظر عمل می کنند. آنها در مدیریت اشتراک های مشترک بسیار موثر هستند.

مثال الف Subject:

import { Subject } from ‘rxjs’;

const subject = new Subject<number>();

subject.subscribe(data => console.log(‘Subscriber 1:’, data));
subject.subscribe(data => console.log(‘Subscriber 2:’, data));

subject.next(1); // Both subscribers will receive the value

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اجتناب از اعدام های متعدد با share

در مواردی که چندین اشتراک نیاز به اشتراک گذاری یک منبع دارند، share اپراتور به جلوگیری از اعدام های اضافی کمک می کند. یک قابل مشاهده سرد را به گرم تبدیل می کند.

import { interval } from ‘rxjs’;
import { share, take } from ‘rxjs/operators’;

const sharedObservable = interval(1000).pipe(take(5), share());

sharedObservable.subscribe(data => console.log(‘Subscriber 1:’, data));
setTimeout(() => {
sharedObservable.subscribe(data => console.log(‘Subscriber 2:’, data));
}, 2000);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پخش چندگانه با BehaviorSubject و ReplaySubject

برای پخش داده ها به چندین مشترک و اطمینان از دریافت آخرین یا تمام مقادیر منتشر شده:

BehaviorSubject آخرین مقدار منتشر شده را حفظ می کند.

ReplaySubject تمام مقادیر منتشر شده را برای مشترکین دیررس ذخیره می کند.

مثال:

import { BehaviorSubject, ReplaySubject } from ‘rxjs’;

// BehaviorSubject example
const behaviorSubject = new BehaviorSubject(‘Initial Value’);
behaviorSubject.subscribe(data => console.log(‘Subscriber 1:’, data));
behaviorSubject.next(‘Updated Value’);

// ReplaySubject example
const replaySubject = new ReplaySubject(2); // Stores the last two values
replaySubject.next(‘Value 1’);
replaySubject.next(‘Value 2’);
replaySubject.next(‘Value 3’);
replaySubject.subscribe(data => console.log(‘Subscriber:’, data));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بهترین روش ها برای لغو اشتراک

با استفاده از takeUntil: روشی تمیز و مؤثر برای لغو اشتراک از چندین مشاهده پذیر.

زاویه ای async لوله: به طور خودکار اشتراک و لغو اشتراک در قالب ها را کنترل می کند.

مثال از takeUntil:

import { Component, OnDestroy } from ‘@angular/core’;
import { Subject } from ‘rxjs’;
import { takeUntil } from ‘rxjs/operators’;

@Component({
selector: ‘app-example’,
template: `Example works!`
})
export class ExampleComponent implements OnDestroy {
private destroy$ = new Subject<void>();

ngOnInit() {
someObservable.pipe(takeUntil(this.destroy$)).subscribe(data => console.log(data));
}

ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

استفاده از اپراتورهای Multicasting

برای مدیریت کارآمد چندین مشترک، RxJS اپراتورهای چند پخشی را ارائه می دهد multicast، share، و shareReplay.

مثال با shareReplay:

import { interval } from ‘rxjs’;
import { shareReplay, take } from ‘rxjs/operators’;

const observable = interval(1000).pipe(take(5), shareReplay(2));

observable.subscribe(data => console.log(‘Subscriber 1:’, data));
setTimeout(() => {
observable.subscribe(data => console.log(‘Subscriber 2:’, data));
}, 3000);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

مدیریت کارآمد قابل مشاهده ها و اشتراک ها کلید ایجاد برنامه های Angular قوی است. با استفاده از ابزارهایی مانند Subjects، share، و takeUntil، توسعه دهندگان می توانند از دام های رایج مانند نشت حافظه و اعدام های اضافی جلوگیری کنند. چه بر روی پروژه های کوچک کار کنید و چه برنامه های کاربردی در مقیاس بزرگ، این استراتژی ها مقیاس پذیری و نگهداری را تضمین می کنند.

این یک جدول خلاصه است:

مفهوم
توضیح

قابل مشاهده
جریانی از داده ها که در طول زمان قابل مشاهده است.

موضوع
نوع خاصی از Observable که امکان فشار و دریافت داده ها را فراهم می کند.

اپراتورهای RxJS
توابع مانند map()، mergeMap()، switchMap() که جریان های داده را تبدیل یا ترکیب می کنند.

اشتراک
برای شروع اجرای یک Observable و مدیریت داده ها یا خطاهایی که منتشر می کند استفاده می شود.

ادغام زاویه ای
RxJS در Angular برای مدیریت رویدادهای ناهمزمان و جریان های داده، از جمله درخواست های HTTP استفاده می شود.

امیدوارم این کمک کند. کد نویسی مبارک!

   npm install -g @angular/cli

   ng new rxjs-demo
   cd rxjs-demo

   npm install rxjs

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise resolved');
  }, 2000);
});

promise.then((value) => console.log(value));

Promise resolved

import { Observable } from 'rxjs';

const observable = new Observable((observer) => {
  setTimeout(() => {
    observer.next('Observable emitted value');
    observer.complete();
  }, 2000);
});

observable.subscribe({
  next: (value) => console.log(value),
  complete: () => console.log('Observable complete'),
});

Observable emitted value
Observable complete

   import { HttpClientModule } from '@angular/common/http';

   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule, HttpClientModule],
     providers: [],
     bootstrap: [AppComponent],
   })
   export class AppModule {}

   import { HttpClient } from '@angular/common/http';
   import { Component } from '@angular/core';

   @Component({
     selector: 'app-root',
     template: ``,
   })
   export class AppComponent {
     posts: any[] = [];

     constructor(private http: HttpClient) {
       this.http.get<any[]>('https://jsonplaceholder.typicode.com/posts')
         .subscribe((data) => {
           this.posts = data;
         });
     }
   }

observable.subscribe({
  next: value => console.log(value),
  error: err => console.error(err),
  complete: () => console.log('Done!'),
});

observable.pipe(
  catchError(error => {
    console.error('Error occurred:', error);
    return of('Fallback value');
  })
).subscribe(data => console.log(data));

const subscription = observable.subscribe(data => console.log(data));
subscription.unsubscribe();

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

   of(1, 2, 3)
     .pipe(map((x) => x * 2))
     .subscribe((value) => console.log(value));
   // Output: 2, 4, 6

   import { filter } from 'rxjs/operators';

   of(1, 2, 3, 4, 5)
     .pipe(filter((x) => x % 2 === 0))
     .subscribe((value) => console.log(value));
   // Output: 2, 4

   import { take } from 'rxjs/operators';

   of(1, 2, 3, 4, 5)
     .pipe(take(3))
     .subscribe((value) => console.log(value));
   // Output: 1, 2, 3

   import { Subscription } from 'rxjs';

   let subscription: Subscription = myObservable.subscribe();
   subscription.unsubscribe();

   
 *ngIf="data$ | async as data">
     {{ data }}
   

   import { of } from 'rxjs';
   import { map, filter } from 'rxjs/operators';

   of(1, 2, 3, 4, 5)
     .pipe(
       filter((x) => x % 2 === 0),
       map((x) => x * 10)
     )
     .subscribe((value) => console.log(value));
   // Output: 20, 40

import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

const numbers$ = of(1, 2, 3, 4, 5);

numbers$
  .pipe(
    filter((n) => n % 2 === 0), // Only even numbers
    map((n) => n * 10)         // Multiply by 10
  )
  .subscribe(console.log); // Output: 20, 40

import { map } from 'rxjs/operators';

source$
  .pipe(map((value) => value * 2))
  .subscribe((val) => console.log(val));

import { tap } from 'rxjs/operators';

source$
  .pipe(
    tap((value) => console.log('Before processing:', value)),
    map((value) => value * 2),
    tap((value) => console.log('After processing:', value))
  )
  .subscribe();

import { of, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

const source$ = throwError('Error occurred!');

source$
  .pipe(
    retry(2), // Retry twice before failing
    catchError((err) => of('Fallback value')) // Provide a fallback
  )
  .subscribe(console.log);

import { from } from 'rxjs';
import { filter, map, tap } from 'rxjs/operators';

const users$ = from([
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
]);

users$
  .pipe(
    filter((user) => user.age > 30), // Select users older than 30
    map((user) => user.name),       // Extract usernames
    tap((name) => console.log('Selected user:', name)) // Log usernames
  )
  .subscribe();

import { fromEvent } from 'rxjs';
import { map, debounceTime } from 'rxjs/operators';

// Reference the input element
const searchInput = document.getElementById('search');

// Create an observable for the input's 'input' event
const searchObservable = fromEvent(searchInput, 'input')
  .pipe(
    map((event) => event.target.value), // Extract the input value
    debounceTime(300)                  // Delay emissions for better performance
  );

// Subscribe to the observable
searchObservable.subscribe((value) => {
  console.log('Search query:', value);
});

// Reference the button element
const submitButton = document.getElementById('submit');

// Create an observable for the button's 'click' event
const buttonClickObservable = fromEvent(submitButton, 'click');

// Combine with the input observable
buttonClickObservable
  .pipe(
    map(() => searchInput.value) // Get the current input value on click
  )
  .subscribe((value) => {
    console.log('Submitted value:', value);
  });

import { fromEvent } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap, filter } from 'rxjs/operators';

// HTML Input Element
const inputField = document.getElementById('search-input');

// Stream of Input Events
const inputStream = fromEvent(inputField, 'input');

inputStream.pipe(
  // Extract the input value
  map(event => event.target.value),

  // Ignore empty or unchanged inputs
  filter(value => value.trim() !== ''),
  distinctUntilChanged(),

  // Delay for user convenience
  debounceTime(300),

  // Cancel previous API calls and fetch new suggestions
  switchMap(searchTerm => fetchSuggestions(searchTerm))
).subscribe(suggestions => {
  displaySuggestions(suggestions);
});

// API Call Function
function fetchSuggestions(query) {
  return fetch(`https://api.example.com/suggestions?q=${query}`)
    .then(response => response.json());
}

// Display Suggestions
function displaySuggestions(suggestions) {
  const suggestionsBox = document.getElementById('suggestions');
  suggestionsBox.innerHTML = suggestions
    .map(suggestion => `
${suggestion}`)
    .join('');
}

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnDestroy {
  private subscription: Subscription = new Subscription();

  ngOnInit() {
    this.subscription.add(
      someObservable.subscribe(data => {
        console.log(data);
      })
    );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

import { of } from 'rxjs';

const coldObservable = of('Cold Data');
coldObservable.subscribe(data => console.log(data)); // Executes for each subscription

import { Subject } from 'rxjs';

const subject = new Subject<number>();

subject.subscribe(data => console.log('Subscriber 1:', data));
subject.subscribe(data => console.log('Subscriber 2:', data));

subject.next(1); // Both subscribers will receive the value

import { interval } from 'rxjs';
import { share, take } from 'rxjs/operators';

const sharedObservable = interval(1000).pipe(take(5), share());

sharedObservable.subscribe(data => console.log('Subscriber 1:', data));
setTimeout(() => {
  sharedObservable.subscribe(data => console.log('Subscriber 2:', data));
}, 2000);

import { BehaviorSubject, ReplaySubject } from 'rxjs';

// BehaviorSubject example
const behaviorSubject = new BehaviorSubject('Initial Value');
behaviorSubject.subscribe(data => console.log('Subscriber 1:', data));
behaviorSubject.next('Updated Value');

// ReplaySubject example
const replaySubject = new ReplaySubject(2); // Stores the last two values
replaySubject.next('Value 1');
replaySubject.next('Value 2');
replaySubject.next('Value 3');
replaySubject.subscribe(data => console.log('Subscriber:', data));

import { Component, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-example',
  template: `
Example works!
`
})
export class ExampleComponent implements OnDestroy {
  private destroy$ = new Subject<void>();

  ngOnInit() {
    someObservable.pipe(takeUntil(this.destroy$)).subscribe(data => console.log(data));
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

import { interval } from 'rxjs';
import { shareReplay, take } from 'rxjs/operators';

const observable = interval(1000).pipe(take(5), shareReplay(2));

observable.subscribe(data => console.log('Subscriber 1:', data));
setTimeout(() => {
  observable.subscribe(data => console.log('Subscriber 2:', data));
}, 3000);