Үйл явдлыг боловсруулах дараалал

Үйл явдлыг боловсруулах бол Javascript программын үндсэн үүрэг гэж үзэхэд бараг болно. Иймд хичээлийг сайн үзээд ойлгон авах хэрэгтэй. Нэг үйл явдал тухайн үйл явц болсон элементэд нөлөө үзүүлэхээс гадна түүний дээрх элементүүдэд бас үйлчилдэг. Энэ нь элементэд олон дараалсан HTML тег агуулагдаж байх тохиолдолд тег бүрд боловсруулагч тавихгүйгээр дээд түвшин буюу эцэг элементэд ганц боловсруулагч заагаад бүх үйл явцыг барихад их эвтэйхэн байдаг. Гурван элемент нэг нэгдээ орон байрласан тохиолдлыг авч үзье.

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

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

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

Холбоотой материалууд
useRef

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

Хичээлээр useState -тэй тун төстэй useRef хукийн талаар авч үзье. useRef хукийн онцлог ашиглалтыг компонент хэдэн удаа дахин зурагдсанг /render/ тодорхойлох асуудлаар авч үзье. Асуудлыг дараах

import React, {useState, useEffect} from 'react'

function App() {
  const [renderCount, setRenderCount] = useState(1)
  
  useEffect(() => {
    setRenderCount(prev => prev + 1)
  })
  
  return (
      <div className="container">
        <h1>Render -ийн тоо {renderCount}</h1>
      </div>
  );
}

export default App;

кодоор шийдчих мэт.

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

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

Интернетэд сууриласан буюу хөтөч дээр ажилладаг програмуудын хэрэглэгчийн дэлгэцийг бүрэн удирдах боломжийг олгодог нь 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>

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

Асуултын мэдээлэл

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

Өмнөх Хулганы товч даралтын боловсруулалт хичээлд асуулт, түүний хариултуудын хувилбарууд, зөв хариултын дугаар зэргийг quiz массивт тодорхойлон өгснөөр манай төслийн сорилго явуулах хуудас

r_06_05_02

байдлаар харагдах болсон.

Обьектууд

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

ES6 -д обьектод ямар өөрчлөлтүүд орсонг хичээлд үзэх болно. Кодод

const name = 'e-surgalt.com';
const age = 30;

хувьсагчид байгаад эдгээрийг хувьсагчийн нэртэй ижилхэн обьектын талбарт олгоё гэвэл ES5 -д

const obj = {
    name: name,
    age: age
};

гэж бичдэг. Одоо обьектыг консолд

console.log(obj);

гэж харуулъя.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

Кубын ирмэг a. Дээд талын төвийг суурийн оройтой холбоход үүсэх пирамидийн бүтэн гадаргуун талбайг ол.

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

 
Бодлого 4.041

A=(-2; 3; 5), B=(4; -1; 7) векторууд өгөгджээ. 3A-2B векторын координатуудын нийлбэрийг ол.

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

 
Бодлого 8.141

Утасны лавлах номыг дэлгэн 7 цифрээс бүрдсэн дугаарыг санамсаргүйгээр байдлаар сонгоход дугаарын сүүлийн дөрвөн цифрүүд ижил байх хувилбарын тоог ол.

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

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