أهلاً بكم. في اتصال Omelnitsky سيرجي. منذ وقت ليس ببعيد ، قمت باستضافة دفق حول البرمجة التفاعلية ، حيث تحدثت عن عدم التزامن في JavaScript. اليوم أود أن ألخص هذه المادة.
لكن قبل أن نبدأ بالمادة الرئيسية ، نحتاج إلى تقديم مقدمة. لذا لنبدأ بالتعريفات: ما هي المكدس والصف؟
كومة هي مجموعة يتم استرداد عناصرها على أساس "ما يرد أخيرًا يصرف أولاً"
منعطف هي مجموعة يتم الحصول على عناصرها وفقًا لمبدأ (أولاً ما يرد أولاً يصرف أولاً) FIFO
حسنًا ، لنكمل.
JavaScript هي لغة برمجة ذات ترابط واحد. هذا يعني أنه يحتوي على مؤشر ترابط واحد فقط للتنفيذ ومكدس واحد حيث يتم وضع الوظائف في قائمة الانتظار للتنفيذ. لذلك ، يمكن لـ JavaScript إجراء عملية واحدة فقط في كل مرة ، بينما تنتظر العمليات الأخرى دورها في المكدس حتى يتم استدعاؤها.
مكدس المكالمات هي بنية بيانات تسجل ، بعبارات بسيطة ، معلومات حول المكان الذي نتواجد فيه في البرنامج. إذا قفزنا إلى دالة ، فإننا ندفع دخولها إلى أعلى المكدس. عندما نعود من دالة ، نخرج العنصر الأعلى من المكدس وينتهي بنا الأمر من حيث استدعينا هذه الوظيفة. هذا كل ما يمكن أن يفعله المكدس. والآن سؤال مثير جدا للاهتمام. كيف إذن يعمل عدم التزامن في JavasScript؟
في الواقع ، بالإضافة إلى المكدس ، تحتوي المتصفحات على قائمة انتظار خاصة للعمل مع ما يسمى WebAPI. سيتم تنفيذ الوظائف من قائمة الانتظار هذه بالترتيب فقط بعد مسح المكدس تمامًا. فقط بعد ذلك يتم وضعهم من قائمة الانتظار على المكدس للتنفيذ. إذا كان هناك عنصر واحد على الأقل في المكدس في الوقت الحالي ، فلن يتمكنوا من الوصول إلى المكدس. لهذا السبب ، غالبًا ما يكون استدعاء الوظائف عن طريق المهلة غير دقيق في الوقت المناسب ، نظرًا لأن الوظيفة لا يمكن أن تنتقل من قائمة الانتظار إلى المكدس أثناء امتلائها.
دعنا نلقي نظرة على المثال التالي ودعنا نستعرضه خطوة بخطوة. لنرى أيضًا ما يحدث في النظام.
console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
1) لم يحدث شيء حتى الآن. وحدة تحكم المتصفح نظيفة ، ومكدس المكالمات فارغ.
2) ثم يتم إضافة الأمر console.log ("مرحبا") إلى مكدس المكالمات.
3) وقد تم الوفاء به
4) ثم تتم إزالة console.log ("مرحبا") من مكدس المكالمات.
5) الآن دعنا ننتقل إلى الأمر setTimeout (الوظيفة cb1 () {…}). يتم إضافته إلى مكدس المكالمات.
6) يتم تنفيذ الأمر setTimeout (الوظيفة cb1 () {…}). ينشئ المستعرض مؤقتًا يعد جزءًا من واجهة برمجة تطبيقات الويب. سيتم إجراء العد التنازلي.
7) أكمل الأمر setTimeout (الوظيفة cb1 () {…}) عمله وتمت إزالته من مكدس الاستدعاءات.
8) يضاف الأمر console.log ('Bye') إلى مكدس الاستدعاءات.
9) يتم تنفيذ الأمر console.log ('Bye').
10) تتم إزالة الأمر console.log ("وداعا") من مكدس الاستدعاءات.
11) بعد انقضاء 5000 مللي ثانية على الأقل ، ينتهي المؤقت ويضع رد الاتصال cb1 في قائمة انتظار رد الاتصال.
12) تأخذ حلقة الحدث الوظيفة cb1 من قائمة انتظار رد الاتصال وتدفعها إلى مكدس الاستدعاءات.
13) يتم تنفيذ وظيفة cb1 وتضيف console.log ('cb1') إلى مكدس الاستدعاءات.
14) يتم تنفيذ الأمر console.log ('cb1').
15) تتم إزالة command console.log ('cb1') من مكدس الاستدعاءات.
16) تمت إزالة الوظيفة cb1 من مكدس الاستدعاءات.
لنلقِ نظرة على مثال في الديناميكيات:
حسنًا ، نظرنا في كيفية تنفيذ عدم التزامن في JavaScript. الآن دعنا نتحدث بإيجاز عن تطور الشفرة غير المتزامنة.
تطور الكود غير المتزامن.
a(function (resultsFromA) {
b(resultsFromA, function (resultsFromB) {
c(resultsFromB, function (resultsFromC) {
d(resultsFromC, function (resultsFromD) {
e(resultsFromD, function (resultsFromE) {
f(resultsFromE, function (resultsFromF) {
console.log(resultsFromF);
})
})
})
})
})
});لا يمكن إجراء البرمجة غير المتزامنة كما نعرفها في JavaScript إلا باستخدام الوظائف. يمكن تمريرها مثل أي متغير آخر إلى وظائف أخرى. هكذا ولدت عمليات الاسترجاعات. وهي باردة وممتعة ومتحمسة حتى تتحول إلى حزن وكآبة وحزن. لماذا؟ نعم ، الأمر بسيط:
- مع نمو تعقيد الكود ، يتحول المشروع بسرعة إلى كتل متداخلة متعددة غامضة - "جحيم رد الاتصال".
- يمكن التغاضي عن معالجة الأخطاء بسهولة.
- لا يمكنك إرجاع التعبيرات مع العودة.
مع ظهور الوعد ، أصبح الوضع أفضل قليلاً.
new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 2000);
}).then((result) => {
alert(result);
return result + 2;
}).then((result) => {
throw new Error('FAILED HERE');
alert(result);
return result + 2;
}).then((result) => {
alert(result);
return result + 2;
}).catch((e) => {
console.log('error: ', e);
});- ظهرت سلاسل الوعد ، مما أدى إلى تحسين قابلية قراءة الكود
- كانت هناك طريقة منفصلة لاعتراض الأخطاء
- التنفيذ المتوازي مع Promise.all المضافة
- يمكننا حل عدم التزامن المتداخلة مع عدم التزامن / انتظار
لكن الوعد له حدوده. على سبيل المثال ، الوعد ، دون الرقص مع الدف ، لا يمكن إلغاؤه ، والأهم من ذلك ، أنه يعمل بقيمة واحدة.
حسنًا ، نحن هنا نقترب بسلاسة من البرمجة التفاعلية. مرهق؟ حسنًا ، الشيء الجيد هو أنه يمكنك الذهاب لتحضير بعض النوارس والعصف الذهني والعودة لقراءة المزيد. وسأواصل.
البرمجة التفاعلية - نموذج برمجة يركز على تدفق البيانات ونشر التغييرات. دعونا نلقي نظرة فاحصة على ما هو دفق البيانات.
// Получаем ссылку на элемент
const input = ducument.querySelector('input');
const eventsArray = [];
// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
event => eventsArray.push(event)
);لنتخيل أن لدينا حقل إدخال. نقوم بإنشاء مصفوفة ، ولكل مفتاح لحدث الإدخال ، سنقوم بتخزين الحدث في صفيفنا. في نفس الوقت ، أود أن أشير إلى أن المصفوفة الخاصة بنا مرتبة حسب الوقت ، أي مؤشر الأحداث اللاحقة أكبر من مؤشر الأحداث السابقة. مثل هذا المصفوفة هو نموذج تدفق بيانات مبسط ، لكنه ليس تدفقاً بعد. لكي يتم استدعاء هذه المصفوفة بأمان دفق ، يجب أن تكون قادرة على إبلاغ المشتركين بطريقة أو بأخرى بأن بيانات جديدة قد وصلت إليها. وهكذا نصل إلى تعريف التدفق.
تدفق المعلومات
const { interval } = Rx;
const { take } = RxOperators;
interval(1000).pipe(
take(4)
)
تيار هي مجموعة من البيانات مرتبة حسب الوقت والتي يمكن أن تشير إلى أن البيانات قد تغيرت. تخيل الآن مدى ملاءمة كتابة التعليمات البرمجية التي تحتاج فيها إلى تشغيل عدة أحداث في أجزاء مختلفة من الكود لإجراء واحد. نحن ببساطة نشترك في البث وسوف يخبرنا عندما تحدث التغييرات. ويمكن لمكتبة RxJs القيام بذلك.
آر إكس جي إس هي مكتبة للعمل مع البرامج غير المتزامنة والقائمة على الأحداث باستخدام تسلسلات يمكن ملاحظتها. توفر المكتبة النوع الرئيسي ملحوظة، عدة أنواع من المساعد (المراقبون ، المنظمون ، الموضوعات) والمشغلين للعمل مع الأحداث كما هو الحال مع المجموعات (خريطة ، تصفية ، تقليل ، كل وما شابهها من JavaScript Array).
دعونا نفهم المفاهيم الأساسية لهذه المكتبة.
جدير بالملاحظة ، مراقب ، منتج
يمكن ملاحظته هو النوع الأساسي الأول الذي سننظر إليه. تحتوي هذه الفئة على الجزء الرئيسي من تنفيذ RxJs. إنه مرتبط بتيار يمكن ملاحظته ، والذي يمكن الاشتراك فيه باستخدام طريقة الاشتراك.
تنفذ المراقبة آلية مساعدة لإنشاء التحديثات ، ما يسمى ب المراقب. يتم استدعاء مصدر قيم المراقب منتج. يمكن أن يكون مصفوفة ، مكرر ، مقبس ويب ، نوع من الأحداث ، إلخ. لذلك يمكننا القول أن الملحوظ هو موصل بين المنتج والمراقب.
يتعامل المرصود مع ثلاثة أنواع من أحداث المراقب:
- التالي - بيانات جديدة
- خطأ - خطأ إذا تم إنهاء التسلسل بسبب استثناء. هذا الحدث يعني أيضا نهاية التسلسل.
- مكتمل - إشارة حول نهاية التسلسل. هذا يعني أنه لن يكون هناك المزيد من البيانات الجديدة
دعنا نرى عرض توضيحي:
في البداية سنعالج القيم 1 و 2 و 3 وبعد ثانية واحدة. نحصل على 1 وننهي موضوعنا.
التفكير بصوت عال
ثم أدركت أنه من الممتع التحدث أكثر من الكتابة عنها. 😀
الاشتراك
عندما نشترك في بث ، فإننا ننشئ فئة جديدة اشتراك، مما يعطينا خيار إلغاء الاشتراك بالطريقة إلغاء الاشتراك. يمكننا أيضًا تجميع الاشتراكات باستخدام الطريقة تضيف. حسنًا ، من المنطقي أنه يمكننا فك تجميع المواضيع باستخدام إزالة. تقبل أساليب الإضافة والإزالة اشتراكًا مختلفًا كمدخلات. أود أن أشير إلى أنه عند إلغاء الاشتراك ، نقوم بإلغاء الاشتراك في جميع اشتراكات الأطفال كما لو كانوا يطلقون أيضًا على طريقة إلغاء الاشتراك. تفضل.
أنواع الجداول
أفضل العروض
البرد
يتم إنشاء المنتج خارج ما يمكن ملاحظته
يتم إنشاء المنتج داخل يمكن ملاحظتها
يتم تمرير البيانات في وقت إنشاء ما يمكن ملاحظته
يتم توفير البيانات في وقت الاشتراك.
بحاجة إلى مزيد من المنطق لإلغاء الاشتراك
الخيط ينتهي من تلقاء نفسه
يستخدم علاقة رأس بأطراف
يستخدم علاقة رأس برأس
جميع الاشتراكات لها نفس القيمة
الاشتراكات مستقلة
يمكن أن تفقد البيانات إذا لم يكن هناك اشتراك
يعيد إصدار جميع قيم البث لاشتراك جديد
لإعطاء تشبيه ، كنت أتخيل تيارًا ساخنًا مثل فيلم في السينما. في أي وقت أتيت ، منذ تلك اللحظة بدأت المشاهدة. أود مقارنة تيار بارد مع مكالمة في هؤلاء. يدعم. يستمع أي متصل إلى تسجيل جهاز الرد الآلي من البداية إلى النهاية ، ولكن يمكنك إنهاء إلغاء الاشتراك.
أود أن أشير إلى أن هناك أيضًا ما يسمى بالتيارات الدافئة (لقد التقيت بهذا التعريف نادرًا جدًا وفقط في المجتمعات الأجنبية) - هذا تيار يتحول من تيار بارد إلى تيار ساخن. السؤال الذي يطرح نفسه - أين تستخدم)) سأعطي مثالا من الممارسة.
أنا أعمل مع Angular. يستخدم بنشاط rxjs. للحصول على البيانات إلى الخادم ، أتوقع دفقًا باردًا وأستخدم هذا الدفق في القالب باستخدام asyncPipe. إذا استخدمت هذا الأنبوب عدة مرات ، فعندئذٍ ، بالعودة إلى تعريف الدفق البارد ، سيطلب كل أنبوب بيانات من الخادم ، وهو أمر غريب على أقل تقدير. وإذا قمت بتحويل تيار بارد إلى تيار دافئ ، فسيتم الطلب مرة واحدة.
بشكل عام ، يعد فهم نوع التدفقات أمرًا صعبًا للغاية بالنسبة للمبتدئين ، ولكنه مهم.
مشغلي
return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
.pipe(
tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
map(({ data }: TradeCompanyList) => data)
);يوفر لنا المشغلون فرصة للعمل مع التدفقات. أنها تساعد في السيطرة على الأحداث المتدفقة في المرصد. سننظر في اثنين من أكثرها شيوعًا ، ويمكن العثور على مزيد من المعلومات حول المشغلين على الروابط الموجودة في المعلومات المفيدة.
مشغلي
لنبدأ بالمعامل المساعد لـ. يقوم بإنشاء "يمكن ملاحظته" بناءً على قيمة بسيطة.
عوامل التصفية
عامل المرشح ، كما يوحي الاسم ، يقوم بتصفية إشارة التدفق. إذا عاد عامل التشغيل صحيحًا ، فإنه يتخطى أكثر.
مشغلي - تأخذ
أخذ - يأخذ قيمة عدد عمليات البث ، وبعد ذلك ينتهي الدفق.
Operators-debounceTime
debounceTime - يتجاهل القيم المنبعثة التي تقع ضمن الفاصل الزمني المحدد بين بيانات الإخراج - بعد مرور الفاصل الزمني ، يصدر آخر قيمة.
const { Observable } = Rx;
const { debounceTime, take } = RxOperators;
Observable.create((observer) => {
let i = 1;
observer.next(i++);
// Испускаем значение раз в 1000мс
setInterval(() => {
observer.next(i++)
}, 1000);
// Испускаем значение раз в 1500мс
setInterval(() => {
observer.next(i++)
}, 1500);
}).pipe(
debounceTime(700), // Ожидаем 700мс значения прежде чем обработать
take(3)
);
يأخذ المشغلون بينما
ينبعث القيم حتى يُرجع takeWhile خطأ ، ثم يلغي الاشتراك من السلسلة.
const { Observable } = Rx;
const { debounceTime, takeWhile } = RxOperators;
Observable.create((observer) => {
let i = 1;
observer.next(i++);
// Испускаем значение раз в 1000мс
setInterval(() => {
observer.next(i++)
}, 1000);
}).pipe(
takeWhile( producer => producer < 5 )
);
عوامل الجمع الأحدث
المشغل المدمج يندمج الأحدث يشبه إلى حد ما الوعد.جميع. فهو يجمع بين تيارات متعددة في واحد. بعد أن يقوم كل مؤشر ترابط بإصدار واحد على الأقل ، نحصل على أحدث القيم من كل منها كمصفوفة. علاوة على ذلك ، بعد أي انبعاث من التدفقات المدمجة ، ستعطي قيمًا جديدة.
const { combineLatest, Observable } = Rx;
const { take } = RxOperators;
const observer_1 = Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 1000мс
setInterval(() => {
observer.next('a: ' + i++);
}, 1000);
});
const observer_2 = Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 750мс
setInterval(() => {
observer.next('b: ' + i++);
}, 750);
});
combineLatest(observer_1, observer_2).pipe(take(5));
مشغلي الرمز البريدي
Zip - ينتظر قيمة من كل دفق ويشكل مصفوفة بناءً على هذه القيم. إذا كانت القيمة لا تأتي من أي موضوع ، فلن يتم تشكيل المجموعة.
const { zip, Observable } = Rx;
const { take } = RxOperators;
const observer_1 = Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 1000мс
setInterval(() => {
observer.next('a: ' + i++);
}, 1000);
});
const observer_2 = Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 750
setInterval(() => {
observer.next('b: ' + i++);
}, 750);
});
const observer_3 = Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 500
setInterval(() => {
observer.next('c: ' + i++);
}, 500);
});
zip(observer_1, observer_2, observer_3).pipe(take(5));
عوامل التشغيل - forkJoin
ينضم forkJoin أيضًا إلى سلاسل الرسائل ، لكنه يصدر قيمة فقط عند اكتمال جميع سلاسل الرسائل.
const { forkJoin, Observable } = Rx;
const { take } = RxOperators;
const observer_1 = Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 1000мс
setInterval(() => {
observer.next('a: ' + i++);
}, 1000);
}).pipe(take(3));
const observer_2 = Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 750
setInterval(() => {
observer.next('b: ' + i++);
}, 750);
}).pipe(take(5));
const observer_3 = Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 500
setInterval(() => {
observer.next('c: ' + i++);
}, 500);
}).pipe(take(4));
forkJoin(observer_1, observer_2, observer_3);
مشغلي الخريطة
يقوم عامل تحويل الخريطة بتحويل القيمة المنبعثة إلى قيمة جديدة.
const { Observable } = Rx;
const { take, map } = RxOperators;
Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 1000мс
setInterval(() => {
observer.next(i++);
}, 1000);
}).pipe(
map(x => x * 10),
take(3)
);
المشغلون - مشاركة ، انقر فوق
يتيح لك عامل النقر القيام بآثار جانبية ، أي أي إجراءات لا تؤثر على التسلسل.
يمكن لمشغل المرافق المشتركة تحويل تيار بارد إلى تيار ساخن.
انتهى المشغلون. دعنا ننتقل إلى الموضوع.
التفكير بصوت عال
ثم ذهبت لشرب الشاي. تعبت من هذه الأمثلة 😀
عائلة الموضوع
عائلة الموضوع هي مثال رئيسي للخيوط الساخنة. هذه الفئات هي نوع من الهجين الذي يعمل كمراقب وملاحظ في نفس الوقت. نظرًا لأن الموضوع عبارة عن تيار ساخن ، يجب إلغاء الاشتراك منه. إذا تحدثنا عن الطرق الرئيسية ، فهذه هي:
- التالي - تمرير بيانات جديدة إلى الدفق
- خطأ - خطأ وإنهاء مؤشر الترابط
- مكتمل - نهاية الخيط
- اشتراك - اشترك في تيار
- إلغاء الاشتراك - إلغاء الاشتراك من الدفق
- كما يمكن ملاحظته - تحول إلى مراقب
- toPromise - يتحول إلى وعد
خصص 4 5 أنواع من الموضوعات.
التفكير بصوت عال
قلت 4 في الدفق ، لكن اتضح أنهم أضافوا واحدًا آخر. كما يقول المثل ، عش وتعلم.
موضوع بسيط new Subject()- أبسط أنواع الموضوعات. تم إنشاؤها بدون معلمات. يمر بالقيم التي جاءت بعد الاشتراك فقط.
السلوك new BehaviorSubject( defaultData<T> ) - في رأيي النوع الأكثر شيوعًا من الموضوعات. الإدخال يأخذ القيمة الافتراضية. يحفظ دائمًا بيانات الإصدار الأخير ، والتي يتم إرسالها عند الاشتراك. تحتوي هذه الفئة أيضًا على طريقة قيمة مفيدة تُرجع القيمة الحالية للدفق.
إعادة التشغيل new ReplaySubject(bufferSize?: number, windowTime?: number) - اختياريًا ، يمكن أن يأخذ كمعامل أول حجم المخزن المؤقت للقيم التي سيخزنها في حد ذاته ، والمرة الثانية التي نحتاج خلالها إلى التغييرات.
موضوع غير متزامن new AsyncSubject() - لا يحدث شيء عند الاشتراك ، ولن يتم إرجاع القيمة إلا عند اكتمالها. سيتم إرجاع القيمة الأخيرة فقط من الدفق.
WebSocket new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - التوثيق سكت عنه وأنا أراه بنفسي لأول مرة. من يعرف ماذا يفعل ، يكتب ، سنضيف.
تفو. حسنًا ، لقد نظرنا في كل شيء أردت أن أقوله اليوم. نأمل أن تكون هذه المعلومات مفيدة. يمكنك قراءة قائمة المؤلفات بنفسك في علامة التبويب معلومات مفيدة.
معلومات مفيدة
المصدر: www.habr.com