Массиваас стрим үүсгэх

Сүүлийн жилүүдэд Javascript хэл хөгжихийн хирээр түүнийг хэрэглэгч талын хуудасны хөгжүүлэлтэд улам ихээр ашиглан нэг хуудаст аппликашныг /SPA/ хийхэд өргөнөөр ашиглах боллоо. Цаашид Javascript програмистуудын эрэлт огцом өсөх хандлага бий болж байгаа тул та програмын чиглэлээр ажилладаг эсхүл суралцдаг бол сайтын хичээлүүдтэй танилцахыг санал болгоё. Хичээлд масиваас стрим үүсгэх боломжийг авч үзэх болно. Үүний тулд төслийн index.js файлд

function createSubscribe(name) {
    return {
        next(x) {
            console.log(name, ': ', x);
        },
        error(err) {
            console.log('Error: ', err);
        },
        complete() {
            console.log(name, ': Completed!');
        }
    }
}

Rx.Observable.from([1, 2, 3, 4])
    .subscribe(createSubscribe('from'));

кодыг оруулан өгье.

Масиваас стрим үүсгэхийн тулд Observable классын from аргыг ашигладаг. Аргад бид ямар нэгэн массивыг дамжуулах ёстой. Манай жишээнд 4 элемент бүхий [1, 2, 3, 4] массивыг дамжуулсан. Стримийг ажлуулахын тулд түүнд subscribe аргаар бүртгүүлэх ёстой гэдгийг бид мэднэ. Аргад манай боловсруулалтын createSubscribe функцыг from -ийг параметртэйгээр дамжуулна. Одоо хөтөч дээр index.html файлыг нээвэл консолын цонхонд

from арга түүнд дамжуулсан массиваас 4 стрим үүсгээд түүнийг дуусгасан үр дүнг харна. from арга дамжуулсан массивын элемент бүрээр циклдэн түүний утгыг тусдаа утга байдлаар тараадаг. Ер нь of аргатай их төстэй ч from арга массивтай ажиллана. Массивын элементээр дурын обьектыг дамжуулж болно. Жишээ нь кодод

const arr=[
    {
        id: 1,
        name: 'Улаанбаатар'
    },
    {
        id: 2,
        name: 'Москва'
    }
];

обьектуудын массив үүсгэн өгөөд түүнийг

Rx.Observable.from(arr)
    .subscribe(createSubscribe('from'));

from аргад дамжуулаад хөтөч дээр нээгдсэн хуудсаа шинэчилбэл

консолд массивын элементүүдийг обьект байдлаар хүлээн авна. Ингээд цааш тухайн обьекттой ажиллах боломжтой болно. Энэ бол массивын элементүүдээр хийсэн ердийн цикл.

ES6 бичлэгийн дүрмийн бүтцийг ашиглах.

JavaScript -ын ES6 хувилбарт бий болсон массив үүсгэх бүтцүүдийг ашиглан from аргатай ажиллах талаар авч үзье.
Жич: Бүх хөтөчүүд JavaScript -ын ES6 хувилбарыг бүрэн дэмждэг болоогүй байгаа гэдгийг сануулъя. Chrome, Firefox -ийн сүүлийн хувилбарууд ES6 -г дэмждэг учраас та өөрийн хөтөчөө сүүлийн хувилбар хүртэл шинэчилбэл асуудал үүсэхгүй.

Set бүтэц

ES6 -гийн Set бүтцийн байгуулагчид массивыг

const set = new Set([1, 2, 3 , '4', '5', {id: 6}]);

гэж дамжуулан сет үүсгээд түүнийг from аргад

Rx.Observable.from(set)
    .subscribe(createSubscribe('from'));

дамжуулаад хөтөч дээрх хуудсаа шинэчилбэл

сетийн элемент бүрээр циклдэн утгуудыг үзүүлсэн үр дүнг авна.

Map бүтэц      

ES6 -д бий болсон бас нэгэн бүтэц бол Map бөгөөд түүний байгуулагчид массивыг

const map = new Map([[1, 2], [3, 4], [5,6]]);

дамжуулаан map үүсгээд түүнээс from аргаар стрим үүсгэхийн тулд

Rx.Observable.from(map)
    .subscribe(createSubscribe('from'));

дамжуулбал

map -ын элемент бүрээр утгыг хүлээн авна.
Массив болон түүнтэй төстэй бүтцүүд from аргатай их сайн ажилладаг бөгөөд арга стримийг өөрөө бидний өмнөөс дуусгаж байгаад анхаарна уу.

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

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

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

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

Хичээлээр Promise ухагдхууны тухай жишээгээр авч үзье. Эхлээд Promise гэж юу болох юунд ашигладагийн тухайд гэвэл. ES6 - д Promise гэдэг нь синхрон буюу зэрэг биелэгдэх кодтой ажиллах механизм юм. Үүнийг ойлгохын тулд хүлээлт үүсгэх функцийг эхлээд ES5 - аар хэрэгжүүлсэн

function oldDelay(ms, func) {
    setTimeout(function () {
        func();
    }, ms);
}

oldDelay(3000, function () {
    console.log('Old delay passed!');
});

кодыг харцгаая. oldDelay функц эхний ms параметрээр хүлээлт үүсгэх хугацааг харин хоёрдахь func параметрээр хүлээлтийн хугацаа дуусахад дуудагдах функцийг авна. Хүлээлтийг setTimeout функцээр үүсгэх бөгөөд функц эхний параметрээр эргэн дуудалтын /callback/ функц харин хоёрдахь параметрээр хүлээлтийн хугацааг авдаг. setTimeout функцийн хоёрдахь параметр буюу хүлээлтийн хугацаанд oldDelay функцэд ирэх ms параметрийг өгөөд энэ хугацаа өнгөрөхөд ажиллах эргэн дуудалтын функцээс oldDelay функцэд параметрээр ирсэн func функцийг дуудна.

  Нээгдсэн тоо: 1399 Нийтийн

Компонентыг бүртгүүлэх хичээлд компонентийн нэрийг 'my-counter' гэж мөр төрлөөр бичин өгсөн. Энэ нь зарим тохиолдолд асуудал үүсгэдэг. Жишээ нь та төсlлийн кодыг бичиж буй засварлагчид кодыг цэвэр байлгах ямар нэгэн хэрэгсэл /linter/ ашиглаж байвал нэрэнд хашилтыг хэрэглэвэл төслийн хэвээс хасагддаг тул үүнийг ашиглахгүй байх нь дээр. Иймээс VueJs -д компонентийн нэрийг үүсгэх өөр аргачлал байдаг. Компонентийн нэрийг өгөхдөө

            new Vue({
                el: '#app',
                components: {
                    'my-counter': component
                }
            });

хашилтанд my-counter гэж html кодод ашиглах тегийн нэрийг өгсөн байгаа.

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

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/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

олон гишүүнтийн язгуурууд x1, x2, x3 (x1<x2<x3) бол
1.
2. x1, x2, x3 арифметик прогрес үүсгэх бол
3. Уул прогрессын ялгавар
4.

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

 

sin90 -ийг олно уу.

Жич: Хатуу самар даа. Сурагчид барна гэхэд хүнд болов уу. ЕБС-ийн хүрээний аргаар л бодолтыг хийж байгаа тул бодолтыг харвал гайгүй ч юм шиг санагдаж магадгүй гоё бодлого.

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

 

тэгшитгэлийг бод.

Жич: Бодох арга орж ирж байна уу. Найз нөхөд, багштайгаа хамжаад үзээрэй. Иймэрхүү бодлогууд сэтгэлгээг хөгжүүлэх, арга техникт суралцахад тустай. 

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