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

Сүүлийн жилүүдэд 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 аргатай их сайн ажилладаг бөгөөд арга стримийг өөрөө бидний өмнөөс дуусгаж байгаад анхаарна уу.

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

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

Хэрэглэгчтэй харьцах үндсэн элемент бол форм. Хөтөч дээр ажиллах програм зохиоход хэрэглэгч талын дэлгэцийг уян хатан, динамик ажиллагаатай болгоход javascript -гүйгээр төсөөлөхөд бэрх. Энэ хичээлээс html5 -ын хэрэглэгчтэй харилцах формын элементүүдтэй VueJs -ээр хэрхэн харьцахыг суралцаж эхлэнэ. Формд хамгийн ихээр хэрэглэдэг input элементийн ажиллагааг

<template>
  <div>
      <h2>Form inputs</h2>
      <input type="text">
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: ''
    }
  }
}
</script>

жишээгээр авч үзье. Vue фреймворкийн үндсэн ойлголтууд багцын хичээлүүдийг эхнээс үзсэн бол дээрх кодыг төвөггүй ойлгоно. Аливаа зүйлийг энгийнээс эхлэн зөв ойлговол сурахад дөхөм байдаг тул багц хичээлүүдийг үзэхийг зөвлөе. Зарим хичээл төлбөртэй тул та тусгай эхртэй хэрэглэгч байх ёстойг анхаарна уу.

Жич: Үнэ төлөөд үзэх эсэх нь таны сонголт. Гэхдээ дараа болъё, үнэгүй хичээл олдоно гэх мэтээр хойшлуулах нь эргээд алдагдсан боломж болдог. Цаг хугацаа таныг хүлээхгүй. Хичээлүүдийг бэлтгэх явцад Vue фреймворкийн шинэ хувилбарууд гарч ирсэн хэдий ч ерөнхий зүйл хэвээрээ. Шинэ хувилбарт орсон өөрчлөлтийг хичээлийн материалд туршин шалгаад явах нь бүр ч илүү үр дүнтэйг сануулъя.

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

Формын өгөгдөлд шалгалт буюу validation хийх ажиллагаа ямарч програмын хувьд чухал хэсэг байдаг тул материалыг анхааралтай судлан ойлгон автлаа үзээрэй. Формын шалгалтуудад ашиглах төслийг Формын шалгалтын бэлтгэл хичээлд үүсгэн Vuelidate пакетийг суулган цахим шуудангийн хаягийг авах талбарыг нэмсэн. Одоо формын шалгалтад Vuelidate пакетийг хэрхэн ашиглахыг сурцгааж эхлэе.

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

Сүүлийн жилүүдэд сайт боловсруулах ажиллагаанд раектив буюу дэвшилтэд Angular, React гэх мэтийн javascript сангууд маш хүчтэй түрэн орж ирэх болсон. Үүний нэг бол Vue фреймворк бөгөөд сайтад энэхүү дэвшилтэд технологи ямар боломжтой, бусдаас ямар давуу талуудтай, ямар зориулалттай болохыг цуврал хичээлүүдээр толилуулна. Эхлээд Javscript фреймворкууд яагаад ийм хүчтэй түрэн орж байгаа талаар ярилцая.

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

Програмчлалын хэл сурах нь нилээд шургуу, тэсвэр, хатуужил шаардах ажил. Өнөө үед програмчлалын хэлүүд обьект хандлагат зарчмыг бараг бүгд нэвтрүүлсэн болохоор хэлүүд бичлэгийн хувьд их ижилхэн болсон.   Дээрээс нь програмчлалын суурь бүтцүүд бүх хэлний хувьд ижил байдаг тул зарим хүмүүс програмчлалын хэлийг сурахад амархан хөнгөн гэж ярьж тайлбарлаж байдаг. Энэ бол их өнгөц хандлага гэдгийг сануулъя. Програмчлалын үндсэн суурь технологи, ажиллагааны зарчмыг зөв ойлгохын тулд нилээд гүн судалгаа хийх зайлшгүй шаардлагатай. Иймээс сйатад нийтлэгдэж буй програмчлалын хэлний хичээлүүдийг бүгдийг нь алгасалгүй үзэж судлахыг зөвлөе.

Vuejs - д компонент үүсгэсний дараа түүнийг бүртгүүлэх хэрэгтэй болдог. Энэ хичээлээр компонентүүдийг бүртгүүлэх аргуудын талаар авч үзнэ. Яагаад компонентийг бүртгүүлэх шаардлагатайг ойлгохын тулд Компонентууд ямар хэрэгтэй вэ? хичээлд my-counter компонент үүсгэсэн

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

Өдрийн хуваарьт 5 хичээл ордог. Тэгвэл 11 хичээлээс зохиож болох хуваарийн хувилбарын тоог ол. Нэг хичээл өдөрт нэг удаа л орно.

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

 

y=8x3 ба y=8x функцуудын графикаар хязгаарлагдсан дүрсийн талбайг ол.

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

 

тэгшитгэлийн язгуурууд x1 , x2 , x3 бол

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