Шүүлтийн операторууд

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

filter арга

Арга хэрхэн ажиллахыг шууд практик жишээн дээр харцгаая.

Rx.Observable.range(0, 10)
    .filter(x => x >3)
    .subscribe(createSubscribe('filter'));

Жишээнд стримийг RxJs сангийн Observable классын range аргаар үүсгэсэн. range арга 0 -ээс 10 хүртэлх тоон дарааллыг үүсгэнэ. filter аргад дарааллын урсгалд шүүлт тавих нөхцлийг дамжуулах ёстой. Аргад өгсөн нөхцлөөр тоон дарааллаас 0, 1, 3 элементүүдэд шүүлт /өөрөөр хэлбэл нөхцөлд тохирохгүй/ тавигдан 4 -өөс 10 хүртэлх тоонуудыг консолд үзүүлэх ёстой. Кодыг ажлуулбал

Материалыг тусгай эрхтэй хэрэглэгч үзнэ.

request_quoteТусгай эрх авах

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

Холбоотой материалууд
Промисээс стрим үүсгэх

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

Энэ хичээлд стримийг үүсгэж болдог RxJs сангийн Promise /промис/ бүтцийн талаар авч үзье. Promise үгийн орчуулгыг мэдэхгүй тул промис гээд явах нь илүү. Промис JavaScript -ын ES6 хувилбарт бий болсон асинхрон кодтой ажиллахад их эвтэйхэн бүтэц юм. RxJs нь JavaScript -ын хэрэгслүүдийг илүү сайжруулсан сан тул бид програмдаа промисоос стримийг үүсгэх боломжтой. Промисын талаарх мэдлэгээ сэргээхийн тулд index.js файлд бидэнд ямар нэгэн промис үүсгэн өгөх

function delay(ms = 1000) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, ms);
    });
}
useContext

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

Javascript хэл сайтын хэрэглэгч талын буюу frontend хэсгийн програмчлалд хүчтэй түрэн орж ирлээ. Орчин үед хэрэглэгч талын хуудасыг SPA буюу нэг хуудаст аппликашн байдлаар хэрэгжүүлэх хандлага түлхүү зонхилох болсноор frontend кодлогчийн өндөр түвшинд эзэмшсэн байх зүйл бол Javascript болон түүнд дээр зохиогдсон фреймворкууд яалтгүй болоод байгаа. Ямар нэгэн зүйлийг өнгөцхөн судлаад өнгөрөх нэг хэрэг. Харин тухайн зүйлээ сайн эзэмших тийм ч амаргүй. Байнга суралцан судлах хэрэгтэй. Та frontend кодлогч болохоор шийдсэн бол сайтад нийтлэгдсэн хичээлүүдийг үзэхийг хичээнгүйлэн зөвлөе.     

useContext хукийн ажиллагааг судлахын тулд жижиг хэмжээний програмийг зохиоцгооё. Програмийн суурь бүтцийг App компонентод

import React from 'react'
import Alert from './Alert';
import Main from './Main';

function App() {
  return (
      <div className="container pt-3">
        <Alert />
        <Main />
      </div>
  );
}

export default App;

байдлаар зохион байгуулъя.

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

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

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох цэс бусдаасаа ялгагдахгүй байгаа нь сайнгүй. 
Үнэхээр / чиглүүлэгч нүүр хуудас буюу http://localhost:3000/ хаягаар нүүр хуудасыг үзүүлж байхад

r_07_02_01

кодийн a тегээр тодорхойлогдсон Нүүр холбоост ямар нэгэн атрибут байхгүй байгаа нь харагдана. 

Формтой ажиллах модел

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

Хэрэглэгч програмын өгөгдөлтэй харьцах ажиллагаа бол ямарч програмыг хувьд чухал хэсэг байдаг. Үүнийг голдуу формоор дамжин хийдэг. Иймээс энэ удаа VueJs -ээр төрөл бүрийн input элементүүдтэй хэрхэн ажиллахыг

    <body>
        <div id="app">
            <input type="text">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {

                }
            })
        </script>
    </body>

кодоор авч үзье. Кодод хэрэглэгчээс өгөгдөл авах input элемент div id="app" элементэд Vue -гийн хувийн инициализац хийсэн байгаа. Хуудсыг нээвэл ердийн input талбар л үзэгдэнэ. Тэгвэл input элементэд ямар нэгэн зүйлийг оруулахад түүнийг хуудасны шаблонд шууд харуулах асуудлыг шийдье.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

функцийн интервал дахь хамгийн бага утгыг ол.

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

 
Бодлого 10.049

Зөв дөрвөн өнцөгт пирамидын өндөр 4. Хажуу ирмэг суурийн хавтгайд 30 градусын өнцгөөр налсан бол пирамидын хажуу ирмэгийг ол.

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

 
Бодлого 4.062

бол M·N=?

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

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