Google-ning JavaScript Style qo'llanmasidagi diqqatga sazovor fikrlar

U bilan tanish bo'lmagan har bir kishi uchun, Google toza va tushunarli kodni yozish uchun eng yaxshi stilistik usullarni (eng yaxshi deb hisoblaydigan) JavaScript-ni yozish uchun uslubiy qo'llanmani taqdim etadi.

Bu haqiqiy JavaScript-ni yozish uchun qiyin va tezkor qoidalar emas, faqat sizning dastlabki fayllaringizda doimiy va jozibali uslublar tanlovini saqlab qolish uchun izohlar. Bu, ayniqsa, turli xil stilistik tanlovlarni amalga oshirishga imkon beradigan moslashuvchan va kechirimli til bo'lgan JavaScript uchun juda qiziq.

Google va Airbnb-da ikkita eng mashhur uslub qo'llanmasi mavjud. Agar sizga JS yozish uchun ko'p vaqt sarflasangiz, har ikkalasini ham tekshirib ko'rishingizni aniq tavsiya qilaman.

Quyida Google-ning JS Style qo'llanmasidagi eng qiziqarli va tegishli qoidalar o'n uchtasi keltirilgan.

Ular hamma narsani qizg'in bahs-munozarali masalalardan tortib (bo'shliqlar orasidagi yorliqlar va nuqta vergullarni qanday ishlatish kerakligi) meni hayratga solgan yana bir nechta noaniq xususiyatlarga qadar muhokama qiladilar. Ular, shubhasiz, mening JS yozishni davom ettiradilar.

Har bir qoida uchun men spetsifikatsiyaning qisqacha tavsifini beraman, so'ngra qoidalarni batafsil tavsiflaydigan uslublar qo'llanmasida keltirilgan iqtibos keltiraman. Agar qo'llanilsa, men amalda uslubning namunasini keltiraman va uni qoidaga rioya qilmaydigan kod bilan taqqoslayman.

Yorliqlarni emas, bo'sh joylardan foydalaning

Chiziq terminatori ketma-ketligidan tashqari, ASCII gorizontal bo'sh joy belgisi (0x20) - manba faylida biron bir joyda paydo bo'ladigan bo'sh joy belgisi. Bu shuni anglatadiki, ... tab belgilaridan pastroq chiziq uchun foydalanilmaydi.

Keyinchalik qo'llanmada siz ikkita bo'sh joydan (to'rtdan emas) foydalanishingiz kerakligi ko'rsatilgan.

// yomon
funktsiya foo () {
Name ism qo'ymoq;
}

// yomon
funktsiya paneli () {
Name ism qo'ymoq;
}

// yaxshi
funktsiya baz () {
Name ism qo'ymoq;
}

Nuqtali vergul talab etiladi

Har bir gap nuqta-vergul bilan tugatilishi kerak. Avtomatik nuqta-vergul qo'shishga ishonish taqiqlanadi.

Nega bu fikrga qarshi bo'lganini tasavvur qilolmasam ham, JS-da nuqta-vergullarni izchil ishlatish yangi "bo'shliqlar va yorliqlar" debatlariga aylanib bormoqda. Google bu erda nuqta-vergulni himoya qilish uchun aniq chiqmoqda.

// yomon
luke = {}
leia = {} ga ruxsat ber
[luke, leia] .forEach (jedi => jedi.father = 'vader')
// yaxshi
luke = {} ga ruxsat bering;
let leia = {};
[luke, leia] .forEach ((jedi) => {
  jedi.father = 'vader';
});

ES6 modullaridan foydalanmang (hali)

Hozircha ES6 modullaridan foydalanmang (ya'ni eksport va import kalit so'zlari), chunki ularning semantikasi hali tugallanmagan. Shuni esda tutingki, semantika to'liq standart bo'lgandan keyin ushbu siyosat qayta ko'rib chiqiladi.
// Hali ham bunday qilma:
// ------ lib.js ------
eksport funktsiyasi kvadrat (x) {
    qaytish x * x;
}
eksport funktsiyasi diag (x, y) {
    return sqrt (kvadrat (x) + kvadrat (y));
}

// ------ main.js ------
'lib' dan {kvadrat, diag} import qilish;

Gorizontal tekislash taqiqlangan (lekin taqiqlanmagan)

Ushbu amaliyotga ruxsat berilgan, ammo bu odatda Google Style tomonidan rad etiladi. U ilgari ishlatilgan joylarda gorizontal tekislashni ta'minlash talab qilinmaydi.

Gorizontal hizalama - bu oldingi satrlarda ma'lum bir tokenlar to'g'ridan-to'g'ri ba'zi boshqa tokenlarning ostida to'g'ridan-to'g'ri paydo bo'lishi uchun kodingizda o'zgaruvchan miqdordagi qo'shimcha joylarni qo'shish amaliyotidir.

// yomon
{
  kichkina: 42,
  uzoq: 435,
};
// yaxshi
{
  kichkina: 42,
  uzoq: 435,
};

Boshqa var ishlatmang

Barcha mahalliy o'zgaruvchilarni const yoki let ruxsat berilgan holda e'lon qiling. Agar o'zgaruvchini qayta tayinlashni talab qilmasa, sukut bo'yicha const-dan foydalaning. Var kalit so'zidan foydalanilmasligi kerak.

Men hali ham StackOverflow va boshqa joylarda kod namunalarida var ishlatayotgan odamlarni ko'rmoqdaman. U erda kimdir bu ishni qo'zg'atadigan odamlar borligini yoki bu eski odatlardan biri o'lish qiyinligini bilmayman.

// yomon
var misol = 42;
// yaxshi
misol = 42;

Ok funktsiyalari afzal ko'riladi

Ok funktsiyalari qisqa sintaksisni ta'minlaydi va bu bilan bir qator qiyinchiliklarni bartaraf etadi. O'q funktsiyalarini, ayniqsa joylashtirilgan funktsiyalar uchun, kalit so'zdan ustun qo'ying

Rostini aytsam, men shunchaki o'q vazifalari juda zo'r va chiroyli ko'rinishga ega deb o'yladim. Bundan tashqari, ular juda muhim maqsadga xizmat qiladi.

// yomon
[1, 2, 3] .map (funktsiya (x) {
  const y = x + 1;
  qaytish x * y;
});

// yaxshi
[1, 2, 3] .map ((x) => {
  const y = x + 1;
  qaytish x * y;
});

Bog'lash o'rniga shablon iplarini ishlating

Murakkab satrlarni ulashda shablon satrlarini ishlating (`bilan ajratilgan), xususan, agar ko'p sonli lug'at qatnashsa. Andoza satrlari bir nechta satrlardan iborat bo'lishi mumkin.
// yomon
funktsiya sayHi (ism) {
  return 'Qanday qilib,' + ism + '?';
}

// yomon
funktsiya sayHi (ism) {
  return ['Qanday qilib', ismingiz, '?']. qo'shilish ();
}

// yomon
funktsiya sayHi (ism) {
  return "Qanday qilib, $ {name}?";
}

// yaxshi
funktsiya sayHi (ism) {
  return "Qanday qilib, $ {name}?";
}

Uzun simlar uchun chiziq uzatmalaridan foydalanmang

Oddiy yoki shablonli mag'lubiyat qatorida chiziq davom ettirishidan foydalanmang (ya'ni satr ichidagi satr oxirigacha orqaga buriladi). ES5 bunga imkon bersa ham, agar biron bir bo'sh joy bo'sh joy chiziqdan keyin paydo bo'lsa va o'quvchilar uchun unchalik ravshan bo'lmasa, bu murakkab xatolarga olib kelishi mumkin.

Qizig'i shundaki, bu qoida Google va Airbnb o'rtasida kelishmovchiliklarga olib keladi (bu erda Airbnb-ning o'ziga xos xususiyatlari).

Google uzoq satrlarni ulashni tavsiya qilsa-da (quyida ko'rsatilgan) Airbnb uslubi qo'llanmasi aslida hech narsa qilmaslikni va kerak bo'lganda uzun iplarni davom ettirishni tavsiya qiladi.

// yomon (uzr, bu mobil telefonda yaxshi ko'rinmaydi)
const longString = 'Bu juda uzun satr \
    80 ustun chegarasidan oshib ketdi. Afsuski, \
    bo'shliqlarni o'z ichiga oladi.
    davom ettirilgan qatorlar ajratilgan. ';
// yaxshi
const longString = 'Bu juda uzun satr "+"
    '80 ta ustun chegarasidan oshib ketdi. Unda '+' mavjud emas
    "cho'zilganidan beri uzun bo'shliqlar" +
    'satrlar yanada toza.';

"For ..." - bu "pastadir" ning afzal ko'rgan turi

ES6 bilan endi tilda uchta turli xil tsikl mavjud. Hammasi ishlatilishi mumkin, ammo iloji boricha iloji boricha ko'chadan afzal ko'rish kerak.

Agar mendan so'rasangiz, bu juda g'alati, lekin men uni o'z ichiga olaman deb o'ylagandim, chunki Google pastadirning afzal turini e'lon qilishi juda qiziq.

Men har doim ... uchun pastadirlar ob'ektlar uchun yaxshiroq, va ... uchun massivlar yaxshiroq mos keladi, degan taassurot ostida edim. 'To'g'ri ish' turi uchun vaziyat.

Bu erda Google-ning tavsiflari bu fikrga zid kelmasligi kerak, ammo ular halqa uchun afzal ko'rganlari hali ham qiziq.

Baholardan foydalanmang ()

Qiymat yoki Function (... satrlari) konstruktorlaridan foydalanmang (kod yuklovchilar bundan mustasno). Ushbu xususiyatlar xavfli bo'lishi mumkin va CSP muhitida ishlamaydi.

Qiymat () uchun MDN sahifasida hatto "Baholamang!" Deb nomlangan bo'lim mavjud.

// yomon
ruxsat bering obj = {a: 20, b: 30};
let propName = getPropName (); // "a" yoki "b" ni qaytaradi
baholash ('var natija = obj.' + propName);
// yaxshi
ruxsat bering obj = {a: 20, b: 30};
let propName = getPropName (); // "a" yoki "b" ni qaytaradi
let result = obj [propName]; // obj ["a"] obj.a bilan bir xil

Konstantalar ALL_UPPERCASE ichida pastki chiziqlar bilan ajratilgan holda nomlanishi kerak

Doimiy nomlar CONSTANT_CASE - barcha katta harflardan foydalanadi, pastki qismlarga ajratilgan so'zlar bilan.

Agar o'zgaruvchi o'zgarmasligiga amin bo'lsangiz, buni doimiyning nomini bosh harf bilan belgilashingiz mumkin. Bu sizning doimiy ravishda o'zgarmasligini ravshan qiladi, chunki u sizning kodingiz bo'ylab qo'llaniladi.

Ushbu qoida uchun sezilarli istisno, agar doimiy funktsiyaga mos keladigan bo'lsa. Bunday holda uni camelCase-da yozish kerak.

// yomon
const soni = 5;
// yaxshi
const NUMBER = 5;

Deklaratsiyada bitta o'zgaruvchi

Har bir o'zgaruvchi deklaratsiya faqat bitta o'zgaruvchini e'lon qiladi: a = 1, b = 2 bo'lsin; ishlatilmaydi.
// yomon
a = 1, b = 2, c = 3 bo'lsin;
// yaxshi
ruxsat bering a = 1;
ruxsat b = 2;
ruxsat bering c = 3;

Qo'shtirnoq emas, bitta tirnoqdan foydalaning

Oddiy torli harflar ikki tirnoq (") bilan emas, balki bitta tirnoq (') bilan ajratiladi.
Maslahat: agar satr bitta kotirovka belgilaridan iborat bo'lsa, taklifdan qochib ketmaslik uchun shablon satridan foydalaning.
// yomon
let directive = "O'zini yoki vazifasini aniqlash mumkin emas."
// yomon
let deying = 'Shunga o'xshab ayting.';
// yaxshi
let directive = 'O'zini yoki vazifasini aniqlash mumkin emas.';
// yaxshi
aytaylik = 'Bunday emas deb ayting';

Yakuniy eslatma

Boshida aytganimdek, bu mandatlar emas. Google ko'plab texnologiya gigantlaridan biri va bu faqat tavsiyalar.

Aytgancha, Google kabi bir kompaniya tomonidan ishlab chiqilgan uslublarga oid tavsiyalarni ko'rib chiqish juda qiziq, bu juda ko'p vaqtni ajoyib kod yozishga sarflaydigan ko'plab ajoyib odamlarni jalb qiladi.

Agar siz "Google-ga mos keladigan kod kodi" ga oid ko'rsatmalarga rioya qilishni istasangiz, ushbu qoidalarga amal qilishingiz mumkin - lekin, albatta, ko'p odamlar rozi emas va siz ulardan birini yoki barchasini bekor qilishingiz mumkin.

Men shaxsan Airbnb-ning xususiyatlari Google-dan ko'ra ko'proq jalb qilinadigan holatlar ko'p. Ushbu aniq qoidalarga rioya qilishingizdan qat'iy nazar, har qanday kodni yozishda stilistik izchillikni yodda tutish muhimdir.