Сайн уу. Сергей Омельницкий холбоотой байна. Тун удалгүй би реактив програмчлалын тухай урсгалыг зохион байгуулж, JavaScript дахь асинхрон байдлын талаар ярилцсан. Өнөөдөр би энэ материалын талаар тэмдэглэл хөтлөхийг хүсч байна.
Гэхдээ бид үндсэн материалыг эхлэхээс өмнө танилцуулга хийх хэрэгтэй. Тэгэхээр тодорхойлолтуудаас эхэлцгээе: стек ба дараалал гэж юу вэ?
Стек Элементүүдийг нь хамгийн сүүлд орж ирсэн анхны LIFO зарчмаар авдаг цуглуулга юм
Дараалал нь FIFO зарчмаар элементүүдийг нь хамгийн түрүүнд авдаг цуглуулга юм
За, үргэлжлүүлье.
JavaScript бол нэг урсгалтай програмчлалын хэл юм. Энэ нь зөвхөн нэг гүйцэтгэлийн урсгал, гүйцэтгэх дараалалд тавигдсан нэг стек байна гэсэн үг юм. Тиймээс JavaScript нь нэг удаад зөвхөн нэг үйлдлийг гүйцэтгэх боломжтой бөгөөд бусад үйлдлүүд дуудагдах хүртэл стек дээр ээлжээ хүлээх болно.
Дуудлагын стек Энэ нь энгийнээр хэлбэл бидний байгаа программ дахь газрын талаарх мэдээллийг бүртгэдэг өгөгдлийн бүтэц юм. Хэрэв бид функц руу шилжих юм бол түүний оруулгыг стекийн дээд талд түлхэнэ. Функцээс буцаж ирэхэд бид стекээс хамгийн дээд талын элементийг гаргаж аваад функц гэж нэрлэсэн газартаа буцаж очдог. Энэ бол стекийн хийж чадах бүх зүйл юм. Тэгээд одоо маш сонирхолтой асуулт байна. JavasScript дээр асинхрон хэрхэн ажилладаг вэ?
Үнэн хэрэгтээ стекээс гадна хөтчүүд 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 (функц cb1() {… }) команд руу шилжинэ. Энэ нь дуудлагын стек дээр нэмэгддэг.
6) setTimeout(function cb1() {… }) командыг гүйцэтгэнэ. Хөтөч нь Web API-ийн нэг хэсэг болох цаг хэмжигчийг үүсгэдэг. Энэ нь тооллогыг гүйцэтгэх болно.
7) setTimeout(function cb1() {... }) команд ажлаа дуусгаад дуудлагын стекээс хасагдсан.
8) Console.log('Баяртай') командыг дуудлагын стек дээр нэмсэн.
9) console.log('Bye') командыг гүйцэтгэнэ.
10) Console.log('Баяртай') командыг дуудлагын стекээс устгасан.
11) Дор хаяж 5000 мс өнгөрсний дараа таймер дуусч, cb1-г буцаан дуудлагын дараалалд оруулна.
12) Үйл явдлын давталт нь дуудлагын дарааллаас cb1 функцийг авч дуудлагын стек дээр байрлуулна.
13) cb1 функцийг гүйцэтгэх ба console.log('cb1')-г дуудлагын стек рүү нэмнэ.
14) console.log('cb1') командыг гүйцэтгэнэ.
15) 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 ашиглан зэрэгцээ гүйцэтгэх боломжийг нэмсэн
- Бид 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 нь ажиглагдаж болох дарааллыг ашиглан асинхрон болон үйл явдалд суурилсан программтай ажиллахад зориулагдсан номын сан юм. Номын сан нь үндсэн төрлийг өгдөг Ажиглаж болно, хэд хэдэн туслах төрөл (Ажиглагч, Хуваарьлагч, Субьект) болон цуглуулгатай адил үйл явдалтай ажиллах операторууд (газрын зураг, шүүлтүүр, багасгах, бүр болон JavaScript массивын ижил төстэй зүйлс).
Энэ номын сангийн үндсэн ойлголтуудыг ойлгоцгооё.
Ажиглах боломжтой, ажиглагч, продюсер
Ажиглах боломжтой бол бидний авч үзэх анхны үндсэн төрөл юм. Энэ анги нь RxJ-ийн хэрэгжилтийн үндсэн хэсгийг агуулдаг. Энэ нь ажиглагдах боломжтой урсгалтай холбоотой бөгөөд үүнийг бүртгүүлэх аргыг ашиглан захиалж болно.
Observable нь шинэчлэлт гэж нэрлэгддэг туслах механизмыг хэрэгжүүлдэг Observer. Ажиглагчийн үнэ цэнийн эх үүсвэр гэж нэрлэгддэг Үйлдвэрлэгч. Энэ нь массив, давталт, вэб залгуур, зарим төрлийн үйл явдал гэх мэт байж болно. Тиймээс ажиглагдах боломжтой нь Продюсер ба Ажиглагч хоёрын хооронд дамжуулагч гэж хэлж болно.
Observable нь ажиглагчийн гурван төрлийн үйл явдлыг зохицуулдаг:
- дараагийн - шинэ өгөгдөл
- алдаа - үл хамаарах зүйлийн улмаас дараалал дууссан бол алдаа. Энэ үйл явдал нь мөн дарааллыг дуусгахыг илэрхийлдэг.
- бүрэн - дараалал дууссан тухай дохио. Энэ нь дахин шинэ мэдээлэл байхгүй болно гэсэн үг юм.
Демо-г харцгаая:
Эхэндээ бид 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)
);Операторууд бидэнд урсгалтай ажиллах чадвараа өргөжүүлэх боломжийг олгодог. Эдгээр нь Ажиглагдах боломжтой үйл явдлуудыг хянахад тусалдаг. Бид хамгийн алдартай хэд хэдэн зүйлийг авч үзэх бөгөөд операторуудын талаарх дэлгэрэнгүй мэдээллийг хэрэгтэй мэдээллийн холбоосыг ашиглан олж авах боломжтой.
Операторууд - нь
-ын туслах оператороос эхэлцгээе. Энэ нь энгийн утга дээр үндэслэн Ажиглагдахуйцыг үүсгэдэг.
Операторууд - шүүлтүүр
Нэрнээс нь харахад шүүлтүүрийн оператор нь урсгалын дохиог шүүдэг. Хэрэв оператор үнэнийг буцаавал цааш алгасах болно.
Операторууд - авна
авах — Ялгаруулагчдын тооны утгыг авч дараа нь утас дуусна.
Операторууд - 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
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 )
);
Операторууд - combineLatest
combineLatest оператор нь profit.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 - thread бүрээс утгыг хүлээж, эдгээр утгууд дээр үндэслэн массив үүсгэдэг. Хэрэв утга нь ямар ч урсгалаас ирээгүй бол бүлэг үүсэхгүй.
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 нь мөн thread-уудыг нэгтгэдэг боловч бүх хэлхээ дууссан үед л утгыг гаргадаг.
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)
);
Операторууд - хуваалцах, товш
Цоргоны оператор нь гаж нөлөө, өөрөөр хэлбэл дараалалд нөлөөлөхгүй аливаа үйлдлийг хийх боломжийг олгодог.
Хуваалцах үйлчилгээний оператор нь хүйтэн урсгалыг халуун болгон хувиргаж чадна.
Бид операторуудтай ажиллаж дууссан. Сэдэв рүүгээ орцгооё.
Чанга бодож байна
Тэгээд цай уухаар явлаа. Би эдгээр жишээнүүдээс залхаж байна 😀
Субъектийн гэр бүл
Сэдвийн гэр бүл нь халуун урсгалын гол жишээ юм. Эдгээр ангиуд нь нэг төрлийн эрлийз бөгөөд нэгэн зэрэг ажиглаж болохуйц, ажиглагчийн үүргийг гүйцэтгэдэг. Сэдэв халуухан сэдэв тул бүртгэлээ цуцлах шаардлагатай. Хэрэв бид үндсэн аргуудын талаар ярих юм бол эдгээр нь:
- дараагийн - шинэ өгөгдлийг урсгал руу шилжүүлэх
- алдаа - алдаа ба урсгалыг зогсоох
- гүйцэтгэсэн - хэлхээг дуусгах
- бүртгүүлэх - урсгалд бүртгүүлэх
- бүртгэлээ цуцлах - урсгалаас бүртгэлээ цуцлах
- asAbservable – ажиглагч болж хувирна
- toPromise - амлалт болгон хувиргадаг
4 төрлийн хичээл байдаг.
Чанга бодож байна
Урсгал дээр 4 хүн ярьж байсан ч нэгийг нэмсэн. Тэдний хэлснээр амьдарч, суралц.
Энгийн сэдэв new Subject()- хамгийн энгийн төрлийн хичээлүүд. Параметргүйгээр үүсгэсэн. Зөвхөн захиалга хийсний дараа хүлээн авсан утгыг дамжуулдаг.
Зан үйлийн сэдэв new BehaviorSubject( defaultData<T> ) – Миний бодлоор бол хамгийн түгээмэл сэдвийн төрөл. Оролт нь анхдагч утгыг авдаг. Захиалга хийх үед дамжуулагдсан сүүлийн дугаарын өгөгдлийг үргэлж хадгалдаг. Энэ ангид мөн урсгалын одоогийн утгыг буцаадаг ашигтай утгын арга байдаг.
Дахин тоглуулах сэдэв new ReplaySubject(bufferSize?: number, windowTime?: number) - Оролтууд нь өөрөө өөртөө хадгалах утгын буферийн хэмжээг эхний аргумент болгон авч болно, харин хоёр дахь нь бидний өөрчлөх шаардлагатай цаг хугацааг авч болно.
AsyncSubject new AsyncSubject() - бүртгүүлэхэд юу ч тохиолдохгүй бөгөөд зөвхөн дууссаны дараа утгыг буцаана. Зөвхөн дамжуулалтын сүүлчийн утгыг буцаана.
WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - Баримт бичиг түүний талаар чимээгүй байгаа бөгөөд би түүнийг анх удаа харж байна. Түүний юу хийдэгийг мэддэг хүн байвал бичээрэй, бид үүнийг нэмэх болно.
Өө. За, бид өнөөдөр миний танд хэлэхийг хүссэн бүх зүйлийг багтаасан. Энэ мэдээлэл хэрэг болсон гэж найдаж байна. Ашигтай мэдээллийн таб дээрээс лавлагааны жагсаалтыг өөрөө уншиж болно.
хэрэгтэй мэдээлэл
Эх сурвалж: www.habr.com