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

Javascript хэл анхнаасаа обьект хандлагат технологиор зохиогдсон тул эхлэн суралцаж байгаа хүмүүс жаахан хүнд мэт санагдаж болох талтай. Ер нь ОХП хэлүүдийг сурахад обьект хандлагат технологийн суурийг их зөв ойлгосон байх хэрэгтэйг зөвлөе. Иймээс сайтын Програмчлал хэсгийн ОХП ухагдхууныг хөндсөн хичээлүүдийг үзэхийг зөвлөе. Хичээлийн материалыг бүрэн ойлгохын тулд Rxjs сан хичээлийн багцыг эхнээс нь бүгдийг судалбал илүү үр дүнтэй.

Энэ хичээлээр RxJs санг ашиглан өөр стримүүдийг нэг стримд нэгтгэх боломжийн талаар авч үзэх болно.

merge арга

Энгийн жишээнээс эхлэе. index.js файлд

const s1$ = Rx.Observable.of('Hello');
const s2$ = Rx.Observable.of('World');

RxJs сангийн Observable классын of аргаар мөрүүдээс s1, s2 хувьсагчид стримүүдийг үүсгээд эдгээрийг нэг стримд merge аргаар

const s1$ = Rx.Observable.of('Hello');
const s2$ = Rx.Observable.of('World');

s1$.merge(s2$).subscribe(createSubscribe('merge'));

гэж нэгтгэнэ.

Хичээлээр vue-resource сангийн интерсептор гэдэг сонирхолтой боломжийн тухай үзье. vue-resource сангийн github дээрх хаягаар хандан сан серверт илгээсэн хүсэлт, хариултад интерсепторийг хэрхэн дэмждэг талаар дэлгэрүүлэн үзэж болно.

Интерсепторийг идэвхижүүлбэл өөрөөр хэлбэл интерсептор функцуудыг нэмвэл серверт илгээгдэж буй хүсэлт, серверээс ирсэн хариу бүрийг барих боломж нээгдэнэ.

Хичээлээр компонентод ирж буй параметрүүд зөв эсэх, ийм шалгалтыг хийх ямар ач холбогдолтой талаар үзье. Компонентод параметр дамжуулах хичээлд 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>

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