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

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

Сүүлийн жилүүдэд javascript фреймворкууд эрчимтэй хөгжснөөр интернетэд сууриласан програм, сайтын хэрэглэгч талын интерфесийг javascript -ээр бүтээх хандлага давамгайлах болоод байгаа. Ялангуяа SPA буюу нэг хуудас аплликашн технологи маш эрчимтэй орон ирсэн. Энэ хандлага ирээдүйдээ ч нилээд олон жил байр сууриа алдахгүй болов уу. Иймээс програмчлалын чиглэлээр суралцаж байгаа болон ажиллаж буй залуучууд javascript хэлийг эзэмшсэн өөрийн ажлын хэрэгсэл болгохыг хичээнгүйлэн зөвлөе.  

Энэ хичээлд ES6 -д шинээр бий болсон бүтэц буюу сумаар тодорхойлогдох функцтэй танилцая. Энэ нь өмнө байсан функцуудын нэгэн адил функц ч гэсэн зарим нэгэн онцлогтойг жишээгээр харцгаая. Өмнөх хувилбарт функцийг

const original = function () {
    return 100;
};

console.log(original());

дээрх байдлаар function түлхүүр үгийг ашиглан зарладаг. Кодод 100 утгыг буцаах функцийг зарлаад түүнийг original тогтмолд олгоод дараа нь түүнийг консолд үзүүлэхээр дуудсан.

Хичээлээр Promise ухагдхууны тухай жишээгээр авч үзье. Эхлээд Promise гэж юу болох юунд ашигладагийн тухайд гэвэл. ES6 - д Promise гэдэг нь синхрон буюу зэрэг биелэгдэх кодтой ажиллах механизм юм. Үүнийг ойлгохын тулд хүлээлт үүсгэх функцийг эхлээд ES5 - аар хэрэгжүүлсэн

function oldDelay(ms, func) {
    setTimeout(function () {
        func();
    }, ms);
}

oldDelay(3000, function () {
    console.log('Old delay passed!');
});

кодыг харцгаая. oldDelay функц эхний ms параметрээр хүлээлт үүсгэх хугацааг харин хоёрдахь func параметрээр хүлээлтийн хугацаа дуусахад дуудагдах функцийг авна. Хүлээлтийг setTimeout функцээр үүсгэх бөгөөд функц эхний параметрээр эргэн дуудалтын /callback/ функц харин хоёрдахь параметрээр хүлээлтийн хугацааг авдаг. setTimeout функцийн хоёрдахь параметр буюу хүлээлтийн хугацаанд oldDelay функцэд ирэх ms параметрийг өгөөд энэ хугацаа өнгөрөхөд ажиллах эргэн дуудалтын функцээс oldDelay функцэд параметрээр ирсэн func функцийг дуудна.

Хичээлээр компонентод ирж буй параметрүүд зөв эсэх, ийм шалгалтыг хийх ямар ач холбогдолтой талаар үзье. Компонентод параметр дамжуулах хичээлд App компонентоос carName, carYear талбаруудыг Car компонентод параметрээр дамжуулан авч үзүүлсэн. Тэгвэл Car компонент ирсэн параметрүүд дээр ямар нэгэн нэмэлт үйлдлийг жишээ нь машины нэрийг тонгоруулан

<template>
  <div class="car">
    <h3>Name: {{ carName }} \ {{reverseName}}</h3>
    <p>Year: {{ carYear }}</p>
  </div>
</template>

<script>
  export default {
    props: ['carName', 'carYear'],
    computed: {
      reverseName() {
        return this.carName.split('').reverse().join('')
      }
    }
  }
</script>

харуулдаг гэж үзье.