‹boshlash›
Biz bu haftani amaliy dastur interfeyslarini (qisqacha API) tezda hushtak chalish bilan boshladik. Bular biz ishlab chiquvchilar (mijozlar) sifatida ushbu ma'lumotlarni saytimizda ko'rsatish uchun ma'lumotlar bazalaridan (serverlardan) kerakli ma'lumotlarni olish uchun foydalanadigan qulay usullardir.
Biz ushbu ma'lumotni "olish" uchun olib kelish so'rovlaridan foydalanamiz va API uni manbadan tortib oladi, xuddi (yaxshi o'rgatilgan it - mana sizga Lassi) pochta qutisidan o'z egasi (mijoz) uchun gazeta (ob'ekt) olib keladi. (server). API bilan ma'lumot so'raganingizda, siz barcha turdagi ma'lumotlar ob'ektlarini qaytarib olishingiz mumkin - shuning uchun biz API javobimizni tekshirishni (va Lassi boshqa Squirrelni ichkariga olib kirmaganligini tekshirishni) Postman deb nomlangan dastur yordamida bilib oldik. natijani ilovalarimizga integratsiya qilishdan oldin.
Haftaning ikkinchi yarmida biz React deb nomlangan ramkani o'rganishga o'tdik, bu hozirda eng ko'p ishlatiladigan va mashhur JS kutubxonasi. Facebook tomonidan ishlab chiqilgan Instagram, The New York Times, Air BnB, Netflix va Dropbox kabi saytlarda ko'rishingiz mumkin.
Ishlab chiquvchilar uchun jozibadorligi shundaki, ufoydalanuvchi interfeyslarini deklarativ tarzda tavsiflash va ularning holatini va DOM ni virtual oʻzgartirish imkonini beradibu esa kamroq kodni bildiradi, unga rioya qilish osonroq. Va tashvishlanishingizga hojat yo'q DOM (xayr queryselectorAll, au revoir getElementsByClassName, auf wiedersehen getElementById).
React modulli bo‘lib, saytlarimizni komponentlar to‘plamiga bo‘lish imkonini beradi, masalan, navbatma-navbat panellari/kontent tasmalari/ijtimoiy havolalar, biz ularni bir marta yaratishimiz va keyin qayta foydalanishimiz, ishlab chiqish vaqtimizni qisqartirishimiz uchun kodimizni Jest bilan sinab ko‘rishimiz mumkin. tezroq React bilan birga keladi. Nihoyat, React hozirda ommabop, haqiqatan ham ommabop, ya'ni Github-da qo'llab-quvvatlanadigan va stack to'lib-toshgan ulkan hamjamiyat mavjud, shuningdek, o'sha kun kelganda munosib ish bozori mavjud.
Komponentlar va rekvizitlardan qanday foydalanishni o'rganganimizdan so'ng, biz komponentlarimizni soddalashtirish uchun reaktsiya va tayanch tuzilmasini buzishda SASS uslubiga to'xtaldik (batafsilroq bu erda: https://medium.com/@lcriswell/destructuring-props-in- react-b1c295005ce0).
Men bu hafta tushdan keyin o'tgan haftada TLCga muhtoj bo'lgan loyihalarni qayta ko'rib chiqdim. Men JS Tetris o‘yinimni qayta ko‘rib chiqdim – uning orqasidagi kodni qayta ko‘rib chiqdim, shuning uchun u ortda qolish va ishdan chiqishni to‘xtatdi va yuklash uchun biroz uslubni qo‘shdi. Men hali ham tushirish funktsiyasini, qiyinchilik darajasiga ega darajalarni va ehtimol ba'zi ovoz effektlarini qo'shishim kerak.
Bundan tashqari, men morze alifbosi tarjimonini yaratishimiz kerak bo'lgan muammoni hal qildim, o'shanda men ingliz tilini morze alifbosiga tarjima qila oladigan, ammo boshqa qila olmaydigan oddiy ko'rinishdagi dastur yaratishga muvaffaq bo'ldim. Unga qaytganimdan so'ng, men morze kodini ingliz tiliga tarjima qilish funktsiyalarini yozdim va SASS-ga sovuq urush davridagi josuslarga xos uslublarni qo'shdim.
Ikkinchi tarjima funksiyasini qo‘shganda duch kelgan asosiy qiyinchiliklardan biri uni ekranda ko‘rsatish yo‘lini topish edi. Mening maqsadim foydalanuvchi formadagi tugmani bosish ediShifrlashbu shaklni ingliz-Morse-dan Morse-ingliz tiliga o'zgartiradi. Buni amalga oshirish juda qiyin bo'lib chiqdi; Ilgari JS funktsiyalari doirasida HTMLga DOM elementlarini kiritish va olib tashlashda muammolarga duch kelganman - shuning uchun men HTML-ga shunchaki yangi shakl qo'sha olmasligimni bilardim. Buning o'rniga men ikkala shaklni bir vaqtning o'zida ekranda ko'rsatishga va ulardan birini yashirish yo'lini topishga qaror qildim.
Shakllarimni yashirish va ko'rsatish uchun CSS sinflaridan foydalanishga harakat qildim. Men Shifrlash/Deshifrlash tugmasini bosish orqali foydalanuvchi tarjimonlarni qamrab olgan konteynerlarga sinflarni dinamik ravishda qo‘shishi/o‘chirishi mumkin deb o‘yladim. Fikrlash to'g'ri edi, lekin bajarilish noto'g'ri edi , men avval elementni yashiradigan display: nonedan foydalandim. Biroq, bu voqea tinglovchilarining sahifadagi elementni endi ko'rmasligiga olib keladi va bu butun konteyner tomonidan foydasiz bo'ladi. Men keyin koʻrinish: noneni sinab koʻrdim, lekin bu mening konteynerlarimni sahifada noqulay koʻrsatishiga olib keldi.
Oxir oqibat, foydalanuvchi Shifrlash/Shifrni yechish tugmachasini bosganda, korpusga pozitsiya: nisbiy va konteynerlarga pozitsiya: mutlaq dan foydalanish va belgilash orqali yechim topdim. >tugmasi. Bu tanlangan konteynerni ekranda ko'rinmaydigan joyga ko'chirdi va qolgan konteynerni avval aytib o'tilganidek o'tirishga imkon berdi. Yashirin konteyner boshqa elementlarning orqasida turishini ta'minlash uchun men z indeksini ham qo'lladim: -1.
Bu hafta ob'ektlarni kalitlari bo'yicha qidirish uchun foydali kod parchasini bilib oldim
const getKeyByValue = (ob'ekt, qiymat) =› {object.keys(obyekt)ni qaytaring.find((kalit) =›obyekt[kalit] === qiymat);};
Funktsiyani chaqirish uchun
getKeyByValue(maqsad, tanlangan qiymat)
