JavaScript үндэс / Design Pattern үндэс

Design Pattern үндэс

Программчлалд байнга давтагддаг асуудлуудад батлагдсан шийдлүүд байдаг — тэдгээрийг Design Pattern гэнэ. Pattern нь бэлэн код биш, харин "ийм нөхцөлд ийм аргаар зохион байгул" гэсэн зааварчилгаа юм. Хэдхэн үндсэн pattern мэдэхэд бусдын кодыг хурдан уншиж, өөрийн кодыг зохион байгуулалттай болгоход ихээхэн тусална.

Singleton — нэг л объект байх

Singleton pattern нь тодорхой class-аас зөвхөн нэг объект байхыг баталгаажуулна. Тохиргоо (config), log бичигч зэрэг нэг л удаа үүсгэх шаардлагатай зүйлд хэрэглэнэ.

javascript
class Тохиргоо {
  static #жишээ = null; // private static field

  constructor() {
    this.хэл = "mn";
    this.харанхуй_горим = false;
  }

  static авах() {
    if (!Тохиргоо.#жишээ) {
      Тохиргоо.#жишээ = new Тохиргоо();
    }
    return Тохиргоо.#жишээ;
  }
}

const а = Тохиргоо.авах();
const б = Тохиргоо.авах();

console.log(а === б); // true — яг нэг объект
а.харанхуй_горим = true;
console.log(б.харанхуй_горим); // true — ижил объект учраас

Observer — өөрчлөлтийг дамжуулах

Observer pattern нь нэг объект өөрчлөгдөхөд бүртгүүлсэн бусад объектуудыг автоматаар мэдэгдэнэ. Товч дарах, өгөгдөл ачаалах зэрэг үйл явдалд хэрэглэнэ. Браузерийн addEventListener энэ pattern-ийн жишээ юм.

javascript
class Үйл_явдал_удирдагч {
  #сонсогчид = {};

  бүртгүүлэх(үйл_явдал, функц) {
    if (!this.#сонсогчид[үйл_явдал]) {
      this.#сонсогчид[үйл_явдал] = [];
    }
    this.#сонсогчид[үйл_явдал].push(функц);
  }

  дуудах(үйл_явдал, өгөгдөл) {
    (this.#сонсогчид[үйл_явдал] ?? []).forEach((функц) => функц(өгөгдөл));
  }
}

const дэлгүүр = new Үйл_явдал_удирдагч();

дэлгүүр.бүртгүүлэх("худалдан_авалт", ({ бараа }) => {
  console.log(`Нэхэмжлэх: ${бараа} худалдаж авлаа.`);
});

дэлгүүр.бүртгүүлэх("худалдан_авалт", ({ бараа }) => {
  console.log(`Имэйл: ${бараа}-ын баяр хүргэе.`);
});

дэлгүүр.дуудах("худалдан_авалт", { бараа: "JavaScript ном" });
// Нэхэмжлэх: JavaScript ном худалдаж авлаа.
// Имэйл: JavaScript ном-ын баяр хүргэе.

Factory — объект үүсгэх логикийг нуух

Factory pattern нь new ашиглан шууд биш, функцээр дамжуулан объект үүсгэнэ. Ямар class ашиглахыг гаднаас нь нуудаг учраас код уян хатан болдог.

javascript
class Мэйл_илгээгч {
  илгээх(хүлээн_авагч, текст) {
    console.log(`Мэйл → ${хүлээн_авагч}: ${текст}`);
  }
}

class SMS_илгээгч {
  илгээх(хүлээн_авагч, текст) {
    console.log(`SMS → ${хүлээн_авагч}: ${текст}`);
  }
}

// Factory функц — аль класс ашиглахыг нуудаг
function мэдэгдэл_үүсгэх(төрөл) {
  if (төрөл === "мэйл") return new Мэйл_илгээгч();
  if (төрөл === "sms") return new SMS_илгээгч();
  throw new Error(`Тодорхойгүй төрөл: ${төрөл}`);
}

const мэйл = мэдэгдэл_үүсгэх("мэйл");
const sms = мэдэгдэл_үүсгэх("sms");

мэйл.илгээх("bold@mn.com", "Тавтай морил!");
// Мэйл → bold@mn.com: Тавтай морил!

sms.илгээх("+97699112233", "Таны код: 4821");
// SMS → +97699112233: Таны код: 4821

Pattern ашиглах зөвлөгөө

javascript
// Singleton  — дэлхийд нэг л байх зүйл (тохиргоо, лог, cache)
// Observer   — нэгийн өөрчлөлт олон газарт нөлөөлөх үед
// Factory    — үүсгэх логикийг нуух, уян хатан байх шаардлагатай үед

// Хэт ихийг ашиглах нь кодыг хүндрүүлдэг —
// асуудал гарсан үед pattern хэрэглэ, урьдчилан биш.

Design Pattern-г анх харахад хийсвэр санагдаж болно — тэр бол хэвийн. Дадлага хийх тусам "аа, энэ бол Observer pattern байна" гэж таних мөч ирнэ. Тэр мөчийг хүлээж, кодоо цаашид бичсээр байгаарай!

Дараагийн хичээлд:

Вэбийн API-ууд — браузерт суулгагдсан Clipboard, Geolocation, Notification зэрэг API-уудыг хэрхэн ашиглах талаар үзнэ.

← Өмнөх хичээлФункциональ программчлалДараах хичээл →Вэбийн API-ууд (Clipboard, Geolocation)