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);    // юу ч үзүүлэхгүй

Төсөлд vuex санг татан суулган store -ийг тохируулан өгсөн болохоор Vuex -ийг суулгах хичээлийн жишээний хүүхэд компонент хоорондын харилцан ажиллагаанд vuex -ийг ашиглан рефакторинг буюу сайжруулалтыг хийцгээе. Эхлээд компонентууд ямар өгөгдлүүдтэй ажиллах ёстойг store -д тодорхойлох хэрэгтэй. Иймээс store хавтаст index.js файлд

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter: 10
  }
})

дээрх өөрчлөлтийг оруулъя. Өөрчлөлтөөр Vuex.Store -ийн тохиргооны обьектод state талбарыг нэмсэн байгаа.

Програмчлалын хэлийг судлаад код бичих нэг их хүнд биш. Харин сайн код бичнэ гэдэг нь хүндхэн асуудал. Хэлийг эхлэн суралцагсад код бичих дээр түлхүү анхаарсанаас болоод цэгцтэй, зохион байгуулалт сайтай, өргөжүүлэх болон дэмжлэг үзүүлэхэд хөнгөн буюу өөрөөр хэлбэл сайн код бичих тал дээр нэг их анхаардаггүй. Энэ нь программийн бүтээгдхүүний загварчлалтай илүү холбоотой зүйл юм. Манайхан програмийн загварчлал хийхгүйгээр асуудлыг кодлогчид шууд өгөөд хурдан хийлгэх гэдэг. Энэ нь эцэстээ зөвхөн ажилладаг л кодийг бичүүлэхэд хүргэдэг. Ийм кодийг цаашид хөгжүүлэх болон дэмжихэд нэн хүндрэлтэй буюу бараг боломжгүй болгодог. Иймээс програмчлалын хэлний боломжуудыг маш өргөн судлан мэдэхийг зөвлөе. Програмыг загварын дагуу кодлоход таниас тухайн хэлний боломжуудыг зөв оновчтой ашиглахыг шууд шаардах болно.

useMemo хукийн судалгааг

import React, {useState} from 'react'

function App() {
  const [number, setNumber] = useState(40)
  
  return (
      <div className="container">
        <h1>Тооцоологдох шинж: {number}</h1>
        <button className={'btn btn-success mx-3'} onClick={() => setNumber(prev => prev + 1)}>Нэмэх</button>
        <button className={'btn btn-danger'} onClick={() => setNumber(prev => prev - 1)}>Хасах</button>
      </div>
  );
}

export default App;

код дээр харцгаая. useState -ээр 40 гэсэн анхны утгатай number хувьсагчийг үүсгээд хуудаст h1 гарчигаар number хувьсагчийн утгыг харуулаад Нэмэх, Хасах хоёр товч дээр дарахад setNumber функцээр number хувьсагчийн утгыг өөрчилнө. Кодийг ажлуулбал

хуудас нээгдэнэ.