Програмчлалыг реактив /reactive/ аргачлалаар боловсруулахад зориулагдсан Javascript дээр бичигдсэн Rxjs санг өөрийн програмдаа ашиглахын тулд түүнийг компьютертоо хэрхэн суулгахыг RxJs санг суулгах хичээлд хийсэн. Сан хэрхэн ажилладагийг харахын тулд index.js файлд сангийн хамгийн энгийн боломжийг үзүүлэх

var stream$ = Rx.Observable.create(function (observer) {
    observer.next('нэг');
});

кодыг оруулан өгье. Дээрх код stream буюу урсгал үүсгэж байгаа. RxJs санд стрим нь ердийн хувьсагч. JavaScript -д стрим мэтийн синхрон төрлийн хувьсагчийн нэрийн ард $ тэмдэг тавьдаг дүрэмтэй. Кодод стрим төрлийн stream$ хувьсагчид RxJs сангийн Observable классын create аргаар стрим үүсгэн олгосон байгаа.

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

filter арга

Арга хэрхэн ажиллахыг шууд практик жишээн дээр харцгаая.

Rx.Observable.range(0, 10)
    .filter(x => x >3)
    .subscribe(createSubscribe('filter'));

Жишээнд стримийг RxJs сангийн Observable классын range аргаар үүсгэсэн. range арга 0 -ээс 10 хүртэлх тоон дарааллыг үүсгэнэ. filter аргад дарааллын урсгалд шүүлт тавих нөхцлийг дамжуулах ёстой. Аргад өгсөн нөхцлөөр тоон дарааллаас 0, 1, 3 элементүүдэд шүүлт /өөрөөр хэлбэл нөхцөлд тохирохгүй/ тавигдан 4 -өөс 10 хүртэлх тоонуудыг консолд үзүүлэх ёстой. Кодыг ажлуулбал

Цэсийг нээх хаах ажиллагааг хариуцах компонентийг боловсруулсан тул энэ хичээлээр програмийн удирдах цэсийг хийе. Үүний тулд төслийн components хавтасны Navigation хавтаст цэсний компонентийн Drawer хавтасыг үүсгээд түүнд Drawer.js, Links.js, Drawer.module.css файлуудыг үүсгэн өгье. Drawer.js файлд

import classes from "./Drawer.module.css";
import {links} from "./Links"

const Drawer = (props) => {
  const renderLinks = () => {
    return links.map((link, index) => {
      return (
        <li key={index}>
          <a href="/#">Link {link}</a>
        </li>
      );
    });
  }
    
  return (
    <nav className={classes.Drawer}>
      <ul>{renderLinks()}</ul>
    </nav>
  ) 
}

export default Drawer;

код бүхий компонентийг үүсгэе.

Математикийн тогтмолууд болон математик тооцоолол хийх аргууд болон шинжүүдийг агуулсан дотоод обьект юм. Array, Date обьектуудаас ялгаатай нь хуулбар үүсгэх боломжгүй. Иймээс Math обьектын хуулбар үүсгэх албагүй байдаг бөгөөд үүнийг хөрвүүлэгч өөрөө хийдэг. Жишээ нь 10 -аас квадрат язгуур авах хэрэгтэй боллоо гэхэд Math обьектын sqrt() аргыг шууд ашиглаж болно.

    var root = Math.sqrt(10);    //  10 -ын квадрат язгуур
    document.write("Math.sqrt(10) = " + Math.sqrt(10) + "<br />");