|
III. Mobil ilovani ishlash prinsipi va algoritmlari
3.1 Redux ishlashi haqida
Redux - bu dastur holatini boshqarish uchun ochiq manbali JavaScript kutubxonasi. U ko'pincha React yoki Angular kabi kutubxonalarda foydalanuvchi interfeyslarini yaratish uchun ishlatiladi. Facebook-ning Flux arxitekturasiga o'xshash (va ilhomlantirgan) Dan Abramov va Endryu Klark tomonidan yaratilgan.Redux - bu dastur holati uchun taxminiy konteyner sifatida yaratilgan oddiy, cheklangan API-ga ega kichik kutubxona. U funktsional dasturlash tushunchasi, kamaytiruvchi funktsiyaga o'xshash tarzda ishlaydi .Redux 2015 yilda Abramov birinchi Redux dasturini yozishni React Europe konferentsiyasida qizg'in qayta yuklashga tayyorgarlik ko'rishda boshladi. Abramov shunday dedi: "Men Flux tushunchasini isbotlashga harakat qildim, bu erda mantiqni o'zgartira olaman va bu menga vaqtga sayohat qilishimga imkon beradi va bu kodni o'zgartirish bo'yicha kelgusi harakatlarni qayta ko'rib chiqishga imkon beradi".
Abramovni Flux naqshining kamaytiruvchi funktsiyasi bilan o'xshashligi hayratga soldi. "Men Fluxni vaqt o'tishi bilan qisqartirish operatsiyasi deb o'ylar edim, sizning do'konlaringiz, ular ushbu harakatlarga javoban o'zlarining holatini to'playdilar. Men buni yanada davom ettirishni o'ylardim. Agar sizning Flux do'koningiz do'kon emas, balki reduktor funktsiyasi bo'lsa-chi?"
Abramov Endryu Klarkga (Flux dasturining muallifi Flummox) hamkori sifatida murojaat qildi. Boshqa narsalar qatori, u Klarkga Redux ekotizimini iloji boricha imkon yaratib, izchil API ishlab chiqishda yordam beradi, masalan, dasturiy ta'minot va do'kon kuchaytirgichlari kabi kengaytma nuqtalarini amalga oshiradi .
2019 yil fevral oyida useReducer 16.8 versiyasida React ilgagi sifatida taqdim etildi . Redux-ga mos keladigan API-ni taqdim etadi, bu esa ishlab chiquvchilarga Redux-ga o'xshash do'konlarni yaratish uchun imkon beradi, ular tarkibiy qismlarga mahalliy.
Pufakchali saralash
Bubble sort, ba'zida cho'kib ketuvchi tur deb ham ataladi, bu tartiblash uchun bir necha marta ro'yxat bo'ylab qadam qo'yadigan, har bir qo'shni buyumni taqqoslaydigan va noto'g'ri tartibda almashtiradigan oddiy tartiblash algoritmi. Ro'yxat orqali o'tish svoplar kerak bo'lmaguncha takrorlanadi, bu ro'yxat saralanganligini ko'rsatadi.
function bubbleSort(array) {
let swapped;
do {
swapped = false;
for (let i = 1; i < array.length; i++) {
if (array[i - 1] > array[i]) {
swap(array[i - 1], array[i]);
swapped = true;
}
}
} while (swapped);
}
Qo'shish saralashda takrorlanadi, har bir takrorlashda bitta kirish elementi sarflanadi va saralangan chiqish ro'yxati o'sadi. Har bir takrorlash, qo'shish saralashi kiritilgan ma'lumotlardan bitta elementni olib tashlaydi, saralangan ro'yxat ichida joylashgan joyini topadi va shu erga qo'shadi. Kirish elementlari qolmaguncha takrorlanadi.
function bubbleSort(array) {
let swapped;
do {
swapped = false;
for (let i = 1; i < array.length; i++) {
if (array[i - 1] > array[i]) {
swap(array[i - 1], array[i]);
swapped = true;
}
}
} while (swapped);
}
Ilovada "Bekor qilish" va "Qayta tiklash" funksiyalarini yaratish, odatda ishlab chiquvchidan ongli harakatlarni talab qiladi. Klassik MVC ramkalari bilan ishlash oson emas, chunki barcha tegishli modellarni klonlash orqali har bir o'tgan holatni kuzatib borishingiz kerak. Bunga qo'shimcha ravishda, siz bekor qilish to'plamini eslab qolishingiz kerak, chunki foydalanuvchi tomonidan kiritilgan o'zgarishlarni qaytarib bo'lmaydigan bo'lishi kerak.Bu shuni anglatadiki, MVC dasturida Bekor qilish va Qayta bajarishni amalga oshirish odatda buyruq kabi ma'lum bir ma'lumot mutatsion naqshidan foydalanish uchun sizning ilova qismlaringizni qayta yozishga majbur qiladi .Ammo Redux bilan tarixni bekor qilish imkonsiz. Buning uchta sababi bor:
Bir nechta modellar yo'q.Holat allaqachon o'zgarmasdir va mutatsiyalar allaqachon diskret harakatlar deb ta'riflangan, bu esa bekor qilish stack mental modeliga yaqin.
Reduktor (state, action) => stat eimzosi umumiy "reduktor kuchaytirgichlari" yoki "yuqori darajadagi reduktorlar" ni amalga oshirishni tabiiy holga keltiradi. Ular sizning reduktoringizni qabul qiladigan va uning imzosini saqlab, qo'shimcha funktsiyalar bilan yaxshilaydigan funktsiyalardir. Tarixni bekor qilish aynan shunday holat.
Ushbu retseptning birinchi qismida biz Undo va Redo-ni umumiy tarzda amalga oshirishga imkon beradigan asosiy tushunchalarni tushuntiramiz.
Ushbu retseptning ikkinchi qismida biz ushbu funksiyani ta'minlaydigan Redux Undo paketidan qanday foydalanishni ko'rsatamiz .
const initialState = {
past: [],
present: null, // (?) How do we initialize the present?
future: []
}
function undoable(state = initialState, action) {
const { past, present, future } = state
switch (action.type) {
case 'UNDO':
const previous = past[past.length - 1]
const newPast = past.slice(0, past.length - 1)
return {
past: newPast,
present: previous,
future: [present, ...future]
}
case 'REDO':
const next = future[0]
const newFuture = future.slice(1)
return {
past: [...past, present],
present: next,
future: newFuture
}
default:
// (?) How do we handle other actions?
return state
}
}
{
visibilityFilter: 'SHOW_ALL',
todos: {
past: [
[],
[{ text: 'Use Redux' }],
[{ text: 'Use Redux', complete: true }]
],
present: [
{ text: 'Use Redux', complete: true },
{ text: 'Implement Undo' }
],
future: [
[
{ text: 'Use Redux', complete: true },
{ text: 'Implement Undo', complete: true }
]
]
}
}
Do'stlaringiz bilan baham: |
