سلام به همه. در تماس با Omelnitsky سرگئی. چندی پیش، من یک جریان برنامه‌نویسی واکنش‌گرا را میزبانی کردم، جایی که در مورد ناهمزمانی در جاوا اسکریپت صحبت کردم. امروز می خواهم این مطالب را خلاصه کنم.
اما قبل از شروع مطالب اصلی، باید مقدمه ای را بیان کنیم. پس بیایید با تعاریف شروع کنیم: پشته و صف چیست؟
پشته مجموعه ای است که عناصر آن بر اساس LIFO "آخرین ورود، اولین خروج" بازیابی شده است
دور زدن مجموعه ای است که عناصر آن بر اساس اصل («اول به داخل، اول خارج» FIFO به دست آمده است
باشه ادامه بدیم
جاوا اسکریپت یک زبان برنامه نویسی تک رشته ای است. این بدان معناست که فقط یک رشته اجرا و یک پشته دارد که در آن توابع برای اجرا در صف قرار می گیرند. بنابراین، جاوا اسکریپت فقط می تواند یک عملیات را در یک زمان انجام دهد، در حالی که سایر عملیات ها در پشته منتظر می مانند تا فراخوانی شوند.
پشته تماس یک ساختار داده است که به زبان ساده، اطلاعات مربوط به مکان برنامه را که در آن قرار داریم ثبت می کند. اگر به یک تابع بپریم، ورودی آن را به بالای پشته فشار می دهیم. وقتی از یک تابع برمی گردیم، بالاترین عنصر را از پشته بیرون می آوریم و به جایی می رسیم که این تابع را از آن فراخوانی کردیم. این تمام کاری است که پشته می تواند انجام دهد. و حالا یک سوال بسیار جالب. پس چگونه ناهمزمانی در جاوا اسکریپت کار می کند؟
در واقع مرورگرها علاوه بر پشته دارای صف خاصی برای کار با WebAPI هستند. توابع از این صف تنها پس از پاک شدن کامل پشته به ترتیب اجرا می شوند. فقط پس از آن آنها از صف روی پشته برای اجرا قرار می گیرند. اگر در حال حاضر حداقل یک عنصر در پشته وجود داشته باشد، آنها نمی توانند روی پشته قرار گیرند. فقط به این دلیل، فراخوانی توابع با مهلت زمانی اغلب نادرست است، زیرا تابع نمی تواند از صف به پشته در حالی که پر است برسد.
بیایید نگاهی به مثال زیر بیاندازیم و قدم به قدم آن را مرور کنیم. همچنین ببینیم در سیستم چه اتفاقی می افتد.
console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
1) تا اینجا هیچ اتفاقی نیفتاده است. کنسول مرورگر تمیز است، پشته تماس خالی است.
2) سپس دستور console.log('Hi') به پشته تماس اضافه می شود.
3) و برآورده می شود
4) سپس console.log('Hi') از پشته تماس حذف می شود.
5) حالا بیایید به دستور setTimeout(function cb1() {…}) برویم. به پشته تماس اضافه می شود.
6) دستور setTimeout(function cb1() {…}) اجرا می شود. مرورگر یک تایمر ایجاد می کند که بخشی از Web API است. این یک شمارش معکوس انجام خواهد داد.
7) دستور setTimeout(function cb1() {…}) کار خود را به پایان رسانده و از پشته تماس حذف می شود.
8) دستور console.log('Bye') به پشته تماس اضافه می شود.
9) دستور console.log('Bye') اجرا می شود.
10) دستور console.log('Bye') از پشته تماس حذف می شود.
11) پس از سپری شدن حداقل 5000 میلی ثانیه، تایمر به پایان می رسد و پاسخ تماس cb1 را در صف پاسخ به تماس قرار می دهد.
12) حلقه رویداد تابع cb1 را از صف برگشت تماس گرفته و آن را به پشته تماس می‌برد.
13) تابع cb1 اجرا می شود و console.log('cb1') را به پشته تماس اضافه می کند.
14) دستور console.log('cb1') اجرا می شود.
15) دستور console.log('cb1') از پشته تماس حذف می شود.
16) تابع cb1 از پشته تماس حذف می شود.
بیایید به یک مثال در دینامیک نگاه کنیم:
خوب، ما به نحوه پیاده سازی ناهمزمانی در جاوا اسکریپت نگاه کردیم. حال اجازه دهید به طور خلاصه در مورد تکامل کدهای ناهمزمان صحبت کنیم.
تکامل کد ناهمزمان
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);
})
})
})
})
})
});برنامه نویسی ناهمزمان همانطور که در جاوا اسکریپت می شناسیم فقط با توابع قابل انجام است. آنها را می توان مانند هر متغیر دیگری به توابع دیگر ارسال کرد. اینگونه بود که کال بک ها متولد شدند. و باحال، مفرح و پرشور است، تا زمانی که به غم، مالیخولیا و اندوه تبدیل شود. چرا؟ بله، ساده است:
- با افزایش پیچیدگی کد، پروژه به سرعت به بلوک های متعدد تودرتو مبهم تبدیل می شود - "جهنم پاسخ به تماس".
- رسیدگی به خطا را می توان به راحتی نادیده گرفت.
- شما نمی توانید عبارات را با بازگشت برگردانید.
با آمدن Promise اوضاع کمی بهتر شده است.
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 اضافه شده است
- ما می توانیم ناهمزمانی تودرتو را با async/wait حل کنیم
اما وعده محدودیت هایی دارد. مثلاً قول بدون رقص با تنبور لغو نمی شود و از همه مهمتر با یک ارزش کار می کند.
خب، در اینجا ما به آرامی به برنامه نویسی واکنشی نزدیک می شویم. خسته؟ خوب، خوبی این است که می‌توانید برای دم کردن مرغ‌های دریایی بروید، طوفان فکری کنید و برای مطالعه بیشتر برگردید. و من ادامه خواهم داد.
برنامه نویسی واکنشی - یک الگوی برنامه نویسی متمرکز بر جریان داده ها و انتشار تغییرات. بیایید نگاهی دقیق تر به جریان داده بیندازیم.
// Получаем ссылку на элемент
const input = ducument.querySelector('input');
const eventsArray = [];
// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
event => eventsArray.push(event)
);بیایید تصور کنیم که یک فیلد ورودی داریم. ما یک آرایه ایجاد میکنیم و برای هر keyup رویداد ورودی، رویداد را در آرایه خود ذخیره میکنیم. در همان زمان، می خواهم توجه داشته باشم که آرایه ما بر اساس زمان مرتب شده است، یعنی. شاخص رویدادهای بعدی بیشتر از شاخص رویدادهای قبلی است. چنین آرایه ای یک مدل جریان داده ساده شده است، اما هنوز یک جریان نیست. برای اینکه این آرایه به طور ایمن یک جریان نامیده شود، باید بتواند به نحوی به مشترکان اطلاع دهد که داده های جدیدی به آن رسیده است. بنابراین به تعریف جریان می رسیم.
جریان داده ها
const { interval } = Rx;
const { take } = RxOperators;
interval(1000).pipe(
take(4)
)
جریان آرایه ای از داده های مرتب شده بر اساس زمان است که می تواند نشان دهنده تغییر داده ها باشد. حالا تصور کنید نوشتن کدی که در آن باید چندین رویداد را در قسمت‌های مختلف کد برای یک عمل فعال کنید چقدر راحت است. ما به سادگی در جریان مشترک می شویم و زمانی که تغییرات رخ می دهد به ما می گوید. و کتابخانه RxJs می تواند این کار را انجام دهد.
RxJS کتابخانه ای برای کار با برنامه های ناهمزمان و مبتنی بر رویداد با استفاده از توالی های قابل مشاهده است. کتابخانه نوع اصلی را فراهم می کند قابل مشاهده است، چندین نوع کمک کننده (ناظران، برنامه‌ریزان، سوژه‌ها) و عملگرها برای کار با رویدادها مانند مجموعه ها (نقشه، فیلتر، کاهش، هر و موارد مشابه از آرایه جاوا اسکریپت).
بیایید مفاهیم اساسی این کتابخانه را درک کنیم.
قابل مشاهده، مشاهده کننده، تولید کننده
قابل مشاهده اولین نوع پایه ای است که ما به آن نگاه خواهیم کرد. این کلاس شامل بخش اصلی پیاده سازی RxJs است. با یک جریان قابل مشاهده همراه است که می توان با استفاده از روش اشتراک در آن مشترک شد.
Observable مکانیزم کمکی را برای ایجاد به روز رسانی پیاده سازی می کند، به اصطلاح مشاهده کننده. منبع مقادیر برای یک Observer نامیده می شود تولید کننده. این می تواند یک آرایه، یک تکرار کننده، یک سوکت وب، نوعی رویداد و غیره باشد. بنابراین می توان گفت که مشاهده پذیر هادی بین تولید کننده و مشاهده کننده است.
Observable سه نوع رویداد Observer را مدیریت می کند:
- بعدی - داده های جدید
- خطا - یک خطا اگر دنباله به دلیل یک استثنا خاتمه یابد. این رویداد همچنین به معنای پایان سکانس است.
- کامل - یک سیگنال در مورد پایان دنباله. این بدان معناست که دیگر اطلاعات جدیدی وجود نخواهد داشت
بیایید یک نسخه نمایشی ببینیم:
در ابتدا مقادیر 1، 2، 3 و بعد از 1 ثانیه پردازش می کنیم. ما 4 می گیریم و موضوع خود را پایان می دهیم.
فکر کردن با صدای بلند
و بعد متوجه شدم که گفتن جالب تر از نوشتن در مورد آن است. 😀
اشتراک
وقتی در یک جریان مشترک می شویم، یک کلاس جدید ایجاد می کنیم اشتراک، ابونمان، که به ما امکان لغو اشتراک با روش را می دهد لغو اشتراک. ما همچنین می توانیم اشتراک ها را با استفاده از روش گروه بندی کنیم اضافه کردن. خوب، منطقی است که بتوانیم موضوعات را با استفاده از گروه بندی جدا کنیم برداشتن. روش های افزودن و حذف اشتراک دیگری را به عنوان ورودی می پذیرند. می‌خواهم توجه داشته باشم که وقتی اشتراک را لغو میکنیم، اشتراک همه اشتراک‌های فرزند را لغو میکنیم، گویی که آنها روش لغو اشتراک را نیز نامیده‌اند. برو جلو.
انواع جریان ها
HOT
سرما
تولید کننده خارج از قابل مشاهده ایجاد می شود
تولید کننده در داخل قابل مشاهده ایجاد می شود
داده ها در زمان ایجاد قابل مشاهده ارسال می شوند
داده ها در زمان اشتراک ارائه می شود.
برای لغو اشتراک به منطق بیشتری نیاز دارید
تاپیک خود به خود خاتمه می یابد
از رابطه یک به چند استفاده می کند
از رابطه یک به یک استفاده می کند
همه اشتراک ها ارزش یکسانی دارند
اشتراک ها مستقل هستند
در صورت عدم وجود اشتراک، داده ها از بین می روند
همه مقادیر جریان را برای یک اشتراک جدید مجدداً منتشر می کند
برای یک قیاس، من یک جریان داغ مانند یک فیلم در سینما را تصور می کنم. در چه مقطع زمانی آمدید، از همان لحظه شروع به تماشا کردید. من یک جریان سرد را با یک تماس در آن مقایسه می کنم. حمایت کردن. هر تماس گیرنده ای از ابتدا تا انتها به ضبط دستگاه منشی تلفنی گوش می دهد، اما می توانید با لغو اشتراک، تلفن را قطع کنید.
می خواهم توجه داشته باشم که جریان های به اصطلاح گرم نیز وجود دارد (من به ندرت و فقط در جوامع خارجی با چنین تعریفی روبرو شده ام) - این جریانی است که از یک جریان سرد به یک جریان گرم تبدیل می شود. این سوال پیش می آید - کجا باید از آن استفاده کرد)) من مثالی از تمرین خواهم آورد.
من با 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)
);اپراتورها به ما فرصتی برای کار با استریم ها می دهند. آنها به کنترل وقایع جاری در Observable کمک می کنند. ما چند مورد از محبوب ترین آنها را در نظر خواهیم گرفت و اطلاعات بیشتر در مورد اپراتورها را می توان در پیوندهای اطلاعات مفید یافت.
اپراتورهای
بیایید با اپراتور کمکی شروع کنیم. بر اساس یک مقدار ساده یک Observable ایجاد می کند.
اپراتورها - فیلتر
اپراتور فیلتر، همانطور که از نام آن پیداست، سیگنال جریان را فیلتر می کند. اگر اپراتور true را برگرداند، آنگاه از ادامه رد می‌شود.
اپراتورها - بگیر
take - مقدار تعداد انتشارات را می گیرد و پس از آن جریان به پایان می رسد.
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)
);
Operators-takeWhile
مقادیر را منتشر می کند تا زمانی که takeWhile false را برگرداند، سپس اشتراک را از رشته لغو می کند.
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 )
);
Operators-combineLatest
عملگر ترکیبی combinationLatest تا حدودی شبیه به soz.all است. چندین جریان را در یک جریان ترکیب می کند. پس از اینکه هر رشته حداقل یک انتشار ایجاد کرد، آخرین مقادیر را از هر یک به عنوان یک آرایه دریافت می کنیم. علاوه بر این، پس از هر گونه انتشار از جریان های ترکیبی، مقادیر جدیدی به دست می دهد.
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));
Operators-zip
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)
);
اپراتورها - به اشتراک بگذارید، ضربه بزنید
اپراتور شیر به شما امکان می دهد عوارض جانبی را انجام دهید، یعنی هر عملی که بر روی ترتیب تأثیر نمی گذارد.
اپراتور اشتراک می تواند جریان سرد را به جریان گرم تبدیل کند.
اپراتورها تمام شده اند. بریم سراغ موضوع.
فکر کردن با صدای بلند
و بعد رفتم چای بخورم. خسته شدم از این مثالها😀
خانواده موضوعی
خانواده موضوعی نمونه بارز رشته های داغ است. این طبقات نوعی هیبرید هستند که در عین حال به عنوان قابل مشاهده و مشاهده عمل می کنند. از آنجایی که موضوع یک جریان داغ است، باید اشتراک آن را لغو کنید. اگر در مورد روش های اصلی صحبت کنیم، اینها عبارتند از:
- بعدی - ارسال داده های جدید به جریان
- خطا - خطا و خاتمه موضوع
- کامل - انتهای موضوع
- اشتراک - مشترک شدن در یک جریان
- لغو اشتراک - لغو اشتراک از جریان
- as Observable - تبدیل به یک ناظر
- toPromise - تبدیل به یک وعده
4 5 نوع موضوع را اختصاص دهید.
فکر کردن با صدای بلند
من در استریم گفتم 4، اما معلوم شد که یکی دیگر اضافه کرده اند. به قول معروف زندگی کن و یاد بگیر.
موضوع ساده new Subject()- ساده ترین نوع موضوعات. بدون پارامتر ایجاد شده است. مقادیری را که فقط پس از اشتراک آمده است را منتقل می کند.
رفتار موضوع new BehaviorSubject( defaultData<T> ) - به نظر من رایج ترین نوع موضوع-ها. ورودی مقدار پیش فرض را می گیرد. همیشه داده های آخرین شماره را ذخیره می کند که هنگام اشتراک ارسال می شود. این کلاس همچنین دارای یک روش ارزش مفید است که مقدار فعلی جریان را برمی‌گرداند.
ReplaySubject new ReplaySubject(bufferSize?: number, windowTime?: number) - به صورت اختیاری، می تواند به عنوان اولین آرگومان، اندازه بافر مقادیری را که در خود ذخیره می کند، و بار دوم که طی آن به تغییرات نیاز داریم، در نظر بگیرد.
موضوع غیر همگام new AsyncSubject() - هنگام اشتراک هیچ اتفاقی نمی افتد و مقدار فقط پس از تکمیل بازگردانده می شود. فقط آخرین مقدار جریان برگردانده می شود.
WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - مستندات در مورد آن ساکت است و من خودم برای اولین بار آن را می بینم. کی میدونه چیکار میکنه بنویس اضافه میکنیم
فوو خوب، ما همه چیزهایی را که امروز می خواستم بگویم در نظر گرفته ایم. امیدوارم این اطلاعات مفید بوده باشد. شما می توانید لیست ادبیات را به تنهایی در برگه اطلاعات مفید بخوانید.
اطلاعات مفید
منبع: www.habr.com