Хичээлээр EcmaScript6 -гийн генератор гэж юу болох тэдгээртэй хэрхэн ажиллахыг авч үзье. Төсөлд генераторууд ажиллах боломжийг хангахын тулд package.json файлд зарим өөрчлөлтийг орулах хэрэгтэй. Генераторууд ES6 -д байдаггүй тусдаа пакет тул терминалыг нээгээд npm install --save-dev babel-plugin-transform-runtime командыг өгөн суулгана. Пакетыг суулгасны дараа package.json файлын devDependencies талбарт "babel-plugin-transform-runtime": "^6.23.0" бичлэг нэмэгдэнэ. Дээр нь төслийн үндсэн хавтаст .babelrc нэртэй файлыг нэмэн

{
  "plugins": [
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }]
  ]
}

кодыг оруулан өгөөд терминалаас webpack -ийг ажлуулан төслийн компайлыг хийнэ.

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

import React, {useState, useEffect} from 'react'

function App() {
  const [renderCount, setRenderCount] = useState(1)
  
  useEffect(() => {
    setRenderCount(prev => prev + 1)
  })
  
  return (
      <div className="container">
        <h1>Render -ийн тоо {renderCount}</h1>
      </div>
  );
}

export default App;

кодоор шийдчих мэт.

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

Энэ удаад Html хуудас дээрх сонголтуудаас тохирохыг нь зөвлөх тэмдэглэгээ хийдэг CheckBox гэж нэрлэдэг элементийн тухай авч үзье. Жишээ нь бүртгэлийн хуудаст хэрэглэгчийн сонирхдог зүйлсийг тодорхой төрлүүдээс сонгох байдлаар ихээр авдаг. Үүнийг VueJs -дээр хэрхэн хэрэгжүүлэхийг

<template>
  <div>
    <h2>Form inputs</h2> 
    <label>
      <input type="checkbox"> instagram
    </label>
    <label>
      <input type="checkbox"> twitter
    </label>    
    <label>
      <input type="checkbox"> facebook
    </label>    
  </div>
</template>

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

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

Хичээлээр 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 функцийг дуудна.