Динамик хэвүүд /стилүүд/

Интернетэд сууриласан буюу хөтөч дээр ажилладаг програмуудын хэрэглэгчийн дэлгэцийг бүрэн удирдах боломжийг олгодог нь Javascript хэлний нэг давуу тал. Хэрэглэгч талын дэлгэцийг css хэвүүд ашиглан хэвжүүлдэг ч тэдгээрийг динамикаар удирдах хэрэгцээ зайлшгүй гардаг. Хичээлээр хуудасны элементүүдийн хэвийг css классууд ашиглахгүйгээр элементийн бичлэгт динамикаар оруулахыг CSS классуудтай ажиллах хичээлийнхтэй төстэй

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
        <style>
            .circle {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 1px solid black;
                display: inline-block;
                margin: 40px;
            }

            .red {background: red;}
            .blue {background: blue;}
            .green {background: green;}
        </style>
    </head>
    <body>
        <div id="app">
            <div class="circle" :style="{'background': color}"></div>
            <div class="circle"></div>
            <hr>
            <input type="text" v-model="color">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    isActive: false,
                    color: 'blue'
                }
            })
        </script>
    </body>
</html>

жишээн дээр авч үзье.

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

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

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

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

RxJs сангийн хүрээнд стримтэй ажиллах ажиллагааг улам хөнгөн болгодог тусгай хэрэгслүүдийн талаар энэ хичээлээр авч үзнэ. Хичээлийн материалийг бүрэн гүйцэд ойлгохын тулд өмнөх хичээлүүдийг үзсэн байх шаардлагатайг сануулъя.

defaultIfEmpty арга

of аргаар

Rx.Observable.of(1)
    .subscribe(createSubscribe('of'));

стрим үүсгээд түүнд бүртгүүлсэн кодыг бичээд хөтөч дээр хуудсаа нээгээд консолын цонхыг харвал

дээрх үр дүнг өгөх нь ойлгомжтой. of аргад юу ч дамжуулахгүй бол код хэрхэн ажиллахыг харцгаая.

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

Сүүлийн жилүүдэд javascript сангуудын хөгжлөөр интернет програмчлалд хувьсгал гарч байгаа гэж хэлэхэд болно. Учир нь javascript хэлийг бүх хөтөч ойлгодог учраас хэрэглэгч талын ажиллагааг динамик болгон сервер талын ажиллагааны ачааллыг бууруулахад чухал үүрэг гүйцэтгэснээр SPA буюу нэг хуудаст програмыг зохиох боломжийг нээсэн. Javascript сангуудын нэг болох Vuejs сангийн тухай хичээлийг сайтад цувралаар нийтэлж байгаа билээ. Хичээлүүдийг бүгдийг Vue фреймворкийн үндсэн ойлголтууд багцаас үзэхийг зөвлөе.

Хүүхэд компонент хоорондын холбоо хичээлд төслийн компонентуудад зохих өөрчлөлтүүдийг оруулаад програмын ажиллагааг шалган үзэхэд Тоолуурыг нэмэгдүүлэх товчийг дарахад тоолуурын утга нэмэгдэхгүй байсан шалтгааныг танд үлдээсэн билээ. Товч ажиллахгүй байсан шалтгаан энгийн. Та Доод шатны /хүүхэд/ компонентоос параметр дамжуулах хичээлийн материалыг сайн ойлгосон бол учрыг маш хурдан олно. Товч ажиллахгүй байсан шалтгаан гэвэл Car компонентийн updateCounter аргаас үүсгэсэн counterUpdated үйл явцын сонсогчийг App компонентод тавин өгөөгүйтэй холбоотой. Тэгвэл үйл явцын сонсогчийг App компонентийн хэвд Car компонентийг оруулан ирэх app-car тегд

<template>
  <div>
    <h1>Эцэг: {{ carName }}</h1>
    <app-counter :counter="counter"></app-counter>
    <app-car
      :carName="carName"
      :carYear="carYear"
      :counter="counter"
      :changeFunc="changeCarName"
      @nameChanged = "carName = $event"
      @counterUpdated = "counter = counter + $event"     
    ></app-car>  
  </div>
</template>

@counterUpdated = "counter = counter + $event" гэж тавин өгөөд програмыг ажлуулан шалгавал

бүгд хэвийн ажиллана. App компонентийн хувьд Car, Counter компонентууд хоёулаа хүүхэд компонентууд ч Car компонентоос Counter компонентод хандан өөрчлөлт хийж байгаа. Энэ нь Доод шатны /хүүхэд/ компонентоос параметр дамжуулах механизмтай бараг төстэй ажиллахын дээр кодод үйл явцын сонсогч, нэг ижил параметрүүдийг дамжуулах, эцэг компонентоор дамжин харьцах гээд нилээд их логикийг оруулан өгч байгааг та ажигласан байх. Цөөн компонентууд оролцсон жижигхэн програмын хувьд аргачлал бүрэн боломжийн боловч компонентуудын тоо олшрон компонентууд нэгийгээ агуулах түвшин гүн болож ирэхэд эцэг компонентоор дамжуулан удирдахад хүнд болж ирнэ.

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

Илэрхийлэл ба үйлдлүүд

JavaScript-д дараалсан үйлдлүүдийг гүйцэтгэн үр дүнг гаргах ажиллагааг илэрхийлэлээр удирдана. Илэрхийлэл бүр нь цэг таслалаар (;) төгсөнө. Хамгийн энгийн илэрхийллийн жишээ бол хувьсагчид утга олгох z = x + y; байж болно. Энэ жишээ нь x дээр y -г нэмсэн утгыг хувьсагч z –д олгоно. = оператор нь өөрийн баруун талд орших хэсгүүдэд хийгдсэн үйлдлүүдийн үр дүнг өөрийн зүүн талд байгаа хувьсагчид олгодог. Илэрхийлэлд байгаа хоосон зай, тав , мөр таслах тэмдэгтүүд хөрвүүлэх үед автоматаар хасагдана. Хааяа програмын кодыг уншихад эвтэйхэн болгох үүднээс логик холбоо бүхий илэрхийллүүдийг блок гэж нэрлэдэг багцанд оруулж өгдөг. Блок нь нээсэн их хаалтын ({) тэмдэг ба хаасан их хаалтын (}) тэмдэгүүдийн дунд байрлана. Блок доторх илэрхийлэл бүр нь (;) тэмдгээр төгсөх боловч хаасан их хаалтын (}) ард уг тэмдэгийг тавигддаггүй. Жишээ нь

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

Хичээлээр EcmaScript6 -гийн генератор гэж юу болох тэдгээртэй хэрхэн ажиллахыг авч үзье. Төсөлд генераторууд ажиллах боломжийг хангахын тулд package.json файлд зарим өөрчлөлтийг орулах хэрэгтэй. Генераторууд ES6 -д байдаггүй тусдаа пакет тул терминалыг нээгээд npm install --save-dev babel-plugin-transform-runtime командыг өгөн суулгана. Пакетыг суулгасны дараа package.json файлын devDependencies талбарт "babel-plugin-transform-runtime": "^6.23.0" бичлэг нэмэгдэнэ. Дээр нь төслийн үндсэн хавтаст .babelrc нэртэй файлыг нэмэн

{
  "plugins": [
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }]
  ]
}

кодыг оруулан өгөөд терминалаас webpack -ийг ажлуулан төслийн компайлыг хийнэ.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

тэгшитгэлийн нэг язгуур нь эерэг, нөгөө язгуур нь сөрөг байх параметрийн бүх утгыг ол.
Тэнцэтгэл бишийн нэг шийд нь M -ээс бага нөгөө шийд нь M -ээс их байх гарцаагүй ба хүрэлцээтэй нөхцөлийг ашиглавал болох бөгөөд энэ тэнцэтгэл бишийг бодвол үед манай тэнцэтгэл бишийн шийдийн нэг нь эерэг нөгөө нь сөрөг байна.

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

 

функц [1;9] завсарын аль хэсэгт буурах вэ?

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

 

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

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