تفسير الكائنات البرمجية في Angular2

前言

RxJs提供的核心是Observable对象，它是一个使用可观察数据序列实现组合异步和事件编程。
跟这个很类似的异步编程模型是Promise，Promise是基于状态变化的异步模型，一旦由等待状态进入成功或失败状态便不能再次修改，当状态变化时订阅者只能够拿到一个值；而Observable是基于序列的异步编程模型，随着序列的变化，订阅者可以持续不断的获取新的值。而且Promise只提供回话机制，并没有更多的操作来支持对结果的复杂处理，而Observable提供了多种多样的操作符，来处理运算结果，以满足复杂的应用逻辑。

在实际编程中，我们主要与三个对象打交道：Observable、observer、Subscription：

以一个元素的click事件为例看看如何使用Observable：

var clickStream = new Rx.Observable(observer => {
var handle = evt => observer.next(evt);
element.addEventListener('click', handle);
return () => element.removeEventListener('click', handle);
});
subscription = clickStream.subscribe(evt => {
console.log('onNext: ' + evt.id);
}, err => {
console.error('onError');
}, () => {
console.log('onComplete');
});
setTimeout(() => {
subscription.unsubscribe();
}, 1000);

إذا كان كل حدث يحتاج إلى هذا التغليف، فإنه سيكون أمرًا مزعجًا، لذا قدم RxJs لنا وظيفة مريحة Observable.fromEvent لربط الأحداث بسهولة.

عملاء الاتصال الشائع:concat،merge،combineLates وما إلى ذلك

التحويلات:map،flatMap، flattened يجب أن يتم استعراضها بشكل دقيق

التصفية:filter،distinctUltilChanges

تصنيف العملاء:Operators by Categories

معالجة الأخطاء:catch،retry،finally

التخفيف:debounce،throttle،sample،pausable

التقليل:buffer،bufferWithCount،bufferWithTime

للمعرفة كيفية استخدام عملاء Observable، يجب أن تتعلم كيفية قراءة الرسوم البيانية للسلسلة:

الشعاع يمثل السلسلة التي تتغير مع مرور الوقت، مثل النقر المستمر على عنصر، والنقاط تمثل التأثيرات الخارجية للسلسلة، مثل التسبب في انطلاق الحدث مرة واحدة لكل نقرة، والرقم في النقطة هو المعلومات التي تطلقها، مثل أن كل حدث ينطق بحدث يحتوي على معلومات حول هذه العملية.

للتعامل بفعالية مع Observable ومعالجة اللوجيك المعقد، يجب أن تتعلم استخدام العملاء التي توفرها. أنا أقسم العملاء إلى فئتين، العمليات السلسلة الواحدة والعمليات السلسلة المركبة، والعمليات السلسلة الواحدة هي العمليات التي تتم على سلسلة واحدة، والعمليات السلسلة المركبة هي العمليات التي تتم على سلسلتين أو أكثر، والعمليات السلسلة المركبة أكثر تعقيدًا بعض الشيء.

دعونا نبدأ بالنظر في عملية سلسلة واحدة، على سبيل المثال، باستخدام map.

عملية map هي تحويل المعلومات التي تطلقها السلسلة في كل مرة، مثل map في الشكل أعلاه، تضاعف القيمة المطلقة في كل مرة، لذا عند الاشتراك، تتلقى القيم المطلقة ليست 123 الأصلية ولكن 10 20 30 بعد التحويل. يمكن فهم عمليات Observable بشكل أفضل من خلال الرسم البياني للسلسلة.

دعونا الآن نرى عملية سلسلة مركبة، على سبيل المثال، باستخدام الجمع.

هدف عملية الجمع هو دمج سلسلتين مستقليتين في سلسلة واحدة. في البداية، تتقدم سلسلة 1 مع مرور الوقت، وتطلق a عند 100ms، وتطلق b عند 200ms، وتطلق c عند 300ms، ويتلقى مشتركوها abc الثلاثة عند 400ms؛ سلسلة 2 تطلق d عند 150ms، وتطلق e عند 250ms، وتطلق f عند 350ms، ويتلقى مشتركوها def الثلاثة داخل 400ms. أما السلسلة الجديدة بعد الجمع في 400ms تتلقى abcdef (لاحظ الترتيب).

فهم العمليات المعتادة:}

Observable.range：إطلاق سلسلة تحتوي على عدد معين من القيم

Observable.toArray: تحويل جميع القيم التي يتم إطلاقها في السلسلة عند اكتمالها إلى مصفوفة

Observable.flatMap: تحويل عناصر سلسلة الورود الأصلية إلى سلسلة جديدة، ودمج هذه السلسلة الجديدة في مكان العناصر في السلسلة الأصلية

Observable.startWith: سيقوم بتعيين القيمة الأولى لسلسلة Observable

Observable.combineLatest: مثل promiseAll، يتم تنفيذها فقط بعد أن يتحصل كل سلسلة على نتيجة

Observable.scan: يمكن تحقيق تجميع القيم التي يتم إطلاقها في السلسلة، يشبه reduce، حيث يقوم reduce بتجميع القيم الكاملة في السلسلة، وإرسال قيمة نهائية عند اكتمال السلسلة

Observable.sample: إذا كانت السلسلة مستمرة، يمكن أخذ عينة معينة منها

Observable.merge：جمع عدة سلاسل في سلسلة واحدة، يمكن استخدامها للـ OR

Observable.timestamp: يستطيع الحصول على وقت إطلاق كل قيمة من القيم التي يتم إطلاقها

Observable.distinctUntilChanged(compare, selector): selector يأخذ مفتاح用于 المقارنة،compare يُستخدم للمقارنة بين مفتاحين

Observable.takeWhile() إذا كان المعامل equals إلى false، فتوقف إطلاق البيانات

الخلاصة

هذا هو نهاية محتوى هذا المقال، نأمل أن تكون محتويات هذا المقال قد ساعدتكم في التعلم أو العمل، إذا كان لديكم أي استفسارات، يمكنكم ترك تعليقات للتفاعل.