Chapter 42 — Design Patterns in JavaScript

PART 7 (Advanced Concepts) boshlanadi. Bu bobda dasturlashda tez-tez uchraydigan muammolarni hal qilishning "isbotlangan" usullari — Design Patternlarni o'rganamiz.

---

42.1 Design Pattern nima?

Simple Explanation

Design Pattern — dasturlashda tez-tez takrorlanadigan muammolarni hal qilishning umumiy, "qayta ishlatiladigan" yechim naqshi.

Real-Life Analogy

🏗️ Design Pattern'larni qurilishdagi standart yechimlarga o'xshating: har safar yangi uy qurilganda "eshikni qanday osish kerak" haqida noldan o'ylab topish shart emas — bu allaqachon "isbotlangan" standart yechim.

42.2 Singleton Pattern

Simple Explanation

Singleton — bir butun dastur davomida, biror class'dan faqat bitta instance (nusxa) mavjud bo'lishini ta'minlaydigan naqsh.

Why Does It Exist?

Ba'zi narsalar — masalan, dastur konfiguratsiyasi yoki bitta ma'lumotlar bazasi ulanishi — bir nechta alohida nusxada bo'lishi mantiqsiz va xatoliklarga olib kelishi mumkin.

Example

script.js
JavaScriptNusxalash
01class Configuration {
02    static #instance;
03 
04    constructor() {
05        if (Configuration.#instance) {
06            return Configuration.#instance;
07        }
08        this.settings = {};
09        Configuration.#instance = this;
10    }
11 
12    set(key, value) {
13        this.settings[key] = value;
14    }
15 
16    get(key) {
17        return this.settings[key];
18    }
19}
20 
21let config1 = new Configuration();
22config1.set("theme", "dark");
23 
24let config2 = new Configuration();
25console.log(config2.get("theme")); // "dark" — bu XUDDI SHU instance!
26 
27console.log(config1 === config2); // true

How It Works

1. Chapter 25'da o'rgangan static field (#instance) — barcha instance'lar orasida "umumiy xotira" vazifasini o'taydi.
2. Constructor ichida, agar #instance allaqachon mavjud bo'lsa, yangi object yaratish o'rniga, mavjud bo'lgan instance qaytariladi.
3. Natijada, new Configuration() necha marta chaqirilmasin, har doim bitta xuddi shu object qaytariladi.

🔗 Connection
Bu naqsh — Chapter 24'da o'rgangan Encapsulation (#instance — private field) va Chapter 25'dagi Static xususiyatlarni birlashtirib ishlatadi.

42.3 Factory Pattern

Simple Explanation

Factory Pattern — object yaratish jarayonini alohida function/metodga "ishonib topshirish", new ClassName()ni to'g'ridan-to'g'ri chaqirish o'rniga.

Example

script.js
JavaScriptNusxalash
01class Car {
02    constructor(model) {
03        this.type = "Car";
04        this.model = model;
05    }
06}
07 
08class Truck {
09    constructor(model) {
10        this.type = "Truck";
11        this.model = model;
12    }
13}
14 
15function vehicleFactory(type, model) {
16    switch (type) {
17        case "car":
18            return new Car(model);
19        case "truck":
20            return new Truck(model);
21        default:
22            throw new Error("Noma'lum vositalar turi");
23    }
24}
25 
26let myCar = vehicleFactory("car", "Camry");
27let myTruck = vehicleFactory("truck", "F-150");

Explanation

Foydalanuvchi (kod chaqiruvchisi) Car yoki Truck class'larining o'zi haqida bilishi shart emas — u faqat vehicleFactoryga "nima kerakligini" aytadi, qolgan murakkab yaratish mantiqi factory ichida yashiringan.

🔗 Connection
Bu — Chapter 25.3'da o'rgangan Static Factory Metodlarning kengaytirilgan, alohida function shaklidagi versiyasi.

42.4 ⚠️ Qiyin mavzu: Observer Pattern

Simple Explanation

Observer Pattern — bitta object'da ("subject") o'zgarish yuz berganda, unga "obuna bo'lgan" boshqa barcha object'lar ("observers") avtomatik ravishda xabardor qilinishini ta'minlaydigan naqsh.

Real-Life Analogy

📰 Observer Pattern'ni gazeta obunasiga o'xshating: gazeta nashriyoti (subject) yangi son chiqarganda, u barcha obunachilarga (observers) avtomatik yuboradi — nashriyot har bir obunachini alohida-alohida "qidirib yurishi" shart emas.

Example

script.js
JavaScriptNusxalash
01class NewsPublisher {
02    #subscribers = [];
03 
04    subscribe(callback) {
05        this.#subscribers.push(callback);
06    }
07 
08    unsubscribe(callback) {
09        this.#subscribers = this.#subscribers.filter(sub => sub !== callback);
10    }
11 
12    publish(news) {
13        this.#subscribers.forEach(callback => callback(news));
14    }
15}
16 
17let publisher = new NewsPublisher();
18 
19function subscriber1(news) {
20    console.log("Obunachi 1: " + news);
21}
22 
23function subscriber2(news) {
24    console.log("Obunachi 2: " + news);
25}
26 
27publisher.subscribe(subscriber1);
28publisher.subscribe(subscriber2);
29 
30publisher.publish("Yangi JavaScript versiyasi chiqdi!");
31// "Obunachi 1: Yangi JavaScript versiyasi chiqdi!"
32// "Obunachi 2: Yangi JavaScript versiyasi chiqdi!"

How It Works

1. #subscribers — barcha "obuna bo'lgan" callback function'larni saqlovchi private array (Chapter 24).
2. subscribe() — yangi obunachini ro'yxatga qo'shadi.
3. publish() — barcha obunachilarni bir vaqtda, forEach (Chapter 14) orqali xabardor qiladi.

🔥 Important
Bu naqsh — Chapter 33'da o'rgangan addEventListener()ning ichki ishlash mantig'iga juda o'xshaydi! Aslida, brauzerning event tizimining o'zi — Observer Pattern'ning yirik miqyosdagi amaliy qo'llanilishi hisoblanadi.

Diagram

code.text
TEXTNusxalash
01NewsPublisher
02      │
03      ├── publish() chaqirilganda
04      │
05      ▼
06┌──────────┬──────────┬──────────┐
07│Obunachi 1│Obunachi 2│Obunachi 3│  ← barchasi bir vaqtda xabardor qilinadi
08└──────────┴──────────┴──────────┘

42.5 Module Pattern

Simple Explanation

Module Pattern — Chapter 12 (Closure) yordamida, "private" va "public" qismlarni ajratib, tashqi dunyoga faqat kerakli interfeysni ko'rsatish naqshi.

Example

script.js
JavaScriptNusxalash
01const Calculator = (function () {
02    let result = 0; // private — closure orqali yashirilgan
03 
04    return {
05        add(x) {
06            result += x;
07            return this;
08        },
09        subtract(x) {
10            result -= x;
11            return this;
12        },
13        getResult() {
14            return result;
15        }
16    };
17})();
18 
19Calculator.add(10).subtract(3);
20console.log(Calculator.getResult()); // 7

Explanation

Bu — darhol chaqiriladigan function (IIFE — Chapter 12.3'da eslatib o'tilgan edi), u resultni closure orqali "yashiradi" va faqat add, subtract, getResult metodlarini tashqariga ochadi.

🔗 Connection
Bu naqsh — Chapter 38'da o'rgangan ES6 Modullar paydo bo'lishidan oldin, JavaScript'da modul tizimini simulyatsiya qilish uchun ishlatilgan asosiy usul edi. Hozirgi kunda, ES6 Modullar buning zamonaviy, rasmiy alternativi hisoblanadi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
Logger nomli Singleton class yarating — u log(message) metodiga ega bo'lsin. Ikkita new Logger() chaqiruvi bir xil instance qaytarishini isbotlang.
Required Concepts:

• Singleton Pattern
  Hint:
  Chapter 42.2'dagi Configuration misolidan namuna oling.

🟡 Exercise 2 — Medium

Task:
shapeFactory(type, size) nomli Factory function yozing — type "circle" yoki "square" bo'lishi mumkin, mos Circle/Square class instance'ini qaytarsin, har biri area() metodiga ega bo'lsin.
Required Concepts:

• Factory Pattern
  Hint:
  Chapter 42.3'dagi misolga o'xshab yozing.

🔴 Exercise 3 — Hard

Task:
To'liq Observer Pattern implementatsiyasini yozing: EventEmitter class'i on(eventName, callback), off(eventName, callback), emit(eventName, data) metodlariga ega bo'lsin — bu safar turli nomlangan hodisalar uchun turli obunachilarni qo'llab-quvvatlasin (bitta umumiy ro'yxat o'rniga, eventName bo'yicha guruhlangan).
Required Concepts:

• Observer Pattern
• Map yoki Object (guruhlash uchun)
  Hint:
  Ichki saqlash uchun Map yoki oddiy object ishlatib, har bir eventName uchun alohida callback array saqlang.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01class Singleton {
02    static #instance;
03 
04    constructor(value) {
05        if (Singleton.#instance) {
06            return Singleton.#instance;
07        }
08        this.value = value;
09        Singleton.#instance = this;
10    }
11}
12 
13let a = new Singleton(10);
14let b = new Singleton(20);
15 
16console.log(a.value);
17console.log(b.value);
18console.log(a === b);

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> 10 10 true

Why?
new Singleton(10) — birinchi marta chaqirilganda, #instance hali mavjud emas, shuning uchun yangi object yaratiladi va value = 10 beriladi. new Singleton(20) chaqirilganda — #instance allaqachon mavjud, shuning uchun mavjud instance (o'zining value = 10 bilan) qaytariladi, 20 esa e'tiborga olinmaydi. a va b — aynan bitta xuddi shu object.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor — Observer Pattern to'g'ri ishlamayapti:

script.js
JavaScriptNusxalash
01class Publisher {
02    subscribers = [];
03 
04    subscribe(callback) {
05        this.subscribers.push(callback);
06    }
07 
08    publish(data) {
09        this.subscribers.forEach(sub => sub(data));
10    }
11}
12 
13let pub1 = new Publisher();
14let pub2 = new Publisher();
15 
16pub1.subscribe(data => console.log("Pub1: " + data));
17 
18pub2.publish("Test"); // Dasturchi buni ham chiqishini kutgan, lekin hech narsa chiqmaydi

Your Task:

• Nima uchun pub2.publish("Test") hech narsa chiqarmasligini tushuntiring.
• Bu — xatomi, yoki kutilgan xatti-harakatmi?

<details> <summary>Solution</summary> Tushuntirish: Bu — aslida kod xatosi emas, balki dasturchining tushunchasidagi xato. pub1 va pub2 — Publisherning ikkita mustaqil, alohida instance'lari (Chapter 22-23), har biri o'zining alohida subscribers array'iga ega. subscriber1 faqat pub1ga obuna bo'lgan, pub2ga emas, shuning uchun pub2.publish() chaqirilganda, pub2ning bo'sh subscribers ro'yxati ishlaydi va hech narsa chiqmaydi.

Agar bir xil obunachi barcha nashriyotchilarni "eshitishi" kerak bo'lsa, obunani har bir instance'ga alohida-alohida qilish kerak:

script.js
JavaScriptNusxalash
01pub1.subscribe(data => console.log("Pub1: " + data));
02pub2.subscribe(data => console.log("Pub2: " + data));
03 
04pub2.publish("Test"); // Endi "Pub2: Test" chiqadi

</details>

📌 Chapter Summary

• Design Pattern — takrorlanadigan muammolarni hal qilishning isbotlangan, umumiy yechimi.
• Singleton — bitta class'dan faqat bitta instance mavjud bo'lishini kafolatlaydi.
• Factory — object yaratish mantiqini alohida function/metodga jamlaydi.
• Observer — bir object o'zgarganda, obuna bo'lganlarni avtomatik xabardor qiladi.
• Module Pattern — Closure orqali private/public qismlarni ajratadi.

🎯 Key Takeaways

• Design Pattern'lar — "noldan o'ylab topish" o'rniga, isbotlangan yechimlardan foydalanish imkonini beradi.
• Singleton — global konfiguratsiya, yagona ulanish kabi holatlarda foydali.
• Observer Pattern — brauzerning addEventListener tizimining nazariy asosini tashkil qiladi.
• Module Pattern — ES6 Modullardan oldin, JavaScript'da "private" kod yozishning asosiy usuli edi.
• Bu boblar — kitobning boshidan shu yergacha o'rgangan barcha bilimlarni (Closure, Class, Static, Private field) birlashtirgan holda qo'llaydi.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01// Singleton
02class Singleton {
03    static #instance;
04    constructor() {
05        if (Singleton.#instance) return Singleton.#instance;
06        Singleton.#instance = this;
07    }
08}
09 
10// Factory
11function factory(type) { 
12    if (type === "a") return new ClassA();
13    return new ClassB();
14}
15 
16// Observer
17class Publisher {
18    #subs = [];
19    subscribe(fn) { this.#subs.push(fn); }
20    publish(data) { this.#subs.forEach(fn => fn(data)); }
21}

---