RxJs сангийн хүрээнд буфер гэж юу болох талаар энэ хичээлээр авч үзье. Буфер гэдгийг утгуудыг түр зуур хадгалах сав буюу орон зайг гэж ойлгоорой.

buffer, bufferTime арга

Практик жишээгээр ухагдхууныг ойлгох нь амархан байдаг учраас шууд

Rx.Observable.interval(500)
    .buffer(Rx.Observable.interval(2000))
    .take(3)
    .subscribe(createSubscribe('buffer'));

кодыг авч үзье. Хөтөч дээр хуудсаа нээвэл консолд

үр дүнг үзүүлнэ. Код юу хийж байгааг авч үзье.

Таны програм хөгжихийн хирээр компонентуудын тоо нэмэгдэнэ. Хэрвээ компонент бүр өөрийн хэвжүүлэлтийг css өргөтгөлтэй тусдаа файлуудад хадгалан ашиглаж байвал зарим хэвүүдийн нэр давхцан хэвүүд өөрчлөгдөх магадлал бий. Учир нь css өргөтгөлтэй файлууд бусад компонентуудад нээлттэй байдаг. Үүнийг шалгах зорилгоор Car компонентийн Car.css файлд

.btn {
  color: yellowgreen;
}

хэвийг нэмэн тодорхойлоод хэвийн классийг App компонентийн Toogle car товчинд

        <button className='btn' onClick={this.toogleCarsHandler}>Toogle car</button>

тавин өгөөд хуудсаа нээвэл

Хөтөч дээр ажилладаг програмын чухал хэсэг бол хуудасны хэвжүүлэлт байдаг гэдгийг бүгд мэднэ. Хуудасны харагдах хэлбэр, өнгөний зөв сонголт нь таны програмыг бусдаас ялгаруулан харагдуулах нэг гол хүчин зүйл гэдгийг санаарай.

Vue -гийн компонентод хэвүүдийг /css style/ яаж ашиглах талаар үзье. Тухайлбал компонентийн style хэсгийг хэрхэн ашиглах тухай юм. Үүний тулд төслийн компонентуудийн кодыг доорх байдлаар хураангуйлая.
App.vue файл.

<template>
  <div>
    <app-counter></app-counter>
    <app-car></app-car>  
  </div>
</template>

<script>
import Car from './components/Car.vue'
import Counter from './components/Counter.vue'

export default {
  components: {
    appCar: Car,
    appCounter: Counter
  }
}
</script>

Жич: Сүүлийн жилүүдэд javascript фреймворкууд эрчимтэй хөгжин програмчлалын хэлүүдийн рейтенгд нилээд дээгүүр байранд орж ирэх болсон. Иймээс дэлхийн чиг хандлагаас хоцрохгүйн тулд хэлийг судлан суралцахад манай сайт таныг дэмжин ажиллана. Хичээлүүдийг бүгдийг Vue фреймворкийн үндсэн ойлголтууд багцаас үзээрэй.

Энэ хичээлээс эхлэн react ашигладаг jsx бичлэгийн дүрмийн талаар дэлгэрүүлэн авч үзнэ. Өмнөх хичээлүүдэд хуудасны хэвийн тэмдэглэгээний jsx бичлэгийн дүрмийн үндсэн ойлголтуудыг үзсэн. Энэ удаад jsx гэж юу болох, хэрхэн ажилладагийг react програм үүсгэх хичээлд үүсгэсэн төслийн кодоор авч үзье. Бидний үүсгэсэн төслийн оролтын index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

файлд ReactDOM обьектын render аргад App нэрээр импортлон авсан App компонентийг эхний параметрээр дамжуулж байгаа.