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 санг компьютертоо суулган санг судлах төслөө үүсгэн ажиллагааг шалган үзлээ. Дараагийн хичээлээс сангийн ажиллагааг практик жишээгээр судлана.

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

Холбоотой материалууд
computed -аар програмд оптимизац хийх

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

Програм ямар нэгэн алдаагүй зөв ажиллаж байх хэрэгтэйг бүгд мэднэ. Харин програм зохиогч өөрийн кодийг хурдтай ажилладаг, зохион байгуулалт сайтай, ойлгомжтой байлгахыг байнга эрмэлзэх ёстой. Програм зохиогч бүр програм боловсруулалтын DRY /do not repeat yourself/ дүрмийг ягштал биелүүлэн хэвшил болгосон байх хэрэгтэй. Хичээлээр Vue -гийн програмын ажиллагааг хэрхэн оновчтой /оптимизаци/ болгохыг доорх жишээгээр

        <div id="app">
            <h2>Тоолуур {{ counter}} </h2>
            <h3>{{ condition }}</h3>
            <button @click="add">Нэмэх</button>
            <button @click="sub">Хасах</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    counter: 0,
                    condition: 'Тоолуур 3-аас бага'
                },
                methods: {
                    add: function() {
                        this.counter ++
                        this.condition = this.counter > 3 ? 'Тоолуур 3-аас их' : 'Тоолуур 3-аас бага' 
                    },
                    sub: function() {
                        this.counter --
                        this.condition = this.counter > 3 ? 'Тоолуур 3-аас их' : 'Тоолуур 3-аас бага' 
                    }
                }
            })
        </script>        
    </body>

авч үзье. Хуудаст тоолуурын counter талбар, харьцуулалтын үр дүнгийн condition талбаруудыг үзүүлэх h2, h3 гарчигаас гадна тоолуурын утгыг нэмэх, хасах хоёр товч байгаа.

ErrorBoundary

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

react 16 гаас дээш хувилбарт бий болсон кодод үүссэн алдаануудыг илүү эвтэйхэн боловсруулахад зориулагдсан ErrorBoundary амьдралын шинэ циклийн талаар судлая. ErrorBoundary аргыг туршихын тулд төслийн src хавтас ErrorBoundary хавтаст үүсгээд

import React from 'react'

export default class ErrorBoundary extends React.Component {
  state = {
    hasError: false
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true })
  }

  render() {
    if (this.state.hasError) {
      return <h2 style={{ color: 'red' }}>Алдаа гарлаа</h2>
    }
    return this.props.children
  }
}

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

Модулийг ашиглан оптимизаци хийх

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

Манай хичээлийн жишээ бага болохоор Vuex store -ийн хэмжээ жижиг байгаа. Төслийг хөгжүүлэхийн хирээр компонентуудын тоо өсөхийн зэрэгцээ Vuex store -д тодорхойлогдох зүйлүүд нэмэгдэн ирэх нь ойлгомжтой. Эндээс state, mutation, getters, actions -д олон тооны зүйлүүдийг тодорхойлон өгснөөр файлын хэмжээ томрох, кодийг ойлгоход хүндрэлтэй болон ирнэ. Иймээс Vuex store -ийг төрөл бүрийн модулд хуваан жижиглэх арга байдгийг хичээлээр авч үзье.

Стримүүдийг нэгтгэх II

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

Javascript дээр бичигдсэн RxJs сан нь програмчлалыг рейктив /reactive/ аргачлалаар боловсруулахад зориулагдсан. RxJs санг ашиглан массив, мөрүүд, тоонууд, промис /promise/, үйл явцууд /event/ гэх мэтийн өгөгдлийн төрлүүдээс гадна дурын синхрон зүйлүүдтэй амархан харьцан ажиллах боломжтой. Стримүүдийг нэгтгэх I хичээлд RxJs санг ашиглан өөр стримүүдийг нэг стримд нэгтгэх аргуудтай танилцаж ба энэ хичээлээр аргуудыг үргэлжлүүлэн авч үзнэ.

concatMap арга

Арга mergeMap аргатай тун адилхан. Аргыг ажиллагааг

Rx.Observable.range(1, 5)
    .concatMap((x, i) => {
        return Rx.Observable.interval(100)
            .take(x)
            .map(c => i)
    })
    .subscribe(createSubscribe('concatMap'));

кодоос харцгаая.

Үйл явдал…

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

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

 
Холбоосын параметрүүд

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

 
Хадгалагч (Memento)

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

 
Кодийн сайжруулалт

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

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

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

функцийн уламжлалыг тооц.

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

 
Бодлого 7.128

утгыг ол.

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

 
Бодлого 4.103

prob04_103_01 ба prob04_103_02 векторууд перпендикуляр бол y -ийн утгыг ол.

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

 
© 2014 Зохиогчийн эрхээр хамгаалагдсан. Холбогдох - 96655195