13 важных моментов из руководства Google по стилю JavaScript

1656649688 13 vazhnyh momentov iz rukovodstva google po stilyu javascript

Дэниел Симмонс

EyAKPyvoPbvsvUBpzxNMSvEfNZfwxwZelPIk

Для тех, кто еще не знаком с этим, Google издает руководство по стилю для написания JavaScript, которое излагает (то, что Google считает) лучшие стилистические практики для написания чистого, понятного кода.

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

У Google и Airbnb есть два самых популярных руководства по стилю. Я точно рекомендую вам проверить оба, если вы тратите много времени на написание JS.

Ниже приведены тринадцать из, на мой взгляд, самых интересных и актуальных правил из Руководства Google по стилю JS.

Они имеют дело с чем угодно, начиная от горячо противоречивых вопросов (табуляции против пробелов и спорный вопрос о том, как следует использовать точку с запятой), до нескольких более непонятных спецификаций, которые меня удивили. Они точно изменят, как я буду писать свой 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, если не требуется переназначить переменную. The 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»

С ES6 этот язык теперь имеет три разных вида for петли. Однако все можно использовать forof когда это возможно, следует отдавать предпочтение петлям.

Это удивительно, если вы спросите меня, но я подумал включить его, потому что достаточно интересно, что Google объявляет желаемый тип for петля.

Я всегда был под таким впечатлением for... in циклы были лучшими для объектов, while 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: все буквы верхнего регистра, слова разделены подчеркиванием.

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

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

// 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, в которой работает много гениальных людей, тратящих много времени на написание отличного кода.

Вы можете придерживаться этих правил, если хотите следовать указаниям по «исходному коду, совместимому с Google», но, конечно, многие не соглашаются с этим, и вы можете отмахнуться от любого или всего этого.

Лично я считаю, что есть много случаев, когда характеристики Airbnb более привлекательны, чем Google. Независимо от того, какую позицию вы займете по этим конкретным правилам, все равно важно помнить о стилистической последовательности при написании любого кода.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *