Төрөл бүрийн класс, структуруудад хуурамч нэрийг /төлөөлөх нэр/ өгөөд дараа нь програмд төрлийн нэрийн оронд төлөөлөх нэрийг ашиглаж болно. Жишээ нь консолд мөр гаргах Console.WriteLine() аргын Console класст төлөөлөх нэрийг

using printer = System.Console;

printer.WriteLine("Монгол улс");
printer.WriteLine("Улаанбаатар хот");

өгч болно.

vuex сан төслийн компонентуудын ажиллагаануудын хоорондын хамааралыг арилган бие даан ажиллах боломжийг бүрдүүлдэг. Getters -ийг ашиглах хичээлд vuex сангийн state, getters талбаруудыг ашиглан Counter , SecondCounter компонентуудыг бусад компонентуудаас хамааралгүйгээр ажилладаг болгосон. Counter , SecondCounter компонентууд одоо зөвхөн store -той харьцан ажиллах болсноор төслийн компонент хоорондын хамаарал багасан програмын ажиллагааны логик ойлгомжтой хөнгөн болохын дээр компонентуудыг дахин ашиглах боломж бүрдсэн.

Хичээлээр анх IBM боловсруулан гаргасан Model View Presenter (MVP) - хэвийн талаар үзнэ. MVP нь MVC загвараас үүдэлтэй боловч програмын зохион байгуулалт талаасаа нилээд өөр хандлагатай. MVP паттерн MVC -г бодвол үзүүлбэр моделтой нягт холбоогүй байдаг онцлогтой. Доор зурагт MVP хэвийн бүтцийг харууллаа.

Зургаас харахад контролерын оронд Presenter орж ирэн хэрэглэгчийн оруулсан өгөгдлийн шилжилт, загварын өөрчлөлтийг үзүүлбэрт тусгах үүргийг хариуцах болсон нь харагдана.

Javascript хэл сайтын хэрэглэгч талын буюу frontend хэсгийн програмчлалд хүчтэй түрэн орж ирлээ. Орчин үед хэрэглэгч талын хуудасыг SPA буюу нэг хуудаст аппликашн байдлаар хэрэгжүүлэх хандлага түлхүү зонхилох болсноор frontend кодлогчийн өндөр түвшинд эзэмшсэн байх зүйл бол Javascript болон түүнд дээр зохиогдсон фреймворкууд яалтгүй болоод байгаа. Ямар нэгэн зүйлийг өнгөцхөн судлаад өнгөрөх нэг хэрэг. Харин тухайн зүйлээ сайн эзэмших тийм ч амаргүй. Байнга суралцан судлах хэрэгтэй. Та frontend кодлогч болохоор шийдсэн бол сайтад нийтлэгдсэн хичээлүүдийг үзэхийг хичээнгүйлэн зөвлөе.     

useContext хукийн ажиллагааг судлахын тулд жижиг хэмжээний програмийг зохиоцгооё. Програмийн суурь бүтцийг App компонентод

import React from 'react'
import Alert from './Alert';
import Main from './Main';

function App() {
  return (
      <div className="container pt-3">
        <Alert />
        <Main />
      </div>
  );
}

export default App;

байдлаар зохион байгуулъя.

Програмчлалын C# хэл хатуу төрөлжилттэй тул өгөгдөлтэй ажиллах үед null утга асуудал үүсгэх тохиолдол их. Үүнийг тооцолгүй бичигдсэн код бүр ажлын /production/ хувилбараар ажиллаж байхдаа алдаа өгөх тал бий. Кодийн тестийг хийхдээ тухайн хувьсагчид null утга олгогдох тохиолдолыг тооцохгүй байх нь ийм асуудал гарах үндсэн шалтгаан хэдий ч кодлогч энэ талаар өөрөө бодон кодлох хэрэгтэй.   

null -ийн шалгалт. Null guard /хамгаалагч/

Коддоо null утга авдаг өөрөөр хэлбэл nullable төрлийн хувьсагч болон параметрүүд ашиглах болбол NullReferenceException алдаа гарахаас сэргийлэн null -ийг шалгах хэрэгтэй. Жишээ нь

void PrintUpper(string? text)
{
    if (text!=null)
    {
        Console.WriteLine(text.ToUpper());
    }    
}

Дээрх кодод text параметр null -тэй тэнцүү биш бол мөрийн тэмдэгтүүдийг том үсэг болгох ToUpper() аргыг дуудна.

Модел-үзүүлбэр-контролер (model-view-controller) ухагдхуун 1970 оны сүүлээр гарч ирсэн. Энэ загвар Xerox PARC компаний Smalltalk төслийн үр дүн бөгөөд тухайн үедээ өмнө нь хийгдсэн байсан програмуудын хэрэглэгчийн графикийн интерфейсүүдийг зохион байгуулах хэлбэрээр гарч иржээ. Анхны MVC загварын зарим зүйлүүд Smalltalk төслийн дэлгэц, хэрэгслүүд гэх мэтийн тодорхой баримтлалтай холбоотой байсан ч илүү нэгдсэн ойлголтуудыг програмд ашиглаж байсан. Модел-үзүүлбэр-контролер паттерн веб програмчлалд маш сайн тохирдог тул ASP.NET фреймворкид загвар сайн хэрэглэгээг олсон. Гэхдээ бид энэ удаа хэвийг WPF -д ашиглахыг авч үзэх болно.
Хэвийг ерөнхийлөх талаас нь харвал бүтцийн MVC паттерн програмыг багаар бодоход 3 хэсэгт хуваана гэж ойлгож болно. Нэрнээсээ ч загвар програмыг Модел, Үзүүлбэр, Контролер гэсэн хэсгүүдэд хуваах нь харагдана.

Төслийн нэгдсэн хадгалагчид програмын төлвүүдийг state -д үүсгэн ашиглахыг сурсан тул vuex -ийн дараагийн боломжийг судалцгаая. Одоогоор төслийн Actions компонентод байрлах товчнууд дээр дарах үйл явцын боловсруулагч state -д тодорхойлогдсон counter талбарын утгыг өөрчилнө. Харин Counter компонент state -ээс counter талбарыг аван темлейтдээ үзүүлж байгаа. Төсөлд бас нэгэн компонентийг нэмээд түүн дээр vuex -ийн дараагийн боломжийг судлая. Үүний тулд төслийн components хавтаст Counter компоненттой ижилхэн

<template>
  <h2>Тоолуур 2: {{counter}}</h2>
</template>

<script>
export default {
  computed: {
    counter() {
      return this.$store.state.counter
    }
  }
}
</script>

кодтой SecondCounter.vue файлыг үүсгэе.

Хичээлээр react -ийн хамгийн чухал бөгөөд хэрэгтэй хукуудийн нэг болох useCallback -ийн талаар авч үзье. Хукийн судалгааг дараах

import React, {useState} from 'react'

function App() {
  const [colored, setColored] = useState(false)
  const [count, setCount] = useState(1)
    
  const styles = {
      color: colored ? 'darkred' : 'black'
  }
    
  return (
      <div className="container">
        <h1 style={styles}>Элементийн тоо: {count}</h1>
        <button className={'btn btn-success mx-3'} onClick={() => setCount(prev => prev + 1)}>Нэмэх</button>
        <button className={'btn btn-warning mx-3'} onClick={() => setColored(prev => !prev)}>Өөрчлөх</button>
      </div>
  );
}

export default App;

кодоор авч үзье. Компонентийн код логикийн хувьд өмнөх хичээлүүдийнхтэй бараг ижил тул тайлбарлах нь илүүц гэж үзлээ.

Утгатай төрлийн хувьсагч болон параметрүүдэд null утгыг шууд олгож болдоггүйгээрээ холбоосын төрлөөс ялгаатай. Гэсэн хэдий ч утгатай төрлийн хувьсагч болон параметрүүдэд null утгыг олгох шаардлага гардаг. Жишээ нь өгөгдлийн сангаас тоон утга ирнэ гэсэн хүлээлттэй байтал өгөгдлийн сангийн талбар утгагүй байх. Өөрөөр хэлбэл өгөгдлийн санд утга байвал тоо үгүй бол null ирнэ гэсэн үг.

C# -д тоо, мөр гээд стандарт төрлийн утгуудаас гадна ямар нэгэн өгөгдөл, утга байхгүйг заах тусгай null утга гэж бий. Холбоосын төрлүүд анхдагч утгаар null утгыг авдаг. C# 8.0 хувилбар хүртэл бүх холбоосын төрлүүдэд null утгыг

string name = null;
Console.WriteLine(name);

олгож болдог байсан. Харин C# 8.0 хувилбараас холбоосын nullable төрөл (nullable reference types) болон холбоосын nullable төрлийг ашиглаж болох nullable aware context - буюу nullable-контекст ойлголтыг оруулсан.  
null утга авч болох холбоос төрлийн хувьсагч болон параметрийг тодорхойлохын тулд төрлийн нэрийн ард ? (асуултын тэмдэг) -ийг тавина. Жишээ нь

string? name = null;
Console.WriteLine(name);    // юу ч үзүүлэхгүй