Руководство по стилю кода Google JavaScript

внешний интерфейс JavaScript Google Airbnb
Руководство по стилю кода Google JavaScript

Googleа такжеAirbnbВ настоящее время это самый популярный стиль кода JavaScript.Если вы используете JavaScript для написания кода в течение длительного времени, рекомендуется сравнить его.

Вот тринадцать правил, которые я считаю наиболее интересными в руководстве по стилю кода Google, которыми я хочу поделиться с вами:

Используйте пробелы, а не вкладки

Помимо разделителей строк, в системных файлах пробел является единственным символом, представляющим пробел, что означает, что табуляция не может использоваться в качестве отступа.

В этом руководстве указано 2 пробела (вместо 4) для отступа.

// bad
function foo() {
∙∙∙∙let name;
}

// bad
function bar() {
∙let name;
}

// good
function baz() {
∙∙let name;
}

необходимая точка с запятой

Каждый оператор должен заканчиваться точкой с запятой, не полагайтесь на то, что компилятор автоматически вставит точку с запятой.

Хотя я не могу понять, почему кто-то возражает против добавления точек с запятой, например, аргумент «табуляция против пробела». Тем не менее, Google находится на положительной стороне.

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

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

Пока не используйте модульность ES6.

Пока не используйте модульность ES6 (например, ключевые слова import и export), потому что синтаксис для модульности ES6 еще не завершен.

// 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';

выравнивание кода вверх и вниз не рекомендуется

Старайтесь не выравнивать код вверх и вниз, стоимость обслуживания слишком высока.

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

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

не используйте вар

Используйте const или let для объявления локальных переменных и используйте const по умолчанию, если переменная не нуждается в переназначении.

// bad
var example = 42;

// good
let example = 42;

Стрелочные функции — идеальная замена функции

Стрелочные функции не только имеют лаконичный и читаемый синтаксис, но и решают эту проблему, особенно во вложенных функциях.

// 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;
});

Заменить конкатенацию строк шаблонными строками

Используйте шаблонные строки (разделенные `) для обработки сложных строк, особенно многострочных.

// bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// bad
function sayHi(name) {
  return `How are you, ${ name }?`;
}

// good
function sayHi(name) {
  return `How are you, ${name}?`;
}

Не оборачивайте длинные строки обратной косой чертой

Хотя ES5 позволяет это, он вводит странные ошибки и может ввести в заблуждение людей, читающих код.

Интересно, что у Google и Airbnb очень разные правила (Вот правила Airbnb)

// bad (在移动端会出问题)
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.';

// bad (Airbnb 推荐这种写法，不对长字符串做任何处理。)
const 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.';

// good
const 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

В ES6 поддерживаются различные циклы for, вы, возможно, использовали их все, но старайтесь использовать for…of как можно чаще.

не используйте eval()

Не используйте eval() (кроме загрузчиков кода), это создает потенциальную неопределенность, поскольку не будет работать в среде CSP.

существуетMDNЭто также явно упоминается в , не используйте eval().

// bad
let obj = { a: 20, b: 30 };
let propName = getPropName();  // returns "a" or "b"
eval( 'var result = obj.' + propName );

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

Константы подчеркнуты заглавными буквами

Константы представляются заглавными буквами и символами подчеркивания, а все слова пишутся с заглавной буквы и разделяются символами подчеркивания.

Если ваш код следует этому правилу, это может значительно повысить читабельность кода, но следует отметить, что если константа является функцией, ее нужно писать в верблюжьем регистре.

// bad
const number = 5;

// good
const NUMBER = 5;

Объявить переменную за раз

Каждый раз, когда вы объявляете переменную, не пишите let a = 1, b = 2;

// bad
let a = 1, b = 2, c = 3;

// good
let a = 1;
let b = 2;
let c = 3;

Используйте одинарные кавычки, а не двойные кавычки

Обычные строки разделяются одинарными кавычками ('), если строка содержит одинарные кавычки, рассмотрите возможность использования строки-шаблона.

// bad
let directive = "No identification of self or mission."

// bad
let saying = 'Say it ain\u0027t so.';

// good
let directive = 'No identification of self or mission.';

// good
let saying = `Say it ain't so`;

Спасибо за прочтение!

Эта статья переведена сDaniel Simmons - 13 важных моментов из руководства по стилю JavaScript от Google

Категории