Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд үйл явцыг хэрэглэж болно.
Жишээ болгоод банкны дансыг тодорхойлох 

class Account
{
    // дансны үлдэгдэл
    public int Sum { get; private set; }
    // байгуулагчаар дансны эхний үлдэгдлийг тогтооно
    public Account(int sum) => Sum = sum;
    // дансанд мөнгө хийх
    public void Put(int sum) => Sum += sum;
    // данснаас мөнгө авах
    public void Take(int sum)
    {
        if (Sum >= sum)
        {
            Sum -= sum;
        }
    }
}

классийг аваад үзье. Байгуулагчид Sum шинжид хадгалагдах эхний үлдэгдлийг тогтооно. Put аргаар дансанд мөнгө хийнэ.

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох цэс бусдаасаа ялгагдахгүй байгаа нь сайнгүй. 
Үнэхээр / чиглүүлэгч нүүр хуудас буюу http://localhost:3000/ хаягаар нүүр хуудасыг үзүүлж байхад

кодийн a тегээр тодорхойлогдсон Нүүр холбоост ямар нэгэн атрибут байхгүй байгаа нь харагдана. 

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно. Нэг дэх нь шинээр үйлдэл тодорхойлох хэрэгтэй элементүүдэд хоёрдахь нь тухайн үйлдлийг тодорхойлох зочдод зориулагдана.шалгаад үзээрэй.

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын параметрээр дамжуулж болдог багтаамжтай товч аргыг үүсгэх боломжийг олгодог.

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан. Түүнээс гадна програмийн бүх хуудаст давтагдах хэсэгт зориулан Layout /макет/ компонентийг боловсруулсан. Layout /макет/ компонент бусад хуудаснуудад давтагдах хэсгийг агуулах учраас кодийг

import React from "react";
import { Link } from "react-router-dom";
import "./Layout.scss";

const Layout = () => {
  return (
    <>
      <header>
        <nav className="nav">
          <ul>
            <li>
              <Link to="/">Нүүр</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/cars">Cars</Link>
            </li>
          </ul>
        </nav>
      </header>
      <main>
        <h2>Агуулга</h2>
      </main>
      <footer>2023 Он</footer>
    </>
  );
};

export default Layout;

блокуудад салгаад хуудасны ажиллагааг шалгавал

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

Хэвийг хаана ашиглах

• Дараа нь сэргээх боломжтойгоор обьектын төлвийг хадгалах хэрэгтэй бол
• Обьектын төлвийн хадгалалт хайрцаглалтын зарчмыг зөрчихгүйгээр хийгдэх хэрэгтэй бол

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр эхлээд ард нь хаалтанд параметрүүдийн жагсаалтыг бичээд их хаалтанд аргын бие байрлана.

delegate(параметрүүд)
{
    // командууд
}

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас хооронд динамик буюу дахин ачаалахгүйгээр шилжилт хийх боломжийг бүрдүүлсэн. App компонентийн кодод бүртгүүлсэн

function App() {
  return (
    <div>
      <nav className="nav">
        <ul>
          <li>
            <Link to="/">Нүүр</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <hr />
      <Routes>
        <Route path="/" element={<Cars />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

/ чиглүүлэгч манай нүүр хуудас буюу http://localhost:3000/ хаягийг зааж байгаа ч Cars компонентод шилжиж байгаа нь логикийн талаасаа ойлгомж муутай болсон. Иймээс кодийг / чиглүүлэгчээр нүүр хуудаст шилждэг болгоё.

Зуучлагч (Mediator) нь олон тооны обьектууд бие биетэйгээ холбоос үүсгэхгүйгээр харилцан ажиллах боломжийг хангах загварчлалын хэв юм. Ингэснээр обьектуудын харилцан ажиллагааны сул холбоосыг бий болгоно.

Хэвийг хаана ашиглах

• Холбоонууд нарийн, ээдрээтэй олон тооны харилцан холбоотой обьектууд байх үед.
• Өөр обьектуудтай нягт холбоотойгоос үүдэн дахин ашиглахад хүндрэлтэй обьектыг дахин ашиглах шаардлага гарах үед

Хэвийг UML диаграмаар дараах байдлаар тодорхойлно.

Делегатууд хичээлд ухагдхууны талаар дэлгэрэнгүй үзсэн ч жишээнүүд делегатийн хүчийг бүрэн харуулж чадахааргүй байсан. Учир нь бид хэрэгтэй аргаа ямар нэгэн делегатгүйгээр шууд дуудаж болохоор байсан. Делегатийн хамгийн хүчирхэг зүйл гэвэл түүгээр зарим кодийн гүйцэтгэлийг гаднаас хийх боломж юм. Програмийн кодийг бичих үед ямар код биелэгдэхийг мэдэхгүй байвал зүгээр л делегатийг дуудаж болно. Делегатийг дуудахад яг ямар код ажиллахыг дараа нь шийдэх боломжтой. Үүнийг жишээн дээр авч үзье.