Энэ хичээлээс эхлэн олон хуудастай төслийг үүсгэн хуудас хооронд шууд буюу дахин ачаалалтгүйгээр шилжин удирдах боломжийн талаар үзэх болно. Өөрөөр хэлбэл SPA нэг хуудаст програмийг зохиож сурах юм. Хичээлд зориулан шинэ төслийг үүсгэхдээ react програм үүсгэх хичээлийнхээс арай өөрөөр шууд VSCode засварлагчаас үүсгэх аргыг ашиглая. Аргууд хооронд ялгаа бага тул онцын асуудал үүсэх учиргүй. Эхлээд төслүүдээ хадгалж буй хавтаст react-router хавтасыг үүгээд VSCode засварлагчаар үүсгэсэн хавтасаа нээн өгөөд терминалын цонхыг нээгээд

npx create-react-app . командыг өгөөрэй.

Төлөв байдлын үүргийн гинж (Chain of responsibility) загварчлалын хэв шаардлагыг хэд хэдэн обьектууд боловсруулах боломжийг олгодог тул шаардлагын дамжуулагч хүлээн авагчтай хатуу уяа /холбоо/ үүсэхээс сэргийлдэг. Боломжит бүх боловсруулагчид гинж үүсгэн аль нэг обьект шаардлагыг боловсруулах хүртэл шаардлага өөрөө энэ гинжээр дамжина. Шаардлагыг хүлээн авсан обьект нэг бол шаардлагыг боловсруулна эсхүл шаардлагыг гүйцэтгүүлэхээр дараагийн обьектод шилжүүлдэг.

Онцгой нөхцлийг дуудсан кодийг try блок эсхүл онцгой нөхцлийг боловсруулах catch блокгүй try..catch бүтцэд байршуулсан бол систем тохирох боловсруулагчийг дуудалтын стект хайна. Жишээ нь

try
{
    TestClass.Method1();
}
catch (DivideByZeroException ex)
{
    Console.WriteLine($"Main арга дахь catch : {ex.Message}");
}
finally
{
    Console.WriteLine("Main арга дахь finally блок");
}
Console.WriteLine("Main аргын төгсгөл");
 
class TestClass
{
    public static void Method1()
    {
        try
        {
            Method2();
        }
        catch (IndexOutOfRangeException ex)
        {
            Console.WriteLine($"Method1 аргын catch: {ex.Message}");
        }
        finally
        {
            Console.WriteLine("Method1 аргын finally блок");
        }
        Console.WriteLine("Method1 аргын төгсгөл");
    }
    static void Method2()
    {
        try
        {
            int x = 8;
            int y = x / 0;
        }
        finally
        {
            Console.WriteLine("Method2 аргын finally блок");
        }
        Console.WriteLine("Method2 аргын төгсгөл");
    }
}

кодийг авч үзье.

Програмийн цэсийн хэрэгжүүлэлтийн компонентийг хийсний дараа хуудсаа нээгээд fa-bars икон дээр дарахад

дээрх байдлаар харагдаж байгаа. Харин цэсийг эргэн харагдахгүй болгох ажиллагааг fa-times буюу x дүрс хариуцаж байгаа. Цэсийг хаах ажиллагаа fa-times буюу x дүрс дээр дарах үйл явцын боловсруулагчаас гадна цэсний гадна талд дарахад хийгддэг байвал ашиглалтын талаасаа илүү эвтэйхэн гэдэг нь ойлгомжтой.

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

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

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

Хэрвээ системийн өөрийн дотоод онцгой нөхцлийн төрлүүд тохиромжгүй бол бид өөрсдөө төрлүүд үүсгэж болно. Бүх онцгой нөхцлийн суурь класс Exception учраас өөрийн төрлийг үүсгэхдээ бид энэ классаас удамшуулна.  
Жишээ нь манай програмд насны хязгаарлалт байлаа гэе.

try
{
    Person person = new Person { Name = "Tom", Age = 17 };
}
catch (Exception ex)
{
    Console.WriteLine($"Алдаа: {ex.Message}");
}
 
class Person
{
    private int age;
    public string Name { get; set; } = "";
    public int Age
    {
        get => age;
        set
        {
            if (value < 18)
                throw new Exception("18 нас хүрээгүй бол бүртгэл хаалттай");
            else
                age = value;
        }
    }
}

Person классийн age шинжид утга олгохдоо шалгалт хийн нас 18 -аас бага бол онцгой нөхцлийг үүсгэнэ.

Цэсийг нээх хаах ажиллагааг хариуцах компонентийг боловсруулсан тул энэ хичээлээр програмийн удирдах цэсийг хийе. Үүний тулд төслийн components хавтасны Navigation хавтаст цэсний компонентийн Drawer хавтасыг үүсгээд түүнд Drawer.js, Links.js, Drawer.module.css файлуудыг үүсгэн өгье. Drawer.js файлд

import classes from "./Drawer.module.css";
import {links} from "./Links"

const Drawer = (props) => {
  const renderLinks = () => {
    return links.map((link, index) => {
      return (
        <li key={index}>
          <a href="/#">Link {link}</a>
        </li>
      );
    });
  }
    
  return (
    <nav className={classes.Drawer}>
      <ul>{renderLinks()}</ul>
    </nav>
  ) 
}

export default Drawer;

код бүхий компонентийг үүсгэе.

Давталт (Iterator) паттерн нийлмэл обьектын бүх элементүүдэд тэдгээрийн дотоод бүтцийг задлахгүйгээр хандах абстракт интерфейсийг тодорхойлдог. C# хэл дээр програм зохиогчид массив эсхүл коллекцийн обьектуудыг татан авдаг foreach циклтэй ажиллаж үзсэн байх. Энэ үед коллекцийн нийлмэл классуудад өөрийн бүтэц ба төлвөөрөө ялгаатай олонлог оршиж байдаг. Коллекцийг foreach -р гүйлгэн обьектуудыг авах боломжийг олгож байгаа түлхүүр хэрэгсэл бол давталт хэв буюу энгийнээр хэлбэл IEnumerable , IEnumerator хоёр интерфейс юм.

Тодорхой нөхцөлд жишээ нь тоог тэгд хуваах гэх мэт тохиолдолд систем өөрөө онцгой нөхцлийн генерацийг хийдэг. Гэхдээ C# хэл throw оператороор онцгой нөхцлийг гараар үүсгэх боломжийг олгодог. Өөрөөр хэлбэл throw оператороор бид өөрсдөө онцгой нөхцлийг үүсгэн түүнийг програмийн ажиллагааны үед дуудаж болно гэсэн үг.

Програмийг удирдах цэсийг нээх болон хаах ажиллагааг хариуцах компонентийг боловсруулъя. Үүний тулд төслийн components хавтаст Navigation хавтасыг үүсгээд түүн дотор цэсний шилжилтийн компонентийн MenuToggle хавтасыг үүсгээрэй. Компонентийн хавтаст

import React from "react";
import classes from "./MenuToggle.module.css";

const MenuToggle = (props) => {
  const cls = [classes.MenuToggle, "fa"];
  if (props.isOpen) {
    cls.push("fa-times");
    cls.push(classes.open);
  } else {
    cls.push("fa-bars");
  }

  return <i className={cls.join(" ")} onClick={props.onToggle} />;
};

export default MenuToggle;