Үйлдвэрийн арга (Factory Method) хэв нь ямар нэгэн классын обьектыг үүсгэх интерфейсийг тодорхойлдог. Гэхдээ яг ямар классын обьектыг үүсгэх шийдлийг дэд класс шууд гаргадаг. Өөрөөр хэлбэл суурь класс хүүхэд классуудад обьект үүсгэхийг дамжуулахыг энэхүү хэвээр хийдэг.

Удамшуулалтад суурь классаас өвлөн ирсэн аргын ажиллагааг удамшсан класст өөрчлөх хэрэгцээ ихээр гардаг. Энэ тохиолдолд удамшсан класст суурь классийн арга, шинжүүдийг дахин тодорхойлж болдог.
Удамшсан класст дахин тодорхойлж болох арга, шинжүүдийг суурь класст virtual модификатороор тэмдэглэнэ. Ийм арга, шинжүүдийг виртуал гэж нэрлэдэг. Удамшсан класст эдгээр аргуудыг дахин тодорхойлохдоо override модификаторийг ашиглана.

Бид Дадлага. /Төсөл үүсгэх/ хичээлээр өмнөх хичээлүүдэд үзсэн онолын мэдлэгээ батагах үүднээс төслийг үүсгэсэн. Одоо дадлагын төслийн зохион байгуулалтыг хариуцах суурь компонентийг үүсгэе. Энэ компонент сайтад үзүүлэх хуудасны бүх элементүүдийг багцлан агуулах юм. Энэхүү суурь компонент бусад компонентуудийг багцлах тул дээд түвшингийн компонент гэж үзэж болно.

C# нь хатуу төрөлжилттэй хэл тул програмийн кодод ашиглагдаж буй бүх хувьсагчдийн төрлийг заавал тодорхойлосон байх шаардлагатай. Энд төрлүүдийн хувиргалт ухагдхуун маш чухал үүрэгтэй. Төлвүүдийн хөрвүүлэлтийн логикийг ойлгоогүйгээс үүдэн програмийн ажиллагааны явцад алдаа гарах явдал цөөнгүйн дээр ийм төрлийн алдааг илрүүлэхэд нилээд хүндрэл үүсэх талтай. Иймд хэлний онцлогийг зөв ойлгон эзэмшихийг зөвлөе.
Бид Суурь өгөгдлийн төрлүүдийн хөрвүүлэлт хичээлд энгийн төрлүүдийн обьектийн хувиргалтыг үзсэн. Одоо классийн обьектуудын хувиргалтыг авч үзье.

Манай хичээлийн жишээ бага болохоор Vuex store -ийн хэмжээ жижиг байгаа. Төслийг хөгжүүлэхийн хирээр компонентуудын тоо өсөхийн зэрэгцээ Vuex store -д тодорхойлогдох зүйлүүд нэмэгдэн ирэх нь ойлгомжтой. Эндээс state, mutation, getters, actions -д олон тооны зүйлүүдийг тодорхойлон өгснөөр файлын хэмжээ томрох, кодийг ойлгоход хүндрэлтэй болон ирнэ. Иймээс Vuex store -ийг төрөл бүрийн модулд хуваан жижиглэх арга байдгийг хичээлээр авч үзье.

Загварчлалын зарчмуудын нэгээр классуудын багцуудыг үүсгэхдээ тэдгээрийн тодорхой хэрэгжүүлэлтийн бус харин интерфейсүүдийн түвшинд загварчлах хэрэгтэй гэж үздэг. Энэ тохиолдолд интерфейс гэдэгт зөвхөн interface гэсэн түлхүүр үгээр тодорхойлогдсон C# хэлний төрлийг ойлгохоос гадна ямар нэгэн тодорхой хэрэгжүүлэлт байхгүй функционал боломжуудын тодорхойлолтыг ойлгох хэрэгтэй. Өөрөөр хэлбэл энэхүү тодорхойлолтод интерфейсүүд болон тодорхой хэрэгжүүлэлт байхгүй абстракт аргуудтай байж болох абстракт классууд ч хамрагдсан гэсэн үг.

Хукууд ердийн функцууд тул бид ч өөрсдөө хукийг зохион ашиглах боломжтой. Үүнийг input элемент, түүнд оруулсан текстийг үзүүлэх h1 гарчиг бүхий дараах энгийн

import React, {useState} from 'react'

function App() {
  const [name, setName] = useState('')
  
  const changeHandler = event => {
    setName(event.target.value)  
  }
  
  return (
    <div className="container pt-3">
      <input type="text" value={name} onChange={changeHandler}/>
      <h1>{name}</h1>
    </div>      
  );
}

export default App;

жишээгээр харцгаая.

Удамшилт (inheritance) бол ОХП -ийн үндсэн ойлголтуудын нэг. Удамшилтаар нэг класс өөр классийн ажиллагаануудыг өвлөх /дамжуулан авах/ боломж бүрддэг. Бидэнд хүнийг тодорхойлох

class Person
{
    private string _name = "";
 
    public string Name
    {
        get { return _name; }
        set { _name = value; }
    }
    public void Print()
    {
        Console.WriteLine(Name);
    }
}

Person класс байлаа гэе. Гэтэл бидэнд компаний ажилтанг тодорхойлох Employee класс хэрэгтэй боллоо гэж үзье. Компаний ажилтан хүн учраас Employee класс Person классийн хийдэг үйлдлүүдийг хийх болно.

Хичээлээр Vuex store -ийн үндсэн 4 ухагдхууны сүүлийнх болох action -ий тухай авч үзнэ. Mutation -оор Vuex store -ийн state -ийг л өөрчилдөг гэдгийг Mutations -ийг ашиглах хичээлээс мэдсэн. Үнэн хэрэгтээ mutation бол синхроноор ажиллан state -д утга олгох ердийн setter юм. mutation -д ямар нэгэн асинхроний үйл явцыг дамжуулж болдоггүй. Гэтэл програм сервер, интернет сервисүүд гэх мэт асинхрон үйл явцуудтай ажиллах шаардлага гарах нь дамжаггүй. Тэрхүү асинхрон үйл ажиллагааны үр дүнгээс хамааран state -д утга олгох ажиллагаа ихээр тохиолдох учраас асинхрон үйл явцуудтай Vuex store -ийн action нэртэй хэрэгслийг ашигладаг.

Хэвүүдийг /паттерн/ судлахын өмнө обьект хоорондын үндсэн харилцааг ойлгосон байх нь асуудлын ухагдхуун хоорондын холбоог ойлгон тэдгээрийг хэвүүдэд ашиглахад танд туслана. Обьект хоорондын харилцаанаас удамшилт /inheritance/ , хэрэгжүүлэлт /implementation/, ассоциац /association/, композиц /composition/, агрегац /aggregation/ гэсэн үндсэн харилцаануудыг онцолж болно.