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

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

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

Javascript хэлийг ашиглахгүйгээр сайт зохионо гэдэг бүтэхгүй зүйл гэдэг нь ойлгомжтой. Сайтын хэрэглэгч талын хуудаст олон төрлийн javascript санг ашигладаг байсан бол одоо сайтыг бүгдийг javascript фреймворк ашиглан хийдэг SPA /single page application/ технологийг улам ихээр хэрэглэх болсон. Эдгээрийн нэг болох Vuejs сангийн хичээлүүдийг сайтад нийтэлж байгаа бөгөөд энэ удаад Vue -гийн хувийн тохиргооны обьектод data талбарт обьект тодорхойлж болж байхад яагаад компонентын хувийн тохиргооны обьектод data талбарт функц тодорхойлох ёстойг авч үзье. Компонентууд ямар хэрэгтэй вэ? хичээлийн жишээг

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

ECMA6 гийн тэмдэгтүүд гэж юу болох тэдгээртэй хэрхэн ажиллахыг харцгаая. Тэмдэгт гэдэг нь javascript -ийн өгөгдлийн шинэ төрөл ба түүнийг Symbol классаар үүсгэдэг. Жишээ нь

let s = Symbol('e-surgalt.com');
console.log(typeof s);

symbol төрлийн обьектыг үүсгэхдээ Symbol классын байгуулагчид утга дамжуулах эсхүл дамжуулахгүй байсан ч болно.

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

Хичээлээр компонентод ирж буй параметрүүд зөв эсэх, ийм шалгалтыг хийх ямар ач холбогдолтой талаар үзье. Компонентод параметр дамжуулах хичээлд App компонентоос carName, carYear талбаруудыг Car компонентод параметрээр дамжуулан авч үзүүлсэн. Тэгвэл Car компонент ирсэн параметрүүд дээр ямар нэгэн нэмэлт үйлдлийг жишээ нь машины нэрийг тонгоруулан

<template>
  <div class="car">
    <h3>Name: {{ carName }} \ {{reverseName}}</h3>
    <p>Year: {{ carYear }}</p>
  </div>
</template>

<script>
  export default {
    props: ['carName', 'carYear'],
    computed: {
      reverseName() {
        return this.carName.split('').reverse().join('')
      }
    }
  }
</script>

харуулдаг гэж үзье.

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

Зарим төрлийн бодлогыг бодоход нэг ижил үйлдлүүдийг олон дахин давтах тохиолдол гардаг. Практикт ийм төрлийн ажиллагааг циклээр шийдвэрлэнэ. Цикл гэдэг нь дараалсан үйлдлүүдийг тодорхой тоогоор давтан гүйцэтгэхийг хэлнэ. JavaScript -д хоёр төрлийн циклийн оператор байдаг.

  • Урьдчилсан нөхцөлтэй цикл
  • Параметртэй цикл

while оператор

while нь урьдчилсан нөхцөлт циклийн оператор болно. Тухайн оператор циклийн нөхцлийг биелэгдэхгүй болох хүртэл үйлдлүүдийг давтан хийдэг.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

Тэгш өнцөгт параллелепипедын диагнал түүний 3 ба 4 хэмжээтэй талстад 60 градусын өнцгөөр налсан бол диагоналын урт хэд вэ?

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

 

Суурийн радиус нь 4 см байх шулуун дугуй цилиндрийн нэг үзүүрээс зурагт үзүүлснээр хавтгайгаар огтлоход хамгийн урт байгуулагч нь 15 см, хамгийн богино байгуулагч нь 9 см болсон бол үүссэн биетийн эзэлхүүнийг ол.

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

 

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

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