RxJs санг суулгах

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

Хичээлд RxJs санг компьютертаа суулган, туршилтын төслийг үүсгэхийг авч үзэцгээе. Хичээлд WebStorm засварлагчийг ашиглах ч та өөрийн дуртай засварлагчийг ашигласан ч болно.

WebStorm засварлагчийг нээгээд rxjs_lesson нэртэй хоосон төслийг үүсгээд засварлагчийн терминалыг нээгээд npm install rxjs@5.3.0 командыг өгнө. Хичээлд сангийн 5.3.0 хувилбарыг ашиглана. Та хамгийн сүүлийн хувилбарыг суулгаж болно. Код онцын ялгаагүй ажиллана. Сүүлийн хувилбаруудад зарим нэгэн шинэчлэл хийгдсэн байвал түүнийг сангийн албан ёсны сайтаас үзээд явахад асуудлагүй.

RxJs санг суулгахдаа npm утилитыг ашигласан. Кодыг бичихдээ WebStorm хэрэгслийг ашиглаж байгаа болохоор түүний терминалыг ашиглан командыг өгч байгаа юм. Таны компьютерт WebStorm суугдаагүй бол үйлдлийн системийнхээ терминалын цонхыг нээх командыг ашиглаарай. Жишээ Windows -ын хувьд cmd команд. 
Үйлдлийн системийн терминалыг ашиглахын тулд таны компьютерт node.js сан суусан байх ёстой. Санг хэрхэн суулгаыг Node -ийг суулгах хичээлээс үзээрэй. npm install rxjs@5.3.0 командыг төслийн хавтас дотроос ажлуулах хэрэгтэй гэдгийг сануулъя.
Команд ажиллаж дуусахад манай төслийн хавтаст RxJs сангийн кодыг агуулсан node_modules гэсэн хавтас үүснэ. node_modules хавтас доторх rxjs хавтсыг нээн харвал сангийн цөм болох олон тооны файлууд, төрөл бүрийн классууд байгаа. Гэхдээ бид ямар нэгэн компиляторгүйгээр хөтөч дээр шууд ажиллах учраас бидэнд bundles хавтаст байрлах сангийн компиал хийгдсэн код Rx.min.js файл хэрэг болно. Сангийн ажиллагааг хөтөч дээр шууд харах гэж байгаа учраас төсөлд

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RxJs сан</title>
</head>
<body>

<script src="node_modules/rxjs/bundles/Rx.min.js"></script>
<script src="index.js"></script>
</body>
</html>

код бүхий index.html файлыг нэмье. <script src="node_modules/rxjs/bundles/rx.min.js"></script> мөр бол манай html файлд rx.min.js файлыг оруулан ирэхийг заана. Сангийн ажиллагааны жишээг тусдаа index.js файлд бичнэ гэж үзээд түүнийг <script src="index.js"></script> гэж бас оруулан ирнэ. Иймээс index.js файлыг төсөлдөө нэмэн өгөөрэй. Өөрсдийн кодын файлыг rx.min.js файлыг оруулсны дараа бичин өгөх хэрэгтэйг сануулъя. Одоо манай төслийн бүтэц

болсон байгаа. index.html файлыг хөтөч дээр нээе. WebStorm дээрээс файлыг хөтөч дээр нээхийн тулд Alt + f2 хослолыг дараад хөтчөө сонгож болохоос гадна кодын ажлын дэлгэц дээрээс хөтөчийн зураг дээр дарахад болно. Харин файл эксплорер дээрээс нээхдээ Shift товчийг дарж байгаад нээгээрэй. Файлыг нээгээд хөтөчийн Console хэсгийг харвал

юу ч байхгүй байгаа. Бид index.js файлд ямар нэгэн код бичээгүй тул энэ нь ойлгомжтой. index.js файлд

console.log(Rx);

командыг бичин өгье. Дээрх мөрөөр манай хуудас RxJs санг харж байгааг шалгаж байгаа хэрэг. Rx бол сангийн суурь обьект юм. Хөтөч дээрх хуудсаа шинэчилбэл

консолд обьектыг харуулна. Энд маш олон тооны классууд харагдаж байгаа нь бид хуудастаа RxJs санг оруулан ирж чадсанг илтгэнэ. Ингээд бид RxJs санг компьютертоо суулган санг судлах төслөө үүсгэн ажиллагааг шалган үзлээ. Дараагийн хичээлээс сангийн ажиллагааг практик жишээгээр судлана.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 1579 Төлбөртэй

RxJs санг ашиглан стримээс тараах өгөгдлүүдээс сонголтыг маш эвтэйхэн зохион байгуулах аргын талаар энэ хичээлээр үзнэ. Үүний тулд of аргаар энгийн Observable /ажиглагч/ -ийг

Rx.Observable.of(1, 5, 'Hello', 'World')
    .first()
    .subscribe(createSubscribe('first'));

index.js файлд үүсгэн өгье. Код RxJs сангийн Observable классын of аргаар Observable /ажиглагч/ -ийг үүсгээд түүнд subscribe аргаар бүртгүүлсэн. Аргад өөрсдийн зохиосон туслах createSubscribe функцийг дамжуулна.

  Нээгдсэн тоо: 630 Бүртгүүлэх

Vue фреймворкийн ээлжит хичээлээр форм дээрх тоон утгын талбаруудад v-model директивийг яаж ашиглахыг үзье. Жишээ нь форм дээрээс хэрэглэгчийн насыг авах хэрэгтэй болсон гэе. Үүний тулд

<template>
  <div>
    <h2>Form inputs</h2>
    <input type="text" v-model="age">
    <hr>
    <p>{{ age }}</p>
  </div>
</template>

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

код байхад болох мэт.

  Нээгдсэн тоо: 506 Бүртгүүлэх

Jsx нь html -тэй төстэй харагдах ч ердийн javascript бичлэг болох, хэрхэн ажилладагийг JSX хичээлээс мэдсэн тул Jsx -ээр хуудасны тэмдэглээг хийхэд ямар хязгаарлалт үйлчилдэг талаар авч үзье.

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>
          Hello world!
        </h1>
      </div>
    )
  }
}

  Нээгдсэн тоо: 213 Бүртгүүлэх

Сорилгын үр дүнгийн QuizResult компонентод сорилгыг дахин эхлүүлэх товч байгаа. react -ийг зохиогчид  програмийг компонент дээр суурилан хийх аргачлалыг уриалдаг учраас сорилгыг дахин эхлүүлэх товчийг тусд нь компонент байдлаар боловсруулъя. Үүний тулд төслийн components хавтаст UI нэртэй хавтасыг үүсгээд түүнд Button хавтасыг үүсгэе. UI гэдэг нь /user interface/ буюу хэрэглэгч талын дэлгэцийн төрөл бүрийн элементүүдийг үзүүлэх компонентуудыг агуулах юм. Button хавтас бол дэлгэц дээр үзүүлэх товчны компонентийн хавтас бөгөөд түүнд Button.js, Button.module.css үүсгэн өгөөрэй.

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

Нээгдсэн тоо : 131

 

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

Нээгдсэн тоо : 192

 

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

Нээгдсэн тоо : 160

 

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 286

 

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 315

 

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

Нээгдсэн тоо : 322

 

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 386

 

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 388

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 464

 
Энэ долоо хоногт

KLM суурьтай, KL=1, KK1=d талтай KLL1K1 тэгш өнцөгт хажуу бүхий KLMK1L1M1 призм өгөгджээ. KL_|_KM, LMM1 , KMM1 хавтгайнуудын хоорондын өнцөг 60°, бол утганд призмд түүний бүх талыг шүргэх шаарыг багтааж болно.

Нээгдсэн тоо : 1803

 

тоонд хуваахад гарах тооны аравтын бичлэгт "0" цифр хэдэн удаа орох вэ?

Нээгдсэн тоо : 1506

 

Нээгдсэн тоо : 1488