DEV Community: Ismoil Turdaliyev

Chain of Responsibility O'zbek tilida

Ismoil Turdaliyev — Tue, 24 Dec 2024 14:38:40 +0000

Chain of Responsibility pattern (Behavioral pattern, 1-pattern)

Tasavvur qiling, siz kredit olish uchun ariza topshirdingiz. Bu ariza bir necha bosqichdan o‘tadi:

Operator sizning hujjatlaringizni tekshiradi. Agar hamma narsa joyida bo‘lsa, u keyingi bosqichga yuboradi.

Kredit bo‘limi boshlig‘i kreditni tasdiqlaydi yoki qo‘shimcha tekshiruv uchun o‘z bo‘limiga yuboradi.

Agar masala murakkab bo‘lsa, bosh direktor qaror qabul qiladi.

**Bu jarayonda har bir bo‘g‘in o‘z vazifasini bajaradi va masalani keyingi bo‘g‘inga yuboradi. Agar muammo birinchi bo‘g‘inda hal bo‘lsa, keyingi bo‘g‘inlar jalb qilinmaydi.

React va Frontendda Chain of Responsibilit

Bu patternni React’da ishlatishning bir usuli — form validatsiyasi. Har bir qadamda validatsiya qilish, xatolikni aniqlash va kerak bo‘lsa keyingi bosqichga yuborish orqali amalga oshiriladi.

// 1. Validatsiya funksiyalarini aniqlash
const validateRequired = (value, next) => {
  if (!value) {
    return "Maydon majburiy";
  }
  return next(value);
};

const validateEmail = (value, next) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(value)) {
    return "Email noto‘g‘ri formatda";
  }
  return next(value);
};

const validateLength = (value, next) => {
  if (value.length < 5) {
    return "Maydon uzunligi kamida 5 ta belgidan iborat bo‘lishi kerak";
  }
  return next(value);
};

// 2. Chain of Responsibility’ni amalga oshirish
const createValidatorChain = (...validators) => {
  return (value) => {
    const process = (index, val) => {
      if (index >= validators.length) return null;
      return validators[index](val, (newVal) => process(index + 1, newVal));
    };
    return process(0, value);
  };
};

// 3. Form validatsiyasi
const validate = createValidatorChain(validateRequired, validateEmail, validateLength);

export default function App() {
  const [value, setValue] = React.useState("");
  const [error, setError] = React.useState("");

  const handleSubmit = () => {
    const validationError = validate(value);
    if (validationError) {
      setError(validationError);
    } else {
      alert("Form yuborildi!");
    }
  };

  return (
    <div style={{ padding: "20px" }}>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Emailingizni kiriting"
        style={{ padding: "10px", marginBottom: "10px" }}
      />
      {error && <p style={{ color: "red" }}>{error}</p>}
      <button onClick={handleSubmit}>Yuborish</button>
    </div>
  );
}```




## Qanday foyda beradi?

• Validatsiya bosqichlarini mustaqil sinflar/funksiyalar sifatida tashkil qilish imkonini beradi.
• Kodni modulli va qayta ishlatish mumkin bo‘lgan holga keltiradi.
• Kengaytirish oson: yangi validatsiya qo‘shish uchun faqat yangi funksiyani yozish va zanjirga qo‘shish kifoya.

🎞 https://www.youtube.com/watch?v=gpSQDpy6Zq4

#DESIGN_PATTERN #CHAIN_OF_RESPONSIBILITY

Command design pattern 🥷 O'zbek tilida

Ismoil Turdaliyev — Tue, 24 Dec 2024 14:34:23 +0000

Har bir berilgan buyruqni orqaga qaytarish usuli kerak bo'lishi mumkin (text editorlardagi undo/redo funksiyalari misol uchun). Bunda HAR BIR berilgan buyruqni saqlab qo'yish kerak. Saqlash uchun ular oddiy buyruq emas qandaydir object ko'rinishida bo'lishi kerak. Dalil keltirishda ham "dedi dedi" ga ishonib bo'lmaganidek.

Har bir buyruq berilganda uni command orqali ya'ni buyur beradigan funksiya orqali beriladi. U buyruq beradigan komandor har bir qigan ishini yozib saqlab yuradi. Aytaylik 10 ga beshni qo'sh deyilsa 15 qilib xotirasiga ma'lum songa 5 qo'shganini agarni uni orqaga qaytarmoqchi bo'lsa 5 ayirish kerakligini biladi. Oxirgi amalingni orqaga qaytar deyilsa oxirgi amalga qarab uni orqaga qaytarish uchun yana bir buyruq beradi, ya'ni, 5 ni ayir deb.

Command design pattern commandalarni (commanda 5 qo'shish bo'lsa, demak buni orqaga qaytarish minus 5 bo'ladi va bu commandaning ichida undo funksiyasida -5 bo'ladi) ishlatib yani ularni ichidagi bajarish (5 qo'shish) ni ishga tushuradi va shu komandani (ichida 5 qo'shish va ayirish bo'lgan) saqlab qoyadi commandalar listiga

Command design pattern shu)

🎞 https://youtu.be/UFmB_1nuRT4?si=VYrrEsNLDGnOSaLO

COMMAND #DESIGN_PATTERN

Iterator design pattern O'zbek tilida

Ismoil Turdaliyev — Tue, 24 Dec 2024 14:32:35 +0000

Iterator design pattern

🎯

Iterator design pattern - bu kollektsiyadagi obyektlar (masalan, massivlar, ro'yxatlar, daraxtlar) ustida birma-bir yurish (iteratsiya qilish) uchun ishlatiladi. Bu pattern yordamida kollektsiyaning ichki tuzilishini bilmasdan, uning elementlariga kirish mumkin.

Masalan, sizda katta kitoblar ro'yxati bor va har bir kitobni birma-bir ko'rib chiqmoqchisiz. Iterator pattern sizga shu jarayonni osonlashtiradi!
Qismlar:
Iterable interfeysi: Kollektsiya ichida yurish uchun iteratorni qaytaradi.
Iterator interfeysi: Kollektsiya ustida yurish uchun next(), hasNext() kabi metodlarni ta'minlaydi.
Konkret kollektsiya: Bu kollektsiya yoki to'plam bo'lib, unda iteratorni yaratish lozim.
Konkret iterator: Kollektsiya elementlarida yurishni ta'minlaydi.

// 1. Iteratorni yaratadigan funksiya
function createIterator<T>(items: T[]) {
  let index = 0; // Iterator ichki holati (closure ichida yashiringan)

  return {
    next: (): T | null => {
      if (index < items.length) {
        return items[index++];
      }
      return null;
    },
    hasNext: (): boolean => index < items.length,
  };
}

// 2. Foydalanish
const books = [
  { title: "O'tgan kunlar" },
  { title: "Mehrobdan Chayon" },
  { title: "Ikki eshik orasi" },
];

const bookIterator = createIterator(books);

while (bookIterator.hasNext()) {
  const book = bookIterator.next();
  console.log(book?.title);
}

Javob:

O'tgan kunlar
Mehrobdan Chayon
Ikki eshik orasi

Yanam yaxshiroq:

// 1. Filtrlash imkoniyatiga ega iteratorni yaratadigan funksiya
function createFilteredIterator<T>(items: T[], filterFn: (item: T) => boolean) {
  let index = 0;

  return {
    next: (): T | null => {
      while (index < items.length) {
        const item = items[index++];
        if (filterFn(item)) {
          return item;
        }
      }
      return null;
    },
    hasNext: (): boolean => {
      for (let i = index; i < items.length; i++) {
        if (filterFn(items[i])) {
          return true;
        }
      }
      return false;
    },
  };
}

// 2. Foydalanish
const users = [
  { name: "Ali", isActive: true },
  { name: "Vali", isActive: false },
  { name: "Salim", isActive: true },
  { name: "Dilnoza", isActive: false },
];

// Aktiv foydalanuvchilarni iteratsiya qilish uchun iterator yaratamiz
const activeUserIterator = createFilteredIterator(users, (user) => user.isActive);

while (activeUserIterator.hasNext()) {
  const user = activeUserIterator.next();
  console.log(user?.name);
}

Javobi:
Ali
Salim

🎞 https://youtu.be/PAmrBOrXLAE

DESIGN_PATTERN #ITERATOR

Mediator design pattern O'zbek tilida

Ismoil Turdaliyev — Tue, 24 Dec 2024 14:27:48 +0000

Muammo va Yechim
Zamonaviy React ilovalarida komponentlar o'rtasidagi aloqa murakkablashib ketishi oddiy hol. Ayniqsa, bir nechta komponentlar bir-biri bilan o'zaro bog'liq bo'lsa, kod tez orada boshqarib bo'lmaydigan darajaga yetishi mumkin. Bu muammolarni hal qilish uchun Mediator pattern mukammal yechim bo'la oladi.

Mediator Pattern Nima?
Mediator pattern - bu obyektlar o'rtasidagi to'g'ridan-to'g'ri aloqani kamaytirish orqali ularning bir-biriga bog'liqligini kamaytiruvchi design pattern. U barcha aloqalarni markaziy mediator orqali o'tkazadi.

Aytaylik 🛩 uchoqlar (airplane) 🛬 qo'nish maydoniga qo'nishdan oldin ular markaziy boshqaruvga bog'lanib yo'lakka qo'nadi. Lekin markazga bog'lanmagan holatda ishlashsa 200 ta uchoq bir birlari bilan gaplashib hechkim yo'qmi, qaysi yo'lakka qo'nish mumkin deb so'rashlari va katta tartibsizlik bo'lishi aniq ⚠️

Mediator vs Facade
Mediator:

Ikki tomonlama aloqa
Bo'limlar boshqaruvchi haqida biladi
Boshqa bo'lim bilan muloqot mediator orqali
Bo'limlar orasini soddalashtirish

Facade:

Bir tomonlama aloqa
Murakkab tizimni osonlashtiruvchi interface
Mijoz faqat facade bilan ishlaydi (boshqa bo'lim bilan emas)
Tizim murakkabligini yashirishga qaratilgan

Scalability va Maintenance uchun qulay!

MEDIATOR #DESIGN_PATTERN

Memento Design Pattern O'zbek tilida

Ismoil Turdaliyev — Tue, 24 Dec 2024 14:26:24 +0000

Memento Design Pattern

– obyektning ichki holatini (state) vaqtinchalik saqlab qo‘yish va uni keyinchalik tiklash imkonini beruvchi konseptual yechim. Bu pattern undo/redo funksionalliklarini yaratishda juda qo‘l keladi.

Hayotiy taqqoslash
Aytaylik Kitob, Xatcho'p, Kitobxon. Kitobni kitobxon o'qish jarayonida kerakli varoqlarga xatcho'p qoyib ketadi. Kerakli vaqtda xatcho'p joylashga varoqni ochadi va kerakli joy bo'ladi.

Kitob — bu Originator, uning sahifasi hozir qayerda ekanligini biladi.
Xatcho’p — bu Memento, u faqat qaysi sahifada ekaningizni saqlab turadi.
Kitobxon (o‘quvchi) — bu Caretaker, siz xatcho’pni saqlaysiz va kerak bo‘lsa kitobga qaytarib qo‘yasiz.

Bu patternda 3 ta asosiy komponent ishlaydi:

1. Originator: Saqlanishi kerak bo‘lgan holatni o‘zida ushlab turadi va memento (eslatma) yarata oladi yoki mementodan holatini tiklaydi.
2. Memento: Obyektning saqlangan holatini ifodalovchi narsa. U ma’lumotlarni o‘zida saqlaydi, lekin boshqa komponentlar bilan o‘zaro muloqot qilmaydi.
3. Caretaker: Mementoni boshqaradi (saqlaydi va kerak bo‘lganda tiklaydi), lekin memento ichidagi ma’lumotni bilmaydi.

Qo'llash mumkin caselardan: Grafik dasturlar, Formalar, O'yinlar, Editorlar, ...

Ammo har bir stateni saqlash memorydan ko'p joy oladi.

Yechimlar:

Delta saqlash usulidan foydalanish
Compress qilish, misol, JSON qilish orqali

MOMENTO #DESIGN_PATTERN

Observer Design Pattern O'zbek tilida

Ismoil Turdaliyev — Tue, 24 Dec 2024 14:22:06 +0000

Bir obyektning holati o‘zgarganda, unga obuna bo‘lgan boshqa obyektlarni avtomatik ravishda xabardor qilishni ta’minlaydigan dizayn modeli. Bu pattern publish-subscribe modeliga asoslangan bo‘lib, bir nechta obyektlarning o‘zaro bog‘liqligini boshqarishda ishlatiladi.

Hayotiy taqqoslash
Malika bozorda bir mijoz bor va u mijoz Iphoneni yangi rusumi kelishi bilan xarid qiladi. Kechagina Iphone 17 ni ko'rdi va dokonga bordi. Keldimi shu rusumi deyishsa yo'q hali kelmadi deyishdi. 1 haftadan keyin, 2 haftadan keyin, 3 haftadan keyin yana yana yana kelaverib keldimi shu rusumidan deyaveradi. Yaxshi yechimi mijozni nomerini olib qolib Iphone kelganida unga telefon qilish

Publisher - sotuvchi (yangi telefon kelsa habardor qiladigan inson)
Subscribers - mijoz (sotuvchidan yangilik kutib o'tiradigan Kit)

Observer Patternning asosiy komponentlari

Subject: Kuzatiladigan obyekt (masalan, yangiliklar kanali).
Observers: Subject’ning holatlarini kuzatib boradigan obyektlar (masalan, obunachilar).
Xabarnoma mexanizmi: Subject va Observers o‘rtasidagi o‘zaro aloqa.

Buyerda esa code:

Happy coding

Observer #design #pattern #Ismoil #Turdaliyev