13 вартих уваги рекомендацій стилю JavaScript від Google

Для тих, хто ще не знайомий з цим, Google видає посібник зі стилю для написання JavaScript, який викладає (як вважає Google) найкращі стилістичні практики написання чистого, зрозумілого коду.

Це не жорсткі правила для написання дійсного JavaScript, лише заборони на підтримку послідовного та привабливого вибору стилю у всіх вихідних файлах. Це особливо цікаво для JavaScript, який є гнучкою та прощаючою мовою, що дозволяє широкий вибір стилістичних рішень.

У Google та Airbnb є два найпопулярніші посібники зі стилю. Я точно рекомендую вам перевірити їх обох, якщо ви витрачаєте багато часу на написання JS.

Нижче наведено тринадцять найцікавіших та найрелевантніших правил, поданих Google's JS Style Guide.

Вони мають справу з усім, від гостро оскаржуваних питань (вкладки проти пробілів та суперечливого питання про те, як слід використовувати крапку з комою), та ще кількох незрозумілих специфікацій, які мене здивували. Вони, безумовно, змінять спосіб написання свого JS в майбутньому.

Для кожного правила я дам короткий виклад специфікації, а потім - допоміжну цитату з керівництва стилем, де докладно описується правило. Там, де це застосовно, я також наведу приклад стилю на практиці та порівняю його з кодом, який не відповідає правилам.

Використовуйте пробіли, а не вкладки

Окрім послідовності закінчувачів рядків, символ горизонтального пробілу ASCII (0x20) - це єдиний пробіл, який відображається де-небудь у вихідному файлі. Це означає, що ... Символи табуляції не використовуються для відступу.

Пізніше в посібнику зазначено, що для відступу слід використовувати два пробіли (а не чотири).

// badfunction foo() {∙∙∙∙let name;}// badfunction bar() {∙let name;}// goodfunction baz() {∙∙let name;}

Крапка з комою ПОТРІБНА

Кожне твердження повинно закінчуватися крапкою з комою. Покладатися на автоматичну вставку крапки з комою заборонено.

Хоча я не можу уявити, чому хтось проти цієї ідеї, послідовне використання крапки з комою в JS стає новою дискусією "пробіли проти вкладок". Google твердо виходить на захист крапки з комою.

// badlet luke = {}let leia = {}[luke, leia].forEach(jedi => jedi.father = 'vader')
// goodlet luke = {};let leia = {};[luke, leia].forEach((jedi) => { jedi.father = 'vader';});

Не використовувати модулі ES6 (поки)

Поки не використовуйте модулі ES6 (тобто ключові слова exportта importключові слова), оскільки їх семантика ще не завершена. Зауважте, що ця політика буде переглянута, коли семантика стане повністю стандартною.
// Don't do this kind of thing yet:
//------ lib.js ------export function square(x) { return x * x;}export function diag(x, y) { return sqrt(square(x) + square(y));}//------ main.js ------import { square, diag } from 'lib';

Горизонтальне вирівнювання не рекомендується (але не забороняється)

Така практика дозволена, але, як правило , Google Style не рекомендує. Навіть не потрібно підтримувати горизонтальне вирівнювання в місцях, де воно вже використовувалося.

Горизонтальне вирівнювання - це практика додавання змінної кількості додаткових пробілів у ваш код, щоб певні маркери відображалися безпосередньо під деякими іншими маркерами у попередніх рядках.

// bad{ tiny: 42, longer: 435, };
// good{ tiny: 42, longer: 435,};

Більше не використовуйте var

Оголосіть усі локальні змінні за допомогою constабо let. Використовуйте const за замовчуванням, якщо тільки змінній не потрібно перепризначати. varКлючове слово не повинно використовуватися.

Я все ще бачу людей, які використовують varзразки коду на StackOverflow та інших місцях. Я не можу сказати, чи є там люди, які обґрунтують це, чи це просто випадок, коли важко вмирають старі звички.

// badvar example = 42;
// goodlet example = 42;

Переважними є функції стрілок

Функції стрілок забезпечують стислий синтаксис і усувають ряд труднощів this. Віддайте перевагу функціям стрілок над functionключовим словом, особливо для вкладених функцій

Буду чесним, я просто вважав, що функції стрілок є чудовими, оскільки вони були більш лаконічними та приємнішими для перегляду. Виявляється, вони також мають досить важливу мету.

// bad[1, 2, 3].map(function (x) { const y = x + 1; return x * y;});// good[1, 2, 3].map((x) => { const y = x + 1; return x * y;});

Використовуйте рядки шаблонів замість конкатенації

Використовуйте рядки шаблонів (розділені символами `) над об’єднанням складних рядків, особливо якщо задіяно кілька рядкових літералів. Рядки шаблону можуть охоплювати кілька рядків.
// badfunction sayHi(name) { return 'How are you, ' + name + '?';}// badfunction sayHi(name) { return ['How are you, ', name, '?'].join();}// badfunction sayHi(name) { return `How are you, ${ name }?`;}// goodfunction sayHi(name) { return `How are you, ${name}?`;}

Не використовуйте продовження рядків для довгих рядків

Не використовуйте продовження рядків (тобто закінчення рядка всередині рядкового літералу зворотною рискою рискою) у звичайних або шаблонних рядкових літералах. Незважаючи на те, що ES5 це дозволяє, це може призвести до хитрих помилок, якщо після косої риски виникає пробіл, що є менш очевидним для читачів.

Цікаво, що це правило, з яким Google і Airbnb не погоджуються (ось специфікація Airbnb).

Хоча Google рекомендує об’єднувати довші рядки (як показано нижче), керівництво по стилю Airbnb рекомендує, по суті, нічого не робити і дозволяти довгим рядкам тривати стільки, скільки їм потрібно.

// bad (sorry, this doesn't show up well on mobile)const longString = 'This is a very long string that \ far exceeds the 80 column limit. It unfortunately \ contains long stretches of spaces due to how the \ continued lines are indented.';
// goodconst longString = 'This is a very long string that ' + 'far exceeds the 80 column limit. It does not contain ' + 'long stretches of spaces since the concatenated ' + 'strings are cleaner.';

“For… of” - найкращий тип “for loop”

З ES6 мова тепер має три різні типи forциклів. Можуть використовуватися всі, хоча for- ofцикли слід віддавати перевагу, коли це можливо.

Це дивно, якщо ви запитаєте мене, але я подумав, що включу його, бо досить цікаво, що Google оголошує бажаний тип forциклу.

У мене завжди складалося враження, що for... inцикли for... ofкраще підходять для об’єктів, тоді як більше підходять для масивів. Правильний інструмент для правильної роботи.

Хоча специфікація Google тут не обов'язково суперечить цій ідеї, все ж цікаво знати, що вони надають перевагу саме цьому циклу.

Не використовуйте eval ()

Не використовуйте evalабо Function(...string)конструктор (за винятком завантажувачів коду). Ці функції є потенційно небезпечними і просто не працюють у середовищі CSP.

На сторінці MDN eval()навіть є розділ під назвою "Не використовуй eval!"

// badlet obj = { a: 20, b: 30 };let propName = getPropName(); // returns "a" or "b"eval( 'var result = obj.' + propName );
// goodlet obj = { a: 20, b: 30 };let propName = getPropName(); // returns "a" or "b"let result = obj[ propName ]; // obj[ "a" ] is the same as obj.a

Константи слід називати ALL_UPPERCASE, розділяючи їх підкресленням

Постійні імена використовують CONSTANT_CASE: усі великі літери, слова відокремлюються підкресленням.

Якщо ви абсолютно впевнені, що змінна не повинна змінюватися, ви можете вказати це, написавши великі літери в назві константи. Це робить незмінність константи очевидною, оскільки вона використовується у коді.

Помітним винятком із цього правила є, якщо константа має функціональний обсяг. У цьому випадку це слід писати на camelCase.

// badconst number = 5;
// goodconst NUMBER = 5;

Одна змінна на декларацію

Кожне оголошення локальної змінної декларує лише одну змінну: такі декларації, let a = 1, b = 2;які не використовуються.
// badlet a = 1, b = 2, c = 3;
// goodlet a = 1;let b = 2;let c = 3;

Використовуйте одинарні, а не подвійні лапки

Звичайні рядкові літерали розмежовуються одинарними лапками ( '), а не подвійними лапками ( "). Порада: якщо рядок містить одинарну лапку, розгляньте можливість використання рядка шаблону, щоб уникнути необхідності уникнути цитати.
// badlet directive = "No identification of self or mission."
// badlet saying = 'Say it ain\u0027t so.';
// goodlet directive = 'No identification of self or mission.';
// goodlet saying = `Say it ain't so`;

Заключна примітка

Як я вже говорив на початку, це не мандати. Google - лише один із багатьох технічних гігантів, і це лише рекомендації.

Тим не менш, цікаво поглянути на рекомендації щодо стилю, вироблені такою компанією, як Google, в якій працює багато блискучих людей, які проводять багато часу, пишучи чудовий код.

You can follow these rules if you want to follow the guidelines for ‘Google compliant source code’ — but, of course, plenty of people disagree, and you’re free to brush any or all of this off.

I personally think there are plenty of cases where Airbnb’s spec is more appealing than Google’s. No matter the stance you take on these particular rules, it is still important to keep stylistic consistency in mind when write any sort of code.