Original Repository: ryanmcdermott/clean-code-javascript

1. Kirish
2. O'zgaruvchilar
3. Funksiyalar
4. Obyektlar va ma'lumotlar strukturasi
5. Klasslar
6. SOLID
7. Testlash
8. Paralellik
9. Error'lar bilan ishlash
10. Formatlash
11. Kommentlar
12. Tarjima

Robert C. Martinning "Clean Code" kitobidan dasturiy ta'minot muhandisligi tamoyillari, JavaScript uchun moslashtirildi. Bu uslublar bo'yicha qo'llanma emas. Bu JavaScript-da o'qilishga, o'zgartirishga oson va qayta ishlatiladigan dasturiy ta'minot yaratish bo'yicha qo'llanma.

Bu yerdagi barcha prinsplarga qat'iy rioya qilish shart emas. Bular shunchaki ko'rsatmalar boshqa hech narsa emas, lekin ular Clean code mualliflari tomonidan ko'p yillik jamoaviy tajriba orqali yig'ilgan.

Bizning dasturiy ta'minot muhandisligi (software engineering) bo'yicha tajribamiz 50 yildan biroz oshgan va biz hali ham ko'p narsalarni o'rganmoqdamiz. Dasturiy ta'minot arxitekturasi arxitekturaning o'zi kabi qari bo'lsa, bizda amal qilish qiyinroq qoidalar bo'lishi mumkin. Hozircha ushbu ko'rsatmalar siz va sizning jamoangiz yozadigan kodining sifatini baholash uchun asosiy mezon bo'lib xizmat qilsin.

Yana bir narsa: bularni bilishingiz sizni darhol yaxshi dasturchiga aylantirib qo'ymaydi va bu qoidalar bilan ko'p yil ishlash orqali xatolardan to'liq qutula olmaysiz. Har bir kod bo'lagi birinchi qoralama sifatida boshlanadi, huddi yumshoq loy o'zining yakuniy qattiq shakliga aylanganidek. Va nihoyat, biz boshqalar bilan birgalikda ishlab kamchiliklarni yo'q qilamiz. Hom qoralamalarni yaxshilayman deb o'zingizni mag'lub etmang! Buni o'rniga kodni o'zini mag'lub eting!

Yomon:

const yyyymmdstr = moment().format("YYYY/MM/DD");

Yaxshi:

const currentDate = moment().format("YYYY/MM/DD");

⬆ tepaga qaytish

Yomon:

getUserInfo();
getClientData();
getCustomerRecord();

Yaxshi:

getUser();

⬆ tepaga qaytish

Biz yozganimizdan ko'ra ko'proq kodni o'qiymiz. Muhimi, o‘qilishi va izlanishi oson kod yozishimiz. Tushunarsiz o'zgaruvchilar yaratishimiz orqali biz kodimizni o'qiydiganlarni qinaymiz. O'zgaruvchilaringiz qidirishga oson bo'lsin. Buddy.js va ESLint kabi vositalar nomsiz konstantalarni aniqlashga yordam beradi.

Yomon:

// What the heck is 86400000 for?
setTimeout(blastOff, 86400000);

Yaxshi:

// Declare them as capitalized named constants.
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000;
setTimeout(blastOff, MILLISECONDS_PER_DAY);

⬆ tepaga qaytish

Yomon:

const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(
  address.match(cityZipCodeRegex)[1],
  address.match(cityZipCodeRegex)[2]
);

Yaxshi:

const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [_, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);

⬆ tepaga qaytish

Yomon:

const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(l => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  // Wait, what is `l` for again?
  dispatch(l);
});

Yaxshi:

const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(location => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  dispatch(location);
});

⬆ tepaga qaytish

Agar klass/obyekt nomi biror narsa anglatsa, buni o'zgaruvchigiz nominda ham takrorlamang.

Yomon:

const Car = {
  carMake: "Honda",
  carModel: "Accord",
  carColor: "Blue"
};

function paintCar(car, color) {
  car.carColor = color;
}

Yaxshi:

const Car = {
  make: "Honda",
  model: "Accord",
  color: "Blue"
};

function paintCar(car, color) {
  car.color = color;
}

⬆ tepaga qaytish