Алдаа боловсруулалт

RxJs сангийн алдаа боловруулалтын талаар хичээлд авч үзье. Сервертэй ажиллах үеийн ямар нэгэн алдаанаас үүдэн хэрэглэгч талын код ажиллахгүй болох тохиолдол ихээр гардаг тул ийм үед алдааг барин боловсруулалт хийх зайлшгүй шаардлага гардаг. Алдааны боловруулалтыг дараах

Rx.Observable.throw(new Error('Алдаа гарлаа'))
    .subscribe((x) => {
        console.log(x);
    });

энгийн жишээн дээр харцгаая.

RxJs сангийн Observable классын алдаа хаядаг throw аргаар алдааны обьектыг үүсгээд түүнээс буцаах стримд бүртгүүлэн ирсэн өгөгдлийг консолд үзүүлнэ. Хөтөч дээр хуудсыг нээвэл

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

Rx.Observable.interval(500).take(2)
    .subscribe(createSubscribe('interval'));

нэмэн оруулъя. Энд шинээр ямарч зүйл нэмээгүй шинээр стрим үүсгээд түүнд бүртгүүлсэн. Гэхдээ үүний өмнөх стрим алдаа генераци хийж байгааг санаарай. Хуудсаа шинэчилбэл өмнөхтэй яг ижил үр дүнг авна. Эхний стрим алдаа буцааснаар манай кодын цаашдын ажиллагаа унасан. Програм ингэж ажиллаж болохгүй нь ойлгомжтой учраас RxJs санд алдааг барин боловсруулалт хийдэг catch гэдэг маш хүчэрхэг оператор байдаг.

catch арга.

catch арга алдааг хүлээн авдаг тул кодоо

Rx.Observable.throw(new Error('Алдаа гарлаа'))
    .catch(error => console.log(error))
    .subscribe((x) => {
        console.log(x);
    });

Rx.Observable.interval(500).take(2)
    .subscribe(createSubscribe('interval'));

гэж өөрчлөөд хуудсаа шинэчилбэл консолд

дээрх үр дүнг хүлээн авна. Эхний мэдээлэл бол манай кодын ажиллагааг зогсоох хөтөчийн алдаа биш /саарал өнгөтэй/ консолын мэдээлэл харин дараагийнх бол catch аргаас буцаах төрлөөс өөр тодорхойгүй төрлийг буцаасан тухай хөтөчийн алдаа юм. RxJs сангийн үндсэн зарчим бол түүний ямарч арга RxJs элементийг өөрийг нь буцаах байдаг. Өөрөөр хэлбэл арга тухайн алхамд стримийн элементийг өөрийг нь буцаах ёстой. Иймээс catch аргаас хөтөчийн алдаанд дурдсаны дагуу Observable , Promise, Array эсхүл итерацилагдах утга буцаах ёстой тул үүнийг хамгийн энгийнээр

Rx.Observable.throw(new Error('Алдаа гарлаа'))
    .catch(error => Rx.Observable.of(error))
    .subscribe((x) => {
        console.log(x);
    });

Rx.Observable.interval(500).take(2)
    .subscribe(createSubscribe('interval'));

гэж хэрэгжүүлж болно. Кодод сангийн of аргаар catch аргаас стримийг буцаасан. Одоо хуудсаа шинэчилбэл

манай кодод алдаа гаралгүйгээр амжилттай биелэгдсэн үр дүнг авна. Хичээлийн бүхий л кодод ашиглаж байгаа createSubscribe функцийг

function createSubscribe(name) {
    return {
        next(x) {
            console.log(name, ': ', x);
        },
        error(err) {
            console.log('Error: ', err);
        },
        complete() {
            console.log(name, ': Completed!');
        }
    }
}

дахин санацгаая. Дээрх кодод гурван функц байгаагийн next, complete аргуудыг хичээлүүдэд тогтмол ашигласан. Харин ямар нэгэн алдааг хүлээн авах error функцийг бид ашиглаагүй ирсэн. Функц алдааг catch аргаар барин боловсруулах үед дуудагдана. Иймээс createSubscribe функцийн эргэн дуудалтын функцуудийн кодыг

function createSubscribe(name) {
    return {
        next(x) {
            console.log(name, ': ', x);
        },
        error(err) {
            console.log(name, ': ', err);
        },
        complete() {
            console.log(name, ': Completed!');
        }
    }
}

гэж нэг хэлбэрт оруулаад үндсэн кодыг

Rx.Observable.throw(new Error('Алдаа гарлаа'))
    .catch(error => Rx.Observable.of(error))
    .subscribe(createSubscribe('catch'));

Rx.Observable.interval(500).take(2)
    .subscribe(createSubscribe('interval'));

хэлбэртэй болгоод хуудсаа шинэчилбэл

консолд дээрх үр дүнг авна. Үр дүнгээс харвал catch аргаас буцаасан стримд бүртгүүлэхдээ createSubscribe аргыг catch параметртэйгээр дамжуулсан тул эхлээд createSubscribe функцийн error функц дуудагдаад дараа нь стримийг дуусгаад цааш дараагийн стримийн боловсруулалт явагдан кодын ажиллагаа бүрэн дууссан байгаа.

onErrorResumeNext арга.

Практикт ямар нэгэн потокоос /стрим/ алдаа өгвөл бид өөр нэг стримийг эхлүүлэх шаардлага ихээр гардаг. Бодит жишээ бол серверт хүсэлт илгээх. Бид серверт хүсэлт илгээхэд тэндээс хариугаар алдаа буцаавал өгөгдлийг өөр серверээс авах хэрэгтэй болох эсхүл хэрэглэгчид мэдээллийг үзүүлэх гэх мэтээр. Иймэрхүү тохиолдол ихээр гардаг. RxJs санд энэхүү ажиллагааг эвтэйхэн гүйцэтгэх onErrorResumeNext гэдэг арга байдаг.

const s1$ = Rx.Observable.throw(new Error('Алдаа гарлаа'));
const s2$ = Rx.Observable.interval(500).take(2);

s1$.onErrorResumeNext(s2$)
    .subscribe(createSubscribe('onErrorResumeNext'))

жишээг харцгаая. Бидэнд s1$, s2$ стримүүд байгаа. Гэхдээ эхний стрим шууд алдаа хаяж байгаа учраас s1$.onErrorResumeNext(s2$) оператор s1$ стримээс алдаа өгвөл s2$ стримийг эхлүүл гэсэн үг. Стримд шууд алдаа хаяхаар заасан байгаа нь таныг төөрөгдөлд оруулж болох талтай. Үүнийг стримээс өгөгдөл тараах үед алдаа гарвал дараагийн стримийг л эхлүүлнэ гэж ойлгоорой. Дараа нь бид шинээр эхлүүлсэн стримд бүртгүүлсэн. Одоо хуудсаа шинэчилбэл

дээрх үр дүнг авна. Эхний стрим алдаа хаясан тул түүний оронд хоёрдугаар стримийг эхлүүлэн тэр нь амжилттай дууссан байгаа. Эхний стримийн талаар ямар ч мэдээлэл консолд гаргаагүй шууд л дараагийн стримийг эхлүүлсэн. Эндээс арга ямар нэгэн алдааны үед түүний өөр боловсруулалт эсхүл зохих мэдээллийг хэрэглэгчид дамжуулахад ихээхэн тустай нь харагдана.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 855 Төлбөртэй

ES6 -д өгөгдлүүдийг олонлог байдлаар хадгалан тэдгээртэй ажиллах Set , WeakSet обьектууд бий болсон. Хичээлээр энэхүү шинэчлэлүүдийн тухай үзье.

Set обьект

Set өөртөө төрөл бүрийн утгуудыг агуулан тэдгээртэй ажиллагааг хөнгөн болгох массив төрлийн тусгай бүтэц буюу обьект юм. Гэхдээ Set -д зөвхөн давтагдахгүй утгуудыг хадгалж болдог. Ингээд Set гэж юу болох түүнтэй хэрхэн ажиллахыг дараах

let set = new Set();
set.add(10);
set.add('Hello');
set.add({});

console.log(set);
console.log(set.size);

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

  Нээгдсэн тоо: 906 Төлбөртэй

Хичээлээр өөрийн контролийг үүсгэн түүнийг v-model директивт хэрхэн тавин өгөхийг сурцгаая. Үүний тулд төслийн components хавтаст Onoff нэртэй

<template>  
  <div>
    <button class="on">On</button>
    <button class="off">Off</button>
  </div>    
</template>

<script>
  export default {
    data () {
      return {
        enabled: false
      }
    }
  }
</script>

<style scoped>
  button {
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    margin-right: 20px;
    outline: none;
  }

  button:active {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .5);
  }

  .on.active {
    background: green;
    color: #fff;
  }

  .off.active {
    background: red;
    color: #fff;
  }
</style>

код бүхий компонентийг үүсгээд түүнийг app компонентод бүртгүүлээд шаблонд

<template>
  <div>
    <h2>Form inputs</h2>

    <app-onoff></app-onoff>
  </div>
</template>

<script>
import Onoff from '@/components/Onoff'
export default {
  data () {
    return {
    }
  },
  components: {
    appOnoff: Onoff
  }
}
</script>

үзүүлье.

  Нээгдсэн тоо: 915 Нийтийн

Хичээлээр Vuejs фреймворкийн роутинг /чиглүүлэгч гэж орчуулж болох юм/ ойлголтын тухай авч үзье. Орчуулга муухан болсон байх талтай тул Routing гэсэн хэллэгээр нь шууд ойлгох нь илүү болов уу. Програмчлалын хэлний ухагдхуунуудыг шууд гадаад үгээр нь ойлгон тогтоох нь сайн. Учир нь монгол хэл дээр програмчлалтай холбоотой мэдээллүүд бага болохоор бид ихэнх зүйлийг интернетийн гадаад хэлтэй орчноос эсхүл гадаадын ном, хэвлэлээс судлах хэрэгтэй болдог. Vuejs фреймворкийн роутингийг ашиглахын тулд төслийн хуудас хоорондын чиглүүлэгчийг зохион байгуулдаг vue-router пакетыг төсөлдөө суулгах хэрэгтэй.

  Нээгдсэн тоо: 350 Нийтийн

react програм үүсгэх хичээлд create-react-app хэрэгслээр үүсгэсэн шинэ төслийг бүтэцтэй танилцая. Хичээлийн кодийн засварт би VSCode -ийг ашиглах бөгөөд D дискний projects хавтас дахь react хавтаст үүсгэсэн react-less хавтасыг код засварлагч дээр нээе.

Төслийн хавтас доторх үндсэн файлуудаас package.json бол маш чухал файл.

Класс ба структурт ердийн талбар, арга, шинжүүдээс гадна статик талбар, арга, шинжүүд байж болдог. Статик талбар, арга, шинжүүд…

Нээгдсэн тоо : 150

 

Хичээлээр useState -тэй тун төстэй useRef хукийн талаар авч үзье. useRef хукийн онцлог ашиглалтыг компонент хэдэн удаа дахин…

Нээгдсэн тоо : 123

 

Хүүхдүүд тооны хичээлийг анхнаасаа зөв ойлгон сураагүйгээс анги ахих тусмаа математикийн хичээлийнн хоцрогдолоос болоод дургүй болох тал байдаг.…

Нээгдсэн тоо : 312

 

Нийтлэлээр графикийн хэвүүдийн /GUI pattern/ түүхийг авч үзье. Боловсруулалтын графикийн хэвүүдийг 30 гаруй жилийн туршид боловсруулж байгаа бөгөөд…

Нээгдсэн тоо : 167

 

Хааяа өөр өөр параметрүүдийн багцтай нэг аргыг үүсгэх шаардлага гардаг. Ирсэн параметрүүдээс хамааран аргын тодорхой хэрэгжүүлэлтийг хэрэглэнэ. Ийм…

Нээгдсэн тоо : 196

 

Ямарч програмын ажиллагааны чухал хэсэг бол төрөл бүрийн мэдээллийн боловсруулалт, тэдгээртэй ажиллахтай холбоотой байдаг. Иймээс энэ хичээлээс vuejs

Нээгдсэн тоо : 139

 

Хичээлээр react -ийн хукуудаас их өргөн ашиглагддаг useEffect -ийн талаар авч үзье. useEffect -ийн ажиллагааг судлах хуудасны кодийг

Нээгдсэн тоо : 138

 

Илэрхийлэл бол математикийн хэлний үндэс болсон суурь ойлголтуудын нэг. Математикийн илэрхийллийг тооцооны алгоритм, аксиом, теорем, бодлогын нөхцлүүд гээд…

Нээгдсэн тоо : 264

 

Програм зохиох бол нарийн төвөгтэй ажил. Ямар ч програмын хувьд өөрийн хийх ажлаа гүйцэтгэхийн чацуу цаашдаа хөгжих, ажлын…

Нээгдсэн тоо : 189

 
Энэ долоо хоногт

тэгшитгэлийг бод.

Нээгдсэн тоо : 1140

 

хязгаарыг бодоорой.

Нээгдсэн тоо : 720

 

Ангийн нийт сурагчдын 60% нь эмэгтэй сурагчид байдаг. Ангиас санамсаргүйгээр нэг сурагч сонгоход эрэгтэй сурагч байх магадлалыг ол.

Нээгдсэн тоо : 1124