Mundarija (36)
- Bu darsda
- 1. Nega bu kerak?
- 2. Nom niyatni aytadi
- 2.1 Bir xil kod, ikki xil nom
- 2.2 Nom uzunligi — ko'rinish doirasiga qarab
- 2.3 Qisqartma yo'q
- 3. Nom turlari va yozilish qoidalari
- 3.1 Funksiya — fe'l bilan
- 3.2 Mantiqiy qiymat — savol bilan
- 3.3 Yozilish shakllari
- 3.4 Bitta tushuncha — bitta nom
- 4. Domen tili va inglizcha nomlar
- 4.1 Domen tili
- 4.2 Ish joyida — inglizcha
- 4.3 Bitta loyiha — bitta til
- 5. Nomlash qarzi: vazifalar dagi haqiqiy misol
- 5.1 almashtir — uch ma'noda
- 5.2 royxat — ikki ma'noda
- 5.3 Nega hozir tuzatmaymiz
- 6. Qayta nomlashni xavfsiz qilish
- 6.1 "Topish va almashtirish" tuzog'i
- 6.2 Muharrir vositasi
- 7. Ko'p uchraydigan xatolar
- 7.1 Tur nomga qo'shiladi
- 7.2 Juda umumiy nom
- 7.3 Yolg'on nom
- 7.4 Raqamli nomlar
- 7.5 Aralash til
- 8. Mashqlar
- 1-mashq (oson): Nomlarni tuzating
- 2-mashq (o'rta): Inglizcha nomlar
- 3-mashq (qiyin): Bitta tushuncha — bitta nom
- 4-mashq: Vazifalar qadami — noaniq lokal nomlar
- 9. Real ishda
- Xulosa
- Manbalar
Toza kod: nomlash — o'zgaruvchi, funksiya va mantiqiy qiymatga aniq nom berish
Qisqacha: Yaxshi nom kodni izohsiz tushunarli qiladi. Nom niyatni aytadi: nima saqlanadi yoki nima qilinadi. Funksiya — fe'l bilan (
saqla,filtrniOl), mantiqiy qiymat — savol shaklida (mosmi,matnBormi,isPaid), o'zgarmas sozlama —UPPER_SNAKE(KUTISH_MS), klass —PascalCase, qolgani —camelCase. Bitta tushuncha — bitta nom. Qayta nomlash xulqni o'zgartirmaydi, shuning uchun u — eng xavfsiz refaktoring.
Bu darsda
- Nom nega izohdan ham muhimroq ekanini va "niyatni aytuvchi nom" nimaligini tushuntira olasiz.
- Funksiya, mantiqiy qiymat, o'zgarmas va klassga qoida bo'yicha nom bera olasiz.
camelCase,PascalCase,UPPER_SNAKEvakebab-caseqayerda ishlatilishini bilasiz.- Ish joyidagi inglizcha nomlash odatlarini (
is,has,get) bilasiz. vazifalardagi noaniq nomlarni xulqni buzmasdan aniqlashtirasiz va haqiqiy "nomlash qarzi"ni ko'rasiz.
Oldin bilishingiz kerak: Funksiya e'lon qilish va chaqirish, Boolean va truthy/falsy qiymatlar, Loyiha: saqlanadigan va sinxronlanadigan vazifalar ilovasi, Unicode regex: u va v flag.
1. Nega bu kerak?
Sardor — «Bahor»ning stajyor dasturchisi. Unga vazifalar ilovasidagi fokus xatosini topish topshirildi. U render.js ni ochib, mana bu qatorlarga duch keldi:
// render.js, fokusla() ichida (v3)
const top = (i) =>
royxat.querySelector(`[data-id="${i}"] [data-amal="${amal}"]`);
const nishon = top(id) ?? top(zaxiraId) ?? sarlavha;Sardor o'ylaydi: "i — indeks bo'lsa kerak, massivning nechanchi elementi". Aslida i ga vazifaning idsi keladi. Keyin u top ni ko'rib, royxat.top(id) metodini eslaydi — o'sha metod chaqirilyaptimi? Yo'q, bu boshqa, lokal funksiya. Ikki noaniq nom — o'n daqiqa yo'qotilgan vaqt.
Kod bir marta yoziladi, lekin o'nlab marta o'qiladi: o'zingiz, hamkasbingiz, yarim yildan keyingi "siz". Har o'qishda nom birinchi bo'lib ko'zga tashlanadi. Yaxshi nom — eng arzon hujjat: u kod bilan birga yuradi.
Shu dars bilan qismning kod sifati bo'limi boshlanadi. Keyingi yettita darsda vazifalar ilovasini qadam-baqadam tozalaymiz: nomlar, funksiyalar, testlar, kod hidlari, texnik qarz, avtomatik vositalar. Bu ishning umumiy nomi — refaktoring: kodning ichini yaxshilash, xulqini o'zgartirmasdan. Ilova oldin nima qilgan bo'lsa, keyin ham aynan shuni qiladi.
2. Nom niyatni aytadi
2.1 Bir xil kod, ikki xil nom
«Bahor» ish vaqtini hisoblaydigan ikki variantni solishtiring:
const a = 7;
const b = 23;
const c = b - a;
console.log(c); // 16Kod ishlaydi, lekin c nima? Javob olish uchun butun kodni o'qib chiqish kerak. Endi xuddi shu kod, faqat nomlar boshqa:
const OCHILISH_SOATI = 7;
const YOPILISH_SOATI = 23;
const ishSoatlari = YOPILISH_SOATI - OCHILISH_SOATI;
console.log(ishSoatlari); // 16Kompyuter uchun bu ikki dastur bir xil. Odam uchun esa ikkinchisi o'zini o'zi tushuntiradi. Niyatni aytuvchi nom (intention-revealing name) — o'qigan odam "bu nima va nega kerak?" deb so'ramaydigan nom.
Yaxshi nomni topish uchun o'zingizga savol bering: "Buni telefonda do'stimga bitta so'z bilan qanday tushuntirardim?" c emas, "ish soatlari". malumot emas, "bronlar ro'yxati".
2.2 Nom uzunligi — ko'rinish doirasiga qarab
"Unda hamma nom uzun bo'lsinmi?" — yo'q. Nom uzunligi u qancha joyda yashashiga bog'liq. Bir qatorli arrow funksiyada qisqa nom yetarli, chunki kontekst ko'z oldida:
const vazifalar = [
{ id: 1, matn: "Non olish", bajarildi: true },
{ id: 2, matn: "Choy damlash", bajarildi: false },
];
const qolganlar = vazifalar.filter((v) => !v.bajarildi);
console.log(qolganlar.length); // 1Bu yerda v ni hech kim adashtirmaydi: to'plam nomi vazifalar, demak, v — bitta vazifa. Lekin funksiya bir necha qatorga cho'zilsa yoki o'zgaruvchi butun modulda ko'rinsa, nom to'liq bo'lishi kerak. Qoida: nom qancha uzoq yashasa, shuncha to'liq bo'lsin.
2.3 Qisqartma yo'q
fn, btn, usr, tmp, cnt — yozuvchi uchun tez, o'quvchi uchun topishmoq. Bugun siz cnt "count" ekanini bilasiz. Uch oydan keyin "content"mi, "counter"mi — o'ylab qolasiz.
Umumiy qabul qilingan bir nechta qisqartma bundan mustasno: id, url, API, JSON — ular kundalik so'zga aylangan. Klassik for (let i = 0; …) siklidagi i ham tanilgan, lekin for...of va massiv metodlarida element nomi bilan yozamiz.
Tekshirib ko'ring:
function hisobla(m) { return m.narx * m.soni; }— ikkita nom muammosini toping.
Javob
Birinchisi — hisobla: nima hisoblanadi? jamiNarxniHisobla yoki qatorSummasi aniqroq. Ikkinchisi — m: funksiya bir qatorli bo'lsa ham, m hech qanday to'plamdan kelmayapti, shuning uchun kontekst yo'q. buyurtmaQatori deb yozsak, narx va soni nima ekani o'z-o'zidan ayon bo'ladi.
3. Nom turlari va yozilish qoidalari
3.1 Funksiya — fe'l bilan
Funksiya — ish. Shuning uchun uning nomi buyruq maylidagi fe'l: saqla, qatorYasa, filtrniOl, elonQil. Chaqiruvni o'qiganda gap hosil bo'ladi: saqla(royxat) — "ro'yxatni saqla".
Qiymat qaytaradigan funksiya natija nomi bilan ham atalishi mumkin: eksportMatni(vazifalar) — "vazifalarning eksport matni". Asosiysi — ekranga yozadigan yoki biror narsani o'zgartiradigan funksiya ot bilan atalmasin. buyurtma() deb nomlangan funksiya buyurtma qaytaradimi, chop etadimi, yuboradimi — bilib bo'lmaydi.
3.2 Mantiqiy qiymat — savol bilan
Mantiqiy qiymat (boolean) — "ha yoki yo'q" javobi. Nomini savolga aylantiring: o'zbekchada -mi, bormi yoki o'tgan zamon fe'li.
| Nom | Savol | Qayerda |
|---|---|---|
mosmi |
vazifa filtrga mosmi? | royxat.js |
matnBormi |
bu matn ro'yxatda bormi? | royxat.js |
bajarildi |
vazifa bajarildimi? | vazifa.js |
ozgardi |
matn o'zgardimi? | royxat.js |
if (bajarildi) — gapdek o'qiladi: "agar bajarildi bo'lsa". if (holat) esa hech narsa aytmaydi.
Inkor nomdan qoching. yopilmaganmi o'rniga ochiqmi. Sababi — inkor ustiga inkor: if (!yopilmaganmi) ni o'qish uchun miyada ikki marta "yo'q" ni aylantirish kerak.
O'zingiz to'ldiring. «Bahor» soat 7:00 dan 23:00 gacha ishlaydi. Oshxona hozir ochiqligini bildiruvchi mantiqiy o'zgaruvchiga nom bering (bitta so'z, yuqoridagi qoida bo'yicha):
const = soat >= 7 && soat < 23;
3.3 Yozilish shakllari
Bir nechta so'zdan iborat nomni yozishning to'rt shakli bor. Har biri o'z joyida:
| Shakl | Ko'rinishi | Nima uchun |
|---|---|---|
camelCase |
ishSoatlari, filtrniOl |
o'zgaruvchi, funksiya, metod |
PascalCase |
VazifalarRoyxati, ApiXatosi |
klass |
UPPER_SNAKE |
KUTISH_MS, SAQLASH_KALITI |
o'zgarmas sozlama |
kebab-case |
vazifa-xatosi.js, taom-karta |
fayl nomi, CSS klassi |
UPPER_SNAKE — har const uchun emas. const qolganlar = … — oddiy camelCase, chunki u hisoblangan qiymat. UPPER_SNAKE faqat modul darajasidagi, qo'lda yozilgan, hech qachon o'zgarmaydigan sozlama uchun: kutish vaqti, kalit nomi, chegaralar. Uni ko'rgan o'quvchi darhol tushunadi: "bu raqamni ataylab shu yerga qo'yishgan".
kebab-case fayl nomlarida qulay, chunki ba'zi tizimlar katta-kichik harfni farqlaydi, ba'zilari yo'q (Fayl va papka nomlash qoidalari).
Quyidagi diagramma nom tanlash tartibini ko'rsatadi. Yuqoridan boshlab, savolga javob bering:
flowchart TD
A[Nima nomlanyapti?] --> B{Klassmi?}
B -->|ha| B1[PascalCase: VazifalarRoyxati]
B -->|yo'q| C{O'zgarmas sozlamami?}
C -->|ha| C1[UPPER_SNAKE: KUTISH_MS]
C -->|yo'q| D{Funksiyami?}
D -->|ha| D1[fe'l: saqla, filtrniOl]
D -->|yo'q| E{Ha/yo'q qiymatmi?}
E -->|ha| E1[savol: mosmi, isPaid]
E -->|yo'q| F[ot: ishSoatlari]3.4 Bitta tushuncha — bitta nom
Bir loyihada "olish" uchun ol, top, yukla, qaytar aralash ishlatilsa, o'quvchi har safar o'ylaydi: "bular farq qiladimi?". Bitta ma'noga bitta so'z tanlang va butun loyihada shu so'zni ishlating.
Teskarisi ham muhim: bitta nom — bitta tushuncha. vazifalar da kalit so'zi ikki narsani bildirardi: localStorage dagi yozuv nomi ("vazifalar:v3") va serverdagi ro'yxat kaliti (crypto.randomUUID()). saqlash.js dagi KALIT_NOMI qaysi biri? Shu darsning oxirida u SERVER_KALITI_NOMI bo'ladi.
Tekshirib ko'ring:
const maxUzunlik = 100;modul boshida yozilgan va hech qachon o'zgarmaydi. Uni qanday nomlash kerak?const qolganlar = vazifalar.filter(...)ni-chi?
Javob
Birinchisi — qo'lda qo'yilgan sozlama, shuning uchun MAKS_UZUNLIK (UPPER_SNAKE). vazifalar da u Vazifa.MAKS_UZUNLIK — klassning statik xususiyati. Ikkinchisi — const bo'lsa ham hisoblangan qiymat, har chaqiruvda boshqacha bo'lishi mumkin, shuning uchun camelCase qoladi.
4. Domen tili va inglizcha nomlar
4.1 Domen tili
Domen — dastur xizmat qiladigan soha. «Bahor» uchun bu — oshxona: buyurtma, bron, menyu, mehmon. Jasur aka "bron" desa, kodda ham bron bo'lsin, rezervatsiya yoki joyBand emas. Shunda dasturchi va egasi bitta tilda gaplashadi. Bu g'oyani katta loyihalarda "umumiy til" (ubiquitous language) deb atashadi.
vazifalar ning domen tili — vazifa, ro'yxat, filtr, teg, eksport. Kodda aynan shu so'zlar: Vazifa, VazifalarRoyxati, filtrniOl, teglariniOl, eksportMatni.
4.2 Ish joyida — inglizcha
Kursning boshidan beri nomlarni o'zbekcha yozib keldik (let va const bilan o'zgaruvchilar darsida sababini aytgan edik): siz o'ylab topgan nom JavaScript so'zlaridan aniq ajralib tursin. Bu o'rganish uchun juda qulay.
Real loyihalarda esa nomlar deyarli doim inglizcha: kutubxonalar, hujjatlar, xato xabarlari, hamkasblar — hammasi ingliz tilida. Toshkentdagi kompaniyada ham kodni ertaga boshqa mamlakatdagi dasturchi o'qishi mumkin. Izohlar esa jamoaning tilida yoziladi.
Inglizcha nomlashning o'z odatlari bor — ularni bir marta yodlab oling:
| Odat | Misol | O'zbekcha o'xshashi |
|---|---|---|
is, has, can — mantiqiy |
isPaid, hasItems, canEdit |
tolanganmi, bormi |
get, find — qaytaradi |
getFilter, findTask |
filtrniOl, vazifaniTop |
create, build — yasaydi |
createRow |
qatorYasa |
handle, on — hodisaga javob |
handleSubmit, onClick |
yangiVazifaniQosh |
vazifalar ning ba'zi nomlari inglizchada qanday bo'lardi: VazifalarRoyxati → TaskList, matnBormi → hasText, bajarildi → done, saqla → save, KUTISH_MS → TIMEOUT_MS.
4.3 Bitta loyiha — bitta til
Eng yomon variant — aralash: getVazifa, isBajarildi, royxatList. O'quvchi har nomda ikki tilni almashtirib o'qiydi. Qoida: loyiha qaysi tilda boshlangan bo'lsa, shu tilda davom etadi. Brauzer va JavaScript nomlari (fetch, event, addEventListener) esa o'zgarmaydi — ular sizniki emas.
vazifalar o'zbekcha boshlangan va o'zbekcha qoladi: 09–11-qism darslari, testlar va README shu nomlarga tayanadi. Butun loyihani inglizchaga o'girish — ulkan qayta nomlash bo'lardi va hech qanday yangi imkoniyat bermasdi. Inglizcha nomlashni esa shu darsning mashqida amalda sinab ko'rasiz. Kursda ham shu darsdan boshlab yangi, mustaqil misollarda nomlar inglizcha bo'ladi (totalPrice, isOpen), izohlar — o'zbekcha; vazifalar qadamlari esa o'z nomlari bilan davom etadi.
Tekshirib ko'ring: Jamoangiz inglizcha nom yozadi. Funksiya buyurtma to'langanini tekshiradi va
true/falseqaytaradi.checkPayment,isPaid,paymentStatus— qaysi biri yaxshi?
Javob
isPaid. U savol kabi o'qiladi: if (isPaid(order)) — "agar buyurtma to'langan bo'lsa". checkPayment — fe'l, lekin nima qaytarishini aytmaydi: tekshirib xato tashlaydimi, matn qaytaradimi? paymentStatus — ot, u "paid" yoki "pending" kabi matnga o'xshaydi, mantiqiy qiymatga emas.
5. Nomlash qarzi: vazifalar dagi haqiqiy misol
5.1 almashtir — uch ma'noda
Endi o'z loyihamizga tanqidiy ko'z bilan qaraymiz. almashtir so'zi vazifalar da uch xil ishni bildiradi:
// vazifa.js — bajarildi belgisini teskarisiga o'giradi
almashtir() {
this.bajarildi = !this.bajarildi;
}
// royxat.js — shu ishni id bo'yicha qiladi
almashtir(id) {
this.top(id).almashtir();
this.#xabarBer();
}
// api.js — serverdagi BUTUN ro'yxatni yangisiga almashtiradi (PUT)
almashtir: (vazifalar, sozlama) =>
sorovYubor(manzil + sinovParametri, {
...sozlama, metod: "PUT", tana: { vazifalar },
}),Birinchi ikkitasi — "belgini o'girish", uchinchisi — "hammasini qayta yozish". asosiy.js da ular yonma-yon uchraydi: vazifaniAlmashtir(id) va api.almashtir(joriy, sozlama). Birinchi marta ko'rgan odam ular bir xil ish qiladi deb o'ylaydi.
Yana bir chalkashlik: holat.js dagi matnniAlmashtir(id, matn) matnni o'zgartiradi va ichida royxat.matnniOzgartir(id, matn) ni chaqiradi. Bitta ish — ikki xil fe'l.
5.2 royxat — ikki ma'noda
render.js da royxat — sahifadagi <ul> elementi:
export const royxat = document.getElementById("royxat");saqlash.js da esa royxat — VazifalarRoyxati klassining nusxasi: saqla(royxat). Testlarda ham const royxat = VazifalarRoyxati.dan(…). Bitta so'z — biri HTML element, ikkinchisi ma'lumot obyekti.
5.3 Nega hozir tuzatmaymiz
Bu nomlar eksport qilinadi — boshqa modullar ularni import qiladi. Ular 10–11-qism darslarida, testlarda va README da ishlatilgan. Ularni o'zgartirish — ko'p faylga tegadigan katta ish. Shuning uchun biz uni hozir qilmaymiz, balki qarz sifatida yozib qo'yamiz. Takliflar tayyor: belgini o'girish — belgisiniOgir, matnniAlmashtir → matnniOzgartir, api.almashtir → hammasiniYoz, DOM elementi — royxatEl.
Bu "keyin to'laymiz" degan ish texnik qarz deyiladi. Uni ro'yxatga olish va boshqarishni Legacy kod va texnik qarz bilan ishlash darsida o'rganamiz — o'sha yerda TEXNIK-QARZ.md faylida aynan shu nomlar 9-qator bo'lib yoziladi.
Lokal nomlar esa boshqa gap. Ular faqat bitta fayl ichida yashaydi, ularni o'zgartirish xavfsiz. Bugungi qadamda aynan shularni tozalaymiz.
Tekshirib ko'ring: Nega eksport qilinadigan nomni o'zgartirish lokal nomni o'zgartirishdan xavfliroq?
Javob
Lokal nom faqat o'z faylida ishlatiladi — hamma joyini bir ko'rishda topasiz. Eksport qilingan nomni boshqa modullar import qiladi: bittasini unutsangiz, SyntaxError: The requested module './holat.js' does not provide an export named … xatosi chiqadi va ilova ochilmaydi. Bundan tashqari eksport nomi darslar va hujjatlarda ham yashaydi.
6. Qayta nomlashni xavfsiz qilish
6.1 "Topish va almashtirish" tuzog'i
render.js dagi fondaChiz funksiyasida faol nomli o'zgaruvchi bor — u fokusdagi elementni saqlaydi (document.activeElement). Uni fokusdagi ga o'zgartirmoqchimiz. Butun loyihada "faol" ni "fokusdagi" ga almashtirsak nima bo'ladi?
"faol" — filtr nomi: u marshrut.js, royxat.js (filtr === "faol") va render.js dagi bosh xabarlar jadvalida uchraydi. royxat.js ning yopilganTeglar metodida esa faol — bajarilmagan vazifalar ro'yxati. Ko'r-ko'rona almashtirish filtrni buzadi: ?filtr=faol endi ishlamaydi.
6.2 Muharrir vositasi
VS Code nomni matn sifatida emas, kod belgisi (symbol) sifatida o'zgartira oladi. Kursorni nom ustiga qo'yib, F2 (Rename Symbol) ni bosing va yangi nomni yozing. Muharrir faqat shu o'zgaruvchiga tegishli joylarni o'zgartiradi. Eksport qilingan nom bo'lsa — uni import qilgan boshqa fayllarni ham.
Bu ham kafolat emas: satr ichidagi nomni (getElementById("royxat") dagi "royxat") muharrir bilmaydi. Shuning uchun har qayta nomlashdan keyin ilovani tekshiramiz — qanday qilib, buni Vazifalar qadamida ko'rasiz.
7. Ko'p uchraydigan xatolar
7.1 Tur nomga qo'shiladi
strIsm, arrVazifalar, objHolat — bu eski odat, "venger yozuvi" (Hungarian notation): nom boshiga tur qisqartmasi qo'shiladi. Tur o'zgarsa (massiv Set ga aylansa), nom yolg'onga aylanadi. Turni muharrir va keyinroq JSDoc aytadi, nom esa ma'noni aytsin.
7.2 Juda umumiy nom
malumot, natija, obj, ishla(), boshqar() — har narsaga mos keladi, demak, hech narsani aytmaydi. "Qanday ma'lumot?" deb so'rang va javobni nomga yozing: bronlar, jamiSumma.
7.3 Yolg'on nom
vazifalarRoyxati aslida Map bo'lsa yoki tekshir() tekshirish bilan birga saqlasa ham — nom yolg'on gapiryapti. Bu eng xavfli xato: o'quvchi nomga ishonadi va noto'g'ri xulosa qiladi.
7.4 Raqamli nomlar
vazifa1, vazifa2, royxatYangi2 — farqni nom aytmaydi. Aslida nima: "eng eski"mi, "tanlangan"mi? Shuni yozing: engEskiVazifa.
7.5 Aralash til
getVazifa, bajarildiFlag, royxatList. Yuqorida aytdik: bitta loyiha — bitta til.
8. Mashqlar
1-mashq (oson): Nomlarni tuzating
Quyidagi kod «Bahor» buyurtmasining jami summasini hisoblaydi. Kod to'g'ri ishlaydi, lekin nomlari yomon. Hisob uchun reduce ishlatilgan. Har nomni darsdagi qoida bo'yicha o'zgartiring — natija 85000 bo'lib qolsin.
const d = [
{ n: "Osh", p: 35000, k: 2 },
{ n: "Ko'k choy", p: 5000, k: 3 },
];
function f(x) {
return x.reduce((s, i) => s + i.p * i.k, 0);
}
console.log(f(d)); // 85000Yechim
const buyurtma = [
{ taom: "Osh", narx: 35000, soni: 2 },
{ taom: "Ko'k choy", narx: 5000, soni: 3 },
];
function jamiSummaniHisobla(qatorlar) {
return qatorlar.reduce(
(jami, qator) => jami + qator.narx * qator.soni,
0,
);
}
console.log(jamiSummaniHisobla(buyurtma)); // 85000d → buyurtma (nima saqlanadi), maydonlar — taom, narx, soni. Funksiya fe'l bilan: jamiSummaniHisobla. reduce ning callback'i ko'p ish qiladi, shuning uchun s va i emas, jami va qator — i ayniqsa chalkashtirardi, chunki u indeksga o'xshaydi.
2-mashq (o'rta): Inglizcha nomlar
Siz inglizcha nom yozadigan jamoaga qo'shildingiz. Quyidagi o'zbekcha nomlarni inglizcha odatlar bo'yicha o'giring: mosmi, matnBormi, filtrniOl, qatorYasa, SAQLASH_KALITI, VazifaXatosi, yangiVazifaniQosh (forma yuborilganda chaqiriladi).
Yechim
| O'zbekcha | Inglizcha | Qoida |
|---|---|---|
mosmi |
matches yoki isMatch |
mantiqiy — savol |
matnBormi |
hasText |
has — "bormi" |
filtrniOl |
getFilter |
get — qaytaradi |
qatorYasa |
createRow |
create — yasaydi |
| O'zbekcha | Inglizcha | Qoida |
|---|---|---|
SAQLASH_KALITI |
STORAGE_KEY |
o'zgarmas — UPPER_SNAKE |
VazifaXatosi |
TaskError |
klass — PascalCase |
yangiVazifaniQosh |
addTask yoki handleSubmit |
fe'l; hodisaga javob — handle |
handleSubmit — "submit hodisasini ishlaydi" degani. addTask esa nima qilishini aytadi. Ko'p jamoalar ikkalasini ham ishlatadi: tinglovchi handleSubmit, uning ichida addTask(text).
3-mashq (qiyin): Bitta tushuncha — bitta nom
Kodda uchta muammo bor: bitta ma'no uchun ikki xil fe'l, inkor mantiqiy nom va sehrli raqam — kodda izohsiz turgan, ma'nosini faqat muallif biladigan raqam (keyingi darsda batafsil). Raqamga nom bering — "O'zgarmas sozlama" qoidasi bo'yicha. Natija o'zgarmasin.
const bronlar = [
{ mehmon: "Dilshod aka", soat: 9 },
{ mehmon: "Malika", soat: 12 },
];
function bronniOl(soat) {
return bronlar.find((b) => b.soat === soat);
}
function bronniTop(mehmon) {
return bronlar.find((b) => b.mehmon === mehmon);
}
function bandEmasmi(soat) {
return bronniOl(soat) === undefined;
}
const soat = 9;
if (!bandEmasmi(soat) || soat < 10) {
console.log("Bu vaqtga bron qilib bo'lmaydi");
}
console.log(bronniTop("Malika").soat); // 12Konsolda:
Bu vaqtga bron qilib bo'lmaydi
12Yechim
const BRON_BOSHLANISHI = 10; // bron 10:00 dan qabul qilinadi
const bronlar = [
{ mehmon: "Dilshod aka", soat: 9 },
{ mehmon: "Malika", soat: 12 },
];
function soatBoyichaTop(soat) {
return bronlar.find((b) => b.soat === soat);
}
function mehmonBoyichaTop(mehmon) {
return bronlar.find((b) => b.mehmon === mehmon);
}
function bandmi(soat) {
return soatBoyichaTop(soat) !== undefined;
}
const soat = 9;
if (bandmi(soat) || soat < BRON_BOSHLANISHI) {
console.log("Bu vaqtga bron qilib bo'lmaydi");
}
console.log(mehmonBoyichaTop("Malika").soat); // 12Konsolda:
Bu vaqtga bron qilib bo'lmaydi
12Ikki funksiya — bronniOl va bronniTop — bir xil ish qiladi. Endi fe'l bitta (top), farqni esa nomning boshi aytadi: soatBoyicha, mehmonBoyicha. Shart ichidagi !bandEmasmi — inkor ustiga inkor; bandmi to'g'ridan-to'g'ri o'qiladi. Raqam 10 — «Bahor»da bron qabul qilish boshlanadigan soat; nom bilan u izohsiz tushunarli. Arrow ichidagi b qoldi: qator bitta, to'plam nomi — bronlar.
4-mashq: Vazifalar qadami — noaniq lokal nomlar
vazifalar ning faqat lokal (eksport qilinmaydigan) nomlarini aniqlashtiramiz. Kanon nomlariga tegmaymiz. Branch: refactor/nomlash.
Nima o'zgaradi. Har qatorda — qaysi qoida buzilgani:
| Fayl | Oldin → keyin | Qoida |
|---|---|---|
paket.js |
eksportMaydonlari → EKSPORT_MAYDONLARI |
o'zgarmas sozlama, yonidagi VAZIFA_MAYDONLARI kabi |
saqlash.js |
KALIT_NOMI → SERVER_KALITI_NOMI |
"kalit" ikki ma'noda edi |
sinxron.js |
tingla(fn) → tingla(ishlovchi) |
qisqartma yo'q |
royxat.js |
(m) =>, (eng, m) =>, (t) => → malumot, mavjud |
ko'p qatorli reduce/filter |
api.js |
vaqt → vaqtSignali |
bu vaqt emas, AbortSignal |
| Fayl | Oldin → keyin | Qoida |
|---|---|---|
api.js |
oxiri → sinovParametri |
"oxiri" — nimaning oxiri? |
render.js fondaChiz |
faol → fokusdagi |
"faol" — filtr nomi, bu esa document.activeElement |
render.js fokusla |
top = (i) => → tugmaniTop = (qatorId) => |
i indeksga o'xshaydi, top — royxat.top() bilan chalkashadi |
asosiy.js |
sahifa → sahifaManzili |
bu new URL(location.href) |
Darsning boshidagi Sardor qoqilgan joy endi shunday:
// Oldin (render.js, fokusla)
const top = (i) =>
royxat.querySelector(`[data-id="${i}"] [data-amal="${amal}"]`);
const nishon = top(id) ?? top(zaxiraId) ?? sarlavha;// Keyin
const tugmaniTop = (qatorId) =>
royxat.querySelector(
`[data-id="${qatorId}"] [data-amal="${amal}"]`,
);
const nishon = tugmaniTop(id) ?? tugmaniTop(zaxiraId) ?? sarlavha;fondaChiz dagi o'zgarish:
// Oldin
const faol = document.activeElement;
if (!royxat.contains(faol)) {// Keyin
const fokusdagi = document.activeElement;
if (!royxat.contains(fokusdagi)) {Nomlar uzaygani uchun ba'zi qatorlar 72 belgidan oshib ketdi — ular ikki qatorga bo'lindi. Masalan api.js da:
const vaqtSignali = AbortSignal.timeout(kutish);
const sorov = {
method: metod,
headers: { Accept: "application/json" },
signal: signal
? AbortSignal.any([signal, vaqtSignali])
: vaqtSignali,
};Ataylab o'zgartirilmagan. mosmi, matnBormi(matn, ozId), xatoniTop, sinxronPulti, kutilmoqda — yetarlicha aniq. Bir qatorli arrow'lardagi v (vazifalar.filter((v) => …)) — qoida bo'yicha joiz. almashtir va royxat — kanon nomlari, ular nomlash qarzi sifatida qoladi.
Tekshiruv. Bu refaktor: xulq o'zgarmasligi kerak. Buni qanday isbotlaymiz? tekshiruv/ papkasidagi skriptlar (10–11-qismda yozgan / skriptlarimiz) chiqishini o'zgarishdan oldin va keyin faylga yozamiz va solishtiramiz. Ikki fayl bayt-bayt bir xil bo'lishi kerak.
node tekshiruv/royxat.js > ../oldin.txt
node tekshiruv/paket.js >> ../oldin.txt
node tekshiruv/saqlash.js >> ../oldin.txt
node tekshiruv/marshrut.js >> ../oldin.txt> — chiqishni faylga yozadi, >> — fayl oxiriga qo'shadi. Fayl loyiha papkasidan tashqarida (../) — git uni ko'rmasin. Nomlarni o'zgartirgach, xuddi shu to'rt buyruqni ../keyin.txt bilan takrorlang va solishtiring. --no-index git'ga aytadi: "bu fayllar repoda emas, oddiy ikki faylni solishtir":
git diff --no-index ../oldin.txt ../keyin.txtChiqish bo'sh — ikki fayl bir xil. Bizda shunday bo'ldi: hamma qator , oldingi bilan farq yo'q. Mana royxat.js skriptining boshi:
✅ statistika: 2/1
✅ yangi id: 4
✅ takror matn: true
✅ faollar tepada: 3,4,1,2tekshiruv/api.js haqiqiy serverga boradi, uni ham ishga tushiring — u ham o'zgarmasligi kerak. Undagi vaqt qatori internet tezligiga bog'liq, shuning uchun uni solishtirishga qo'shmadik. Oxirida brauzerda tekshiruv/ssenariy.md dagi qadamlarni bajarib chiqing: qo'shish, belgilash, tahrir, o'chirish, filtr, ikki tab. Hammasi avvalgidek ishlashi kerak.
Yechim (buyruqlar)
git switch -c refactor/nomlash
# ... nomlarni o'zgartiring (F2) va tekshiruvni bajaring ...
git add assets/js
git commit -m "refactor: noaniq lokal nomlar aniqlashtirildi \
(xulq o'zgarmadi)"
git push -u origin refactor/nomlash
gh pr create --fill
gh pr merge --mergeNatija: 7 fayl, +39 −31 qator (git diff --shortstat). Commit turi — refactor:, branch — refactor/: xulq o'zgarmadi, faqat kodning ichi. Unicode regex darsidagi fix/ branch bilan farqi shunda — u yerda xatoni tuzatib, xulqni o'zgartirgan edik.
Natijaga qarang: 7 faylga tegdik, lekin birorta eksport nomi o'zgarmadi — boshqa modullar bu o'zgarishni sezmaydi.
9. Real ishda
- Kod ko'rib chiqish (code review). Pull request'dagi izohlarning katta qismi nomlar haqida bo'ladi: "bu nom nimani bildiradi?", "
datadan aniqroq yozing". Yaxshi nom — tezroq tasdiqlangan PR. - Jamoa qoidalari. Ko'p kompaniyalarda yozma uslub qo'llanmasi bor (masalan, Google JavaScript Style Guide): qachon
camelCase, qachonUPPER_SNAKE. Bir qismini ESLint avtomatik tekshiradi. - Intervyu. "Yaxshi nom qanday bo'ladi?", "Boolean'ni qanday nomlaysiz?", "Bu funksiyaga qanday nom berardingiz?" — junior intervyularida kod parchasini ko'rsatib so'rashadi.
Xulosa
- Nom niyatni aytadi: nima saqlanadi yoki nima qilinadi. Nom qancha uzoq yashasa, shuncha to'liq; qisqartma yo'q.
- Funksiya — fe'l (
saqla,filtrniOl), mantiqiy qiymat — savol (mosmi,isPaid), inkor nomdan qoching. camelCase— o'zgaruvchi va funksiya,PascalCase— klass,UPPER_SNAKE— qo'lda yozilgan o'zgarmas sozlama,kebab-case— fayl va CSS.- Bitta tushuncha — bitta nom, bitta nom — bitta tushuncha. Domen tilidagi so'zlarni ishlating.
- Ish joyida nomlar inglizcha; bitta loyiha — bitta til.
vazifalaro'zbekcha qoladi. - Lokal nomni o'zgartirish xavfsiz (F2, keyin tekshiruv), eksport nomi — qarz sifatida yoziladi (
almashtir,royxat).
Keyingi dars: Toza kod: funksiyalar, izohlar va tuzilma — uzun funksiyalarni bitta ishga bo'lamiz va "nima" izohlarini "nega" izohlariga almashtiramiz.
Manbalar
- Robert C. Martin, "Clean Code", 2008 — 2-bob "Meaningful Names"
- Martin Fowler, "Refactoring", 2-nashr, 2018 — "Mysterious Name" hidi, "Change Function Declaration", "Rename Variable"
- Google JavaScript Style Guide, "Naming" bo'limi — google.github.io/styleguide/jsguide.html
- VS Code hujjatlari: "Refactoring" — Rename Symbol (F2) — code.visualstudio.com/docs/editor/refactoring
Izohlar (0)
Izoh yozish uchun kiring.
- Hozircha izoh yo'q. Birinchi bo'ling!