Модулийг ашиглан оптимизаци хийх

Манай хичээлийн жишээ бага болохоор Vuex store -ийн хэмжээ жижиг байгаа. Төслийг хөгжүүлэхийн хирээр компонентуудын тоо өсөхийн зэрэгцээ Vuex store -д тодорхойлогдох зүйлүүд нэмэгдэн ирэх нь ойлгомжтой. Эндээс state, mutation, getters, actions -д олон тооны зүйлүүдийг тодорхойлон өгснөөр файлын хэмжээ томрох, кодийг ойлгоход хүндрэлтэй болон ирнэ. Иймээс Vuex store -ийг төрөл бүрийн модулд хуваан жижиглэх арга байдгийг хичээлээр авч үзье.

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

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

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

Холбоотой материалууд
Параметр дамжуулах

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

Чиглүүлэгч буюу url хаягт ямар параметрүүдийг дамжуулж болохыг үзье. Давхар чиглүүлэгчид хичээлд машины тухай дэлгэрэнгүй мэдээллийг

гэж харуулсан. Өөрөөр хэлбэл ямарч машиныг мэдээллийг CarFull компонентод шууд заасан байгаа.

Анхдагч параметрүүд

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

ES6 -д шинээр бий болсон бас нэг зүйл болох функцийн анхдагч параметрүүдийн талаар хичээлд авч үзэцгээе. Эхлээд ES5 -д функцийн параметрт анхдагч утгыг олгохдоо ашигладаг байсан аргачлалыг харуулсан жишээг авч үзье.

const func = (a) => {
    return a;
};

console.log(func());

Функцийг тодорхойлохдоо ES6 -гийн бичлэгээр бичсэн. Терминалаас webpack -ийг дуудан багцыг үүсгээд index.html файлыг нээгээд консолыг харвал

useContext

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

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;

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

data арга

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

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

Үүргийн гинж…

Төлөв байдлын үүргийн гинж (Chain of responsibility) загварчлалын хэв шаардлагыг хэд хэдэн обьектууд боловсруулах боломжийг олгодог тул шаардлагын…

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

 
Алдааны боловсруулалтад…

Онцгой нөхцлийг дуудсан кодийг try блок эсхүл онцгой нөхцлийг боловсруулах catch блокгүй try..catch бүтцэд байршуулсан бол систем тохирох…

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

 
Дэвсгэр компонент

Програмийн цэсийн хэрэгжүүлэлтийн компонентийг хийсний дараа хуудсаа нээгээд fa-bars икон дээр дарахад

дээрх байдлаар харагдаж…

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

 
Үржэх дүрэм

Үржих үйлдэлд байр сэлгэх, бүлэглэх, гишүүнчлэн үржүүлэх гэсэн дүрмүүд үйлчилдэг. Эдгээрийг эхнээс нь сайн ойлгон цээжлэх хэрэгтэй.  

…

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

 
Төлөв (State)

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

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

 
Шулуунтай харьцангуй…

Тэгш хэм гэдэг нь тухайн обьект эсхүл түүний хэсэг тэгш хэмийн төв гэж нэрлэдэг тодорхой цэг, тэнхлэг, хавтгайтай…

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

 
Алдааны классийг…

Хэрвээ системийн өөрийн дотоод онцгой нөхцлийн төрлүүд тохиромжгүй бол бид өөрсдөө төрлүүд үүсгэж болно. Бүх онцгой нөхцлийн суурь…

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

 
Цэсийн хэрэгжүүлэлт

Цэсийг нээх хаах ажиллагааг хариуцах компонентийг боловсруулсан тул энэ хичээлээр програмийн удирдах цэсийг…

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

 
Нэг ба…

Математикийн үйлдлүүдэд нэг ба тэг тоонууд онцгой шинжүүдтэй. Үржих үйлдэлд нэг ба тэг

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

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

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

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

 
Бодлого 11.033

бол утгыг ол.

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

 
Бодлого 3.146

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

Түлхүүр: Язгуурыг шинэ үл мэдэгдэгчээр орлуулах.

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

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