سلام و ټولو ته. سرګي اوملنتسکي په تماس کې دی. ډیر وخت دمخه ما د عکس العمل برنامه کولو یوه جریان کوربه توب وکړ ، چیرې چې ما په جاواسکریپټ کې د غیر متناسب په اړه خبرې وکړې. نن زه غواړم د دې موادو یادونه وکړم.
مګر مخکې له دې چې موږ اصلي مواد پیل کړو، موږ باید یو ابتدايي یادښت جوړ کړو. نو راځئ چې د تعریفونو سره پیل وکړو: سټیک او قطار څه شی دی؟
سټیک یوه ټولګه ده چې عناصر یې په وروستي کې، د 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() {… }) کمانډ اجرا کیږي. براوزر یو ټایمر رامینځته کوي چې د ویب API برخه ده. دا به یو شمېرنه ترسره کړي.
7) د setTimeout(function cb1() {... }) کمانډ خپل کار بشپړ کړی او د کال سټیک څخه لرې شوی.
8) کمانډ console.log('بای') د کال سټیک کې اضافه شوی.
9) د console.log('بای') کمانډ اجرا کیږي.
10) کمانډ console.log('بای') د کال سټیک څخه لرې شوی.
11) وروسته له دې چې لږترلږه 5000 ms تیر شي، ټایمر پای ته رسیږي او د کال بیک په کتار کې 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);
})
})
})
})
})
});غیر متناسب پروګرامونه لکه څنګه چې موږ پوهیږو دا په جاواسکریپټ کې یوازې د دندو لخوا پلي کیدی شي. دوی د نورو دندو ته د نورو متغیرونو په څیر لیږدول کیدی شي. په دې توګه کال بیکونه زیږیدلي. او دا په زړه پوری ، ساتیري او لوبیدونکی دی ، تر هغه چې دا په غم ، خپګان او غم بدل شي. ولې؟ دا ساده ده:
- لکه څنګه چې د کوډ پیچلتیا زیاتیږي، پروژه په چټکۍ سره په ناڅرګند، په مکرر ډول ځړول شوي بلاکونو بدلیږي - "کال بیک دوزخ".
- د خطا اداره کول ممکن له لاسه ورکول اسانه وي.
- تاسو نشئ کولی د بیرته راستنیدو سره څرګندونې بیرته راستانه کړئ.
د وعدې په راتګ سره وضعیت یو څه ښه شو.
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/await په کارولو سره د نیست شوي ایسینکروني حل کړو
مګر ژمنې خپل محدودیتونه لري. د مثال په توګه، یوه ژمنه د تیمبورین سره نڅا کولو پرته لغوه کیدی نشي، او هغه څه چې خورا مهم دي دا د یو ارزښت سره کار کوي.
ښه، موږ په اسانۍ سره د عکس العمل پروګرام کولو ته نږدې شوي یو. ستړي شوي؟ ښه، خوشبختانه، تاسو کولی شئ یو څه چای جوړ کړئ، د هغې په اړه فکر وکړئ او د نورو لوستلو لپاره بیرته راشئ. او زه به ادامه ورکړم.
د عکس العمل پروګرام کول د برنامه کولو تمثیل دی چې د معلوماتو جریان او بدلون تبلیغ باندې تمرکز کوي. راځئ چې نږدې وګورو چې د ډیټا جریان څه شی دی.
// Получаем ссылку на элемент
const input = ducument.querySelector('input');
const eventsArray = [];
// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
event => eventsArray.push(event)
);راځئ چې تصور وکړو چې موږ د ننوتلو ساحه لرو. موږ یو سري رامینځته کوو او د ان پټ پیښې هر کلیپ لپاره به موږ پیښه په خپل صف کې ذخیره کړو. په ورته وخت کې، زه غواړم یادونه وکړم چې زموږ صفونه د وخت له مخې ترتیب شوي، i.e. د وروستیو پیښو شاخص د تیرو پیښو شاخص څخه لوی دی. دا ډول صف د ډیټا جریان ساده ماډل دی ، مګر دا لاهم جریان ندی. د دې لپاره چې دا لړۍ په خوندي ډول د جریان په نوم یاد شي، دا باید وکوالی شي په یو ډول سره پیرودونکو ته خبر ورکړي چې نوي معلومات پدې کې راغلي دي. په دې توګه موږ د جریان تعریف ته راځو.
د معلوماتو جریان
const { interval } = Rx;
const { take } = RxOperators;
interval(1000).pipe(
take(4)
)
روانی د وخت له مخې ترتیب شوي د معلوماتو لړۍ ده چې دا په ګوته کوي چې ډاټا بدله شوې. اوس تصور وکړئ چې د کوډ لیکلو لپاره څومره اسانه کیږي په کوم کې چې یو عمل د کوډ په بیلابیلو برخو کې ډیری پیښو ته اړتیا لري. موږ په ساده ډول جریان کې ګډون کوو او دا به موږ ته خبر ورکړي کله چې بدلونونه پیښ شي. او د RxJs کتابتون کولی شي دا کار وکړي.
RxJS د لید وړ ترتیبونو په کارولو سره د غیر متناسب او پیښو پراساس برنامو سره کار کولو لپاره کتابتون دی. کتابتون یو بنسټیز ډول وړاندې کوي د لیدو وړڅو مرستندویه ډولونه (څارونکی، مهالویش ورکوونکی، موضوع) او آپریټرونه د پیښو سره د کار کولو لپاره لکه د راټولولو سره (نقشه، فلټر، کمول، هر او ورته د جاواسکریپټ سرې څخه).
راځئ چې د دې کتابتون په اساسي مفکورو پوه شو.
کتونکی، کتونکی، تولیدونکی
د لیدلو وړ لومړی بنسټیز ډول دی چې موږ به یې وګورو. دا ټولګي د RxJs پلي کولو اصلي برخه لري. دا د مشاهدې وړ جریان سره تړاو لري، کوم چې د ګډون کولو طریقې په کارولو سره ګډون کولی شي.
د لیدلو وړ د تازه معلوماتو رامینځته کولو لپاره یو مرستندویه میکانیزم پلي کوي، چې ورته ویل کیږي کتونکي. د کتونکي لپاره د ارزښتونو سرچینه بلل کیږي تولیدوونکی. دا کیدای شي یو سري، تکرارونکی، ویب ساکټ، یو ډول پیښه، او نور وي. نو موږ کولی شو ووایو چې مشاهده کونکي د تولید کونکي او کتونکي تر مینځ یو چلونکی دی.
د مشاهدې وړ درې ډوله کتونکي پیښې اداره کوي:
- بل - نوي معلومات
- تېروتنه - یوه تېروتنه که چیرې ترتیب د استثنا له امله پای ته ورسیږي. دا پیښه د ترتیب بشپړیدل هم معنی لري.
- بشپړ - د ترتیب د بشپړیدو په اړه سیګنال. دا پدې مانا ده چې نور به نوي معلومات شتون نلري.
راځئ چې ډیمو وګورو:
په پیل کې به موږ ارزښتونه 1، 2، 3، او د 1 ثانیې وروسته پروسس کړو. موږ به 4 ترلاسه کړو او زموږ جریان به پای ته ورسوو.
په لوړ غږ فکر کول
او بیا زه پوه شوم چې د دې په اړه لیکلو څخه دا ویل ډیر په زړه پوري دي. 😀
ګډون
کله چې موږ یو جریان کې ګډون کوو موږ یو نوی ټولګي جوړوو ګډونکوم چې موږ ته دا وړتیا راکوي چې د میتود په کارولو سره غړیتوب ختم کړو بندیز لګول. موږ کولی شو د میتود په کارولو سره ګروپي ګډون هم وکړو اضافه. ښه ، دا منطقي ده چې موږ کولی شو تارونه په کارولو سره غیر ګروپ کړو لرې. د اضافه کولو او لرې کولو میتودونه د ننوتلو په توګه بل ګډون مني. زه غواړم په یاد ولرم چې کله چې موږ غړیتوب ختم کړو، موږ د ټولو ماشومانو ګډونونه لغوه کوو لکه څنګه چې دوی د غیر غړیتوب میتود بللی وي. وړاندې ځه.
د جریانونو ډولونه
تودې
پوښ
تولید کونکی د لیدلو وړ بهر جوړ شوی
تولید کونکی د لید وړ دننه رامینځته شوی
ډاټا هغه وخت لیږدول کیږي کله چې د لیدلو وړ رامینځته کیږي
ډاټا د ګډون په وخت کې چمتو کیږي
د غیر ګډون لپاره اضافي منطق ته اړتیا لرئ
تار پخپله ختمیږي
د یو څخه ډیری اړیکې کاروي
یو له بل سره اړیکه کاروي
ټول ګډونونه ورته معنی لري
ګډونونه خپلواک دي
ډاټا له لاسه ورکول کیدی شي که تاسو ګډون نلرئ
د نوي ګډون لپاره ټول جریان ارزښتونه بیا خپروي
د مشابهت ورکولو لپاره، زه به په تیاتر کې د فلم په توګه د ګرم جریان په اړه فکر وکړم. په کوم وخت کې چې تاسو رارسیدلي، له هغه شیبې څخه تاسو لیدل پیل کړل. زه به په ټیکنالوژۍ کې زنګ سره سړه جریان پرتله کړم. ملاتړ هر زنګ وهونکی د پیل څخه تر پای پورې د غږیز میل ثبت ته غوږ نیسي، مګر تاسو کولی شئ د غړیتوب د ختمولو په کارولو سره ځړول شئ.
زه غواړم یادونه وکړم چې د تودوخې جریان هم شتون لري (زه دا تعریف خورا لږ او یوازې په بهرنیو ټولنو کې موندلی یم) - دا یو جریان دی چې له سړې جریان څخه ګرم ته بدلیږي. پوښتنه راپورته کیږي - چیرته کارول کیږي)) زه به د تمرین څخه یو مثال ورکړم.
زه د 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)
);آپریټرونه موږ ته د دې وړتیا راکوي چې د جریانونو سره د کار کولو وړتیا پراخه کړو. دوی د مشاهدې وړ پیښو په کنټرول کې مرسته کوي. موږ به یو څو خورا مشهور وګورو ، او د آپریټرونو په اړه نور توضیحات په ګټورو معلوماتو کې د لینکونو په کارولو سره موندل کیدی شي.
چلونکي - د
راځئ چې د معاون آپریټر سره پیل وکړو. دا د ساده ارزښت پراساس د مشاهدې وړ رامینځته کوي.
چلونکي - فلټر
د فلټر آپریټر، لکه څنګه چې نوم وړاندیز کوي، د جریان سیګنال فلټر کوي. که چیرې آپریټر ریښتیا راشي، نو دا نور پریږدي.
چلونکي - واخله
take — د emitters شمیر ارزښت اخلي، وروسته له هغه چې تار پای ته رسیږي.
چلونکي - 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 )
);
آپریټرونه - combinineLatest
CombineLatest آپریټر یو څه د وعدې.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));
چلونکي - 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)
);
چلونکي - شریکول، ټایپ
د نل آپریټر تاسو ته اجازه درکوي ضمني اغیزې ترسره کړئ، دا دی، هر هغه عمل چې په ترتیب اغیزه نه کوي.
د ونډې یوټیلټي آپریټر کولی شي سړه جریان په تودوخې بدل کړي.
موږ د آپریټرانو سره بشپړ شوي یو. راځئ چې موضوع ته لاړ شو.
په لوړ غږ فکر کول
بیا زه د چای څښلو لپاره لاړم. زه له دې مثالونو ستړی شوی یم 😀
موضوع کورنۍ
د موضوع کورنۍ د ګرمو جریانونو غوره بیلګه ده. دا ټولګي یو ډول هایبرډ دی چې په ورته وخت کې د کتونکي او څارونکي په توګه عمل کوي. څرنګه چې موضوع ګرمه موضوع ده، نو اړینه ده چې له هغې څخه ګډون وکړئ. که موږ د اصلي میتودونو په اړه خبرې وکړو، نو دا دي:
- بل - جریان ته د نوي معلوماتو لیږد
- تېروتنه - تېروتنه او د تار ختمول
- بشپړ - د تار بشپړول
- ګډون وکړئ - یو جریان کې ګډون وکړئ
- غیر ګډون کول - د جریان څخه غړیتوب منسوخ کړئ
- لکه څنګه چې د لید وړ - په څارونکي بدلول
- ژمنه - په وعده بدلیږي
د مضامينو ۴۵ ډوله دي.
په لوړ غږ فکر کول
په جریان کې 4 کسان وو، مګر دا معلومه شوه چې دوی یو بل اضافه کړ. لکه څنګه چې دوی وايي، ژوند وکړئ او زده کړه وکړئ.
ساده موضوع new Subject()- د موضوعاتو تر ټولو ساده ډول. د پیرامیټونو پرته جوړ شوی. یوازې د ګډون وروسته ترلاسه شوي ارزښتونه لیږدوي.
د چلند موضوع new BehaviorSubject( defaultData<T> ) - زما په نظر، د موضوع تر ټولو عام ډول. ان پټ ډیفالټ ارزښت اخلي. تل د وروستۍ مسلې ډیټا خوندي کوي ، کوم چې د ګډون کولو پرمهال لیږدول کیږي. دا ټولګي د ګټور ارزښت میتود هم لري، کوم چې د جریان اوسنی ارزښت بیرته راګرځوي.
Replay موضوع new ReplaySubject(bufferSize?: number, windowTime?: number) - ان پټ کولی شي په اختیاري توګه د لومړي دلیل په توګه د ارزښتونو بفر اندازه واخلي چې دا به پخپله ذخیره کړي، او د دویم ځل په توګه چې موږ بدلونونو ته اړتیا لرو.
AsyncSubject new AsyncSubject() - د ګډون کولو په وخت کې هیڅ شی نه پیښیږي، او ارزښت به بیرته راستانه شي کله چې بشپړ شي. یوازې د جریان وروستی ارزښت به بیرته راشي.
د ویب ساکټ موضوع new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - اسناد د هغه په اړه خاموش دي او زه هغه د لومړي ځل لپاره وینم. که څوک پوهیږي چې هغه څه کوي، مهرباني وکړئ ولیکئ او موږ به یې اضافه کړو.
اوف ښه ، موږ هرڅه پوښلي چې زه غواړم نن تاسو ته ووایم. زه امید لرم چې دا معلومات ګټور وو. تاسو کولی شئ د ګټورو معلوماتو ټب کې پخپله د حوالې لیست ولولئ.
ګټور معلومات
سرچینه: www.habr.com