مقالات طراحی سایت

اگر با فریم وورک انگولار کار کرده باشید حتما با مفهوم Observable در RxJs آشنا هستید.

در این مقاله میخواهیم بر روی نوع خاصی از Observable با نام Subject تمرکز کنیم.

Subjectها Observable هستند اما چیزی که آنها را کمی متفاوت میکند این است که آنها Observer هم هستند.

این جمله یعنی Subject میتواند هم دیتا emit کند، و هم قابلیت آنرا دارد که به آن subscribe شود. برای مثال:

let subject = new Subject<string>();
subject.subscribe((data) => {
 console.log("Subscriber 1 got data >>>>> "+ data);
});
subject.subscribe((data) => {
 console.log("Subscriber 2 got data >>>>> "+ data);
});
subject.next("Eureka");
// Console result:
// Subscriber 1 got data >>>>> Eureka
// Subscriber 2 got data >>>>> Eureka

Observableها متد next() ندارند. بنابراین اولین مزیت Subject این است که میتواند دیتا emit کند.

Subject ها چندکاره (multicast) هستند

دومین مزیت Subjectها این است که میتوان به آنها چندین بار subscribe کرد. به عبارت دیگر، آنها چندکاره هستند.

Subjectها مثل EventEmitter هستند: چندین listener میتوانند به آنها register شوند.

let subject = new Subject<string>();
subject.subscribe((data) => {
 console.log("Subscriber 1 got data >>>>> "+ data);
});
subject.subscribe((data) => {
 console.log("Subscriber 2 got data >>>>> "+ data);
});
subject.next("Eureka"); // Console result:
// Subscriber 1 got data >>>>> Eureka
// Subscriber 2 got data >>>>> Eureka 

درنتیجه، شما میتوانید در سرویس های خود از Subject استفاده کنید تا دیتا را fetch کند، و نتیجه را به تمامی کامپوننت هایی که به آن subscribe هستند ارسال کند

نکته ای که باید به آن توجه کنید این است که هرگز آبجکت Subject را مستقیما درون کامپوننت خود نیاورید. بجای آن نسخه Observable آنرا برگردانید.

 
// Don't do that or you subscribers will be able to "mess" with your // subject
getData(): Subject<Data> { 
 return this.subject;
}
// Do this instead:
getData(): Observable<Data> { 
 return this.subject.asObservable();
}
 

مثال بالا باعث میشود که کد شما امن تر شود.

Behavior Subject

Behavior Subject بسیار جذاب هستند. زمانی که شما به آن subscribe میکنید، آخرین مقدار emit شده را به شما میدهد.

تصور کنید به یک مجله subscribe کرده باشید، و بلافاصله آخرین نسخه چاپ شده را دریافت کنید.

// Behavior subjects need a first value
let subject = new BehaviorSubject<string>("First value");
subject.asObservable().subscribe((data) => {
 console.log("First subscriber got data >>>>> "+ data);
});
subject.next("Second value")
// Console result:
// First subscriber got data >>>>> First value
// First subscriber got data >>>>> Second value

با کمک Behavior Subject، مهم نیست چه وقت subscribe کنید، برای اینکه همیشه آخرین مقدار را دریافت خواهید کرد.

اما اگر شما بیشتر از آخرین مقدار emit شده را بخواهید؟

Replay Subject

Replay Subject میتواند مقادیر قبلی را در خود نگه دارد. بنابراین با subscribe میتوانید آن مقادیر را ببینید.

// We tell the ReplaySubject how many values should be kept in // history
let subject = new ReplaySubject<string>(2);
subject.next("First value");
subject.next("Second value");
subject.next("Third value");
subject.asObservable().subscribe((data) => {
 console.log("First subscriber got data >>>>> "+ data);
});
subject.next("Fourth value");
//Console result:
// First subscriber got data >>>>> Second value
// First subscriber got data >>>>> Third value
// First subscriber got data >>>>> Fourth value

در مثال بالا، Replay Subject دو مقدار آخر را در خود نگه داشته است. بنابراین، هربار که به آن subscribe میشود دو مقدار آخر بعلاوه مقدار جدید را برمیگرداند.

به نقل از: Angular Training