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

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

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

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

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

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

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

Хичээлээр react -ийн хукуудаас их өргөн ашиглагддаг useEffect -ийн талаар авч үзье. useEffect -ийн ажиллагааг судлах хуудасны кодийг

import React, {useState} from 'react'

function App() {
  const [type, setType] = useState('users')
  
  return (
      <div className="container">
        <h1>Өгөгдлүүд: {type}</h1>
        
        <button onClick= {() => setType('users')} className="btn btn-primary mx-3">Хэрэглэгчид</button>
        <button onClick= {() => setType('todos')} className="btn btn-primary mx-3">Хийх ажлууд</button>
        <button onClick= {() => setType('posts')} className="btn btn-primary mx-3">Нийтлэлүүд</button>
        
      </div>
  );
}

export default App;

гэж үүсгэе.

Нууц үгийн шалгалт

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

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

<template>
  <div class="container">
    <form action="" class="pt-4">
      <div class="form-group">
    ...
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <input 
          type="password" 
          id="password" 
          class="form-control"
          :class="{'is-invalid': $v.password.$error}"
          @blur="$v.password.$touch()"
          v-model="password"
        >

      </div>      
    </form>
  </div>
</template>
Модулууд

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

ES6 -д бий болсон модулийн системийн дүрмийн талаар үзэхийн өмнө зарим бэлтгэл ажлыг хийх хэрэгтэй. Төслийн үндсэн хавтаст extra.js файлыг үүсгээд дараах кодыг

let name = 'e-surgalt.com';
let age = 6;

оруулан өгье. extra.js файлд зарлагдсан хоёр хувьсагчийг index.js файлд оруулан ирэх хэрэг гарлаа гэе. Энд хоёр нөхцлийг хангана. Нэгд бусад модулууд extra.js файлд зарлагдсан хувьсагчдыг өөртөө ашиглах боломжийг нээх зорилгоор түүнийг гадагш экспортлох ёстой. Хоёрт бусад модулаас эскпорт хийгдсэн зүйлийг ашиглах модул нь импортлох хэрэгтэй.

Динамик өгөгдлийг харуулах

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

Өмнөх хичээлүүдэд үүсгэсэн App, Car компонентууд өөрийн статик агуулгуудыг л хуудаст харуулж байгаад бага зэргийн динамик ажиллагааг оруулах гээд үзье. Компонентийн агуулгын хэсэг jsx бичлэгийн дүрмээр бичигдсэн javascript код учраас бид түүнд динамик ажиллагааг оруулахад төвөггүй мэт. Иймээс Car компонентийн кодийг

import React from 'react'

const car = () => <div>
  <p>This is car component</p>
  <p><strong>1+1</strong></p>
</div>

export default car

гэж өөрчлөөд хуудсаа харвал

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

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

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

 
Бодлого 9.094

Талууд нь 5; 12; 13 нэгж урттай гурвалжны хэлбэрийг тогтоогоорой.

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

 
Бодлого 10.099

Призмд багтсан V эзэлхүүнтэй дөрвөн өнцөгт зөв пирамидийн оройнууд дээд суурийн төв болон доод суурийн талуудын дундаж цэгүүд харгалзах бол призмийн эзэлхүүнийг ол.

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

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