Brogrammist

Yuqoridagi postni o'qishga eringanlar bo'lsa, oxiridagi xulosa bunday:

Shuni esda tutishingizni xohlagan bo'lardim: har doim yozgan kodingizga qarab, buni yaxshilash mumkinmi degan savolni o'zingizga berib ko'ring. Agar javob "ha" bo'lsa, uni qilish arzigulikmi degan savolni bering. Men ham shu savolni o'zimga berdim va "hozir arzimaydi" degan xulosaga keldim. Chunki muhim ishlar turganda bunga vaqt ketkazgim kelmadi. Shuning uchun ham kodni refaktor qilganim yo'q.

#prioritization

GDG devfest oldidan o'tkazilyotgan online suhbatlarda men ham o'z tajribam bilan bo'lishdim.

https://youtu.be/3Tr2Az3Jv8s

Xo'sh, shu kod bo'yicha "click" hodisasini JS'ning o'zidan chaqirsak-chi? Natija qanday bo'ladi?

Hammaga assalomu alaykum! Kanalga tez-tez post qilolmayatganim uchun meni ma'zur tutasiz degan umiddaman.

Quyida kechagi "viktorina"ning javobi va tahlili.

To'g'ri javob nisbatan ko'p ovoz to'pladi. Lekin bu 41%. Demak javob berganlarning yarmidan ko'pi javobda adashgan. Bu tahlil orqali ko'pchilik to'g'ri javobni yaxshi tushunib oladi degan umiddaman.

Xatolar bo'lishi tabiiy. Shuning uchun firklaringizni izohlarda qoldirsangiz minnatdor bo'lar edim.

Barchaga tashakkur.

Foydalanuvchi button'ni bosganida ushbu kod boyicha loglarimiz qaysi ketma-ketlikda bo'ladi?

JavaScript'ning asinxronligi

Bundan oldingi postda JS'ning sinxronligi va shuning uchun uzoq bajariladigan operatsiyalar asosiy thread'ni bloklab qoyishini yozgandim. Bu postda esa, asosiy-thread’ni bloklamaydigan asinxron JavaScript haqida gaplashamiz.

JavaScript’dagi asinxron operatisyalarni quyidagi ketma-ketlik bilan tariflash mumkin:

1. Ma’lum bir funksiyani chaqirish orqali bajarilishi uzoq vaqt oladigan operatsiyani boshlash.

2. Funksiya operatsiyani boshlagandan so’ng darhol “return” qilishi (ya’ni ishini tugatishi) va boshqa amallarni bajarishda davom etishi.

3. Qachonki o’sha operatsiya tugaganda notifikatsiya olish.

Asinxron operatsiyaga eng oddiy misol bu veb-sahifadagi event’lar bilan ishlash:

button.addEventListener(
 'click', 
 () => console.log('Tugma bosildi!')
);

Tepadagi misolda addEventListener metodini chaqirganimizda dasturimiz shu joyda to’xtab qolmaydi. Ya’ni, qachon “click” sodir bolarkan demasdan undan keyingi keladigan ishlarni bajarishda davom etaveradi. Qachondir “click” sodir bo’lganidagina, biz registratsiya qilgan callback/handler funksiyamiz chaqirladi.

setTimeout(() => {
    console.log('Vaqt tugadi');
}, 1000);

setTimeout funksiyasi ham asinxron operatsiya bajaradi. Uni chaqirganimizda, orqa fonda taymer ishga tushadi va taymer vaqti tugab, ishini yakunlarkan, biz bergan callback chaqiriladi.

Umuman olganda, JavaScript’dagi barcha asinxron amallar event tushunchasi bilan bog’liq: qandaydir operatsiya orqa fonda bajariladi va u tugagach unga mos event sodir bo’lgani haqida notifikatsiya beriladi.

Shu joyda bir narsani yodda sanqlang: asinxron operatsiyalar (event sodir bolishini, network request javobini yoki taymerni kutish) orqa fonda bajariladi, ularning callback/handler’lari esa asosiy thread’da ishga tushadi. Shuning uchun bu asinxron operatsiyalar asosiy thread’ni bloklamasa ham, ulardan keyin qilinadigan operatsiyalar (biz bergan handler’lar) uni bloklab qo’yishi mumkin.

To be continued. Keyingi post Promise haqida.

Yuqoridagi tushunchalarni iloji boricha soddaroq va qisqaroq ifodalashga harakat qildim. Lekin nistaban chuqurroq mavzular bo'lgani uchun bu oson emas. Agar savollar bo'lsa bemalol so'rayverasizlar. 🙂

JavaScript'ning sinxronligi

Oldin JavaScript nimaligiga javob beraylik. JavaScript bu - ECMAScript spetsifikatsiyasi bo'yicha ishlab chiqilgan til. Ya'ni ECMAScript bu - standart, JavaScript esa o'sha standartning implementatsiyasi. (Yuzaki tushuntirish bo'ldi,chunki bu mavzu uchun alohida post yozsa arziydi.)

JS kodimiz ishga tusharkan, interpretator kodimizni o'ngdan chapga, tepadan pastga qatorma-qator o'qishini bilamiz. Bizning yozgan har bitta amal ketma-ket, sinxron ravishda bajariladi. Masalan:

function bigProcess() {
let sum = 0;
let i = 100000000;

while (i--) sum += i;

return sum;
}

console.log("start");
console.log(bigProcess());
console.log("end");

Natija:
> start
> 4999999950000000
> end

Ko'rinib turibdiki, "bigProcess()" tugamas ekan, undan keyingi kodimiz ishga tushmaydi. Ya'ni kodimiz bajarilishi shu joyda bloklanib qoladi. Eng yomon tarafi, bu kodni brauzerda ishlatarkanmiz, bu og'ir operatsiya oxiriga yetmaguncha butun sahifa qotib qoladi. Hatto CSS bilan yozilgan animatsiyalargacha muzlaydi.

Buning sababi, JS "single-threaded"(shunga o'zbekcha nom topish kerak) va veb-sahifadagi barcha operatsiyalar o'sha thread'da bajariladi. Bunga HTML'ni taxlil qilinishi ham, CSS stillarni biriktirilish ham kiradi. Bularning barchasini esa hosdisalar sikli ("event loop") ma'lum ketma-ketlikda bajarilishini taminlaydi. Hodisalar sikli "call stack"ni, "callback queue"ni, DOMdagi o'rgarishlarni va boshqalarni kuzatib turadi. Ularning birortasida qilinadigan ish paydo bo'lsa, o'sha ishlar asosiy "thread"da bajariladi.

"Event loop" mavzusining o'zi ham juda katta va qiziq mavzu. Bu haqida ham keyinroq post yozaman.

Yana bir zo'r use-case bu funksiyalarni proksilash. Aytaylik qandaydir kutubxonadan foydalanyapmiz va uning o'znini o'zgartirolmasak, uni proksilashimiz mumkin:

import fancy from "fancy";

fancy = new Proxy(fancy, {
  apply(target, thisArg, argumentList) {
    return Reflect.apply(
      target, 
      thisArg, 
      argumentList
    );
  },
});

Albatta buni soddaroq qilib, funksiyani yangi funksiya bilan o'rab ishlatsak ham bo'ladi. Asosiysi holatga qarab, vaziyatga eng mos tushadigan usuldan foydalanish.

"Eee akaa, bu bo'ganku! Obyektlarda getter/setter'lar bor-ku o'zi!"

deyotgan bo'lsangiz, haqsiz. Lekin Array'da getter/setter yo'q-ku!

let ages = [12, 6, 75];

ages = new Proxy(ages, {
  set(target, key, val) {
    if (typeof val !== "number")
      throw new TypeError("Faqat son qiymatlar olinadi!");

    if (val < 0 || val > 120)
      throw new TypeError("Odamlar buncha yashamaydi!");

    target[key] = val;
    return true;
  },
});

Proxy obyektini bilarmidingiz?

Proxy(object, handler) bizga obyektlar uchun proksi obyekt yaratish imkonini beradi. Bu bilan biz obyetklardagi fundamental operatsiyalarni "intercept/override" qilishimiz mumkin. Ya'ni ularni o'zimizga kerakli ravishda ishlaydigan qila olamiz.

Masalan, eng sodda misol, obyektda biz bergan maydon bo'lmasa "undefined" o'rniga defolt qiymat qaytarish:

const dict = {
  defolt: "default",
  maydon: "field",
};

const proxy = new Proxy(dict, {
  get(target, key, receiver) {
    // agar `key` mavjud bo'lsa,
    // mos qiymat qaytaramiz
    if (target[key]) 
      return target[key];

    // agar `key` yo'q bo'sa,
    // `key`ning o'zini
    return key;
  },
});

console.log(proxy.maydon);
// "field"
console.log(proxy.nimadir);
// "nimadir

"


Yoki setterga validatsiya qo'shishimiz mumkin:

const proxy = new Proxy(dict, {
  set(target, key, val) {
    if (typeof val !== "string")
      throw new TypeError("Faqat string qiymatlar olinadi!");

    target[key] = val;
    return true;
  },
});

Aytgancha, proksi obyekt birinchi obyektimizni to'liq "overwrite" qilishi kerak. Chunki ularning ikkovi ham kodimizda bo'lishi chalkash holatlarni yuzaga keltiradi. Shuning uchun har doim bunday qiling:

let obj = {...};

obj = new Proxy(obj, handler);