Руководство по стилю кодирования JavaScript, какой стиль кодирования вы используете?

внешний интерфейс JavaScript

стиль кода

Наш код должен быть максимально понятным и читаемым.

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

грамматика

Ниже приведена шпаргалка с некоторыми предлагаемыми правилами (подробности см. ниже):

Теперь давайте подробно обсудим эти правила и их причины.

Примечание: никакие правила не являются обязательными.

Никакие правила не «высечены в камне». Это стилистические предпочтения, а не религиозные догмы.

фигурные скобки

В большинстве JavaScript-проектов фигурные скобки пишутся в «египетском» стиле, а открывающие фигурные скобки пишутся в «египетском» стиле, в той же строке, что и соответствующее ключевое слово, а не в новой строке. Перед открывающей скобкой также должен быть пробел, например:

if (condition) {
  // do this
  // ...and that
  // ...and that
}

Однострочные конструкции (например,if (condition) doSomething()) также является важным вариантом использования. Должны ли мы использовать фигурные скобки? Если да, то где?

Ниже приведены комментарии к этим случаям, об их читабельности вы можете судить сами:

  1. 😠 Так часто пишут новички. очень плохой! Здесь не нужны фигурные скобки:

    if (n < 0) {alert(`Power ${n} is not supported`);}

  2. 😠 Разделить на отдельные строки без фигурных скобок. Никогда не делайте этого, добавление новой строки чревато ошибками:

    if (n < 0)
  alert(`Power ${n} is not supported`);

  3. 😏 пишется в одну строку, без фигурных скобок — если короче, то нормально:

    if (n < 0) alert(`Power ${n} is not supported`);

  4. 😃 Лучший способ:

    if (n < 0) {
  alert(`Power ${n} is not supported`);
}

Для очень короткого кода допустима одна строка: например.if (cond) return null. Но блоки кода (последний пример) обычно более читабельны.

длина линии

Никто не любит читать длинный список кода, лучше разбить код на части.

Например:

// 回勾引号 ` 允许将字符串拆分为多行
let str = `
  Ecma International's TC39 is a group of JavaScript developers,
  implementers, academics, and more, collaborating with the community
  to maintain and evolve the definition of JavaScript.
`;

дляifЗаявление:

if (
  id === 123 &&
  moonPhase === 'Waning Gibbous' &&
  zodiacSign === 'Libra'
) {
  letTheSorceryBegin();
}

Максимальная длина строки кода должна быть согласована на уровне команды. Обычно 80 или 120 символов.

отступ

Существует два типа отступов:

  • Горизонтальный отступ: 2 или 4 пробела.

    Горизонтальный отступ обычно состоит из 2 или 4 пробелов или табуляции (клавишаkey:Tab) составляют. Какой путь выбрать — древняя священная война. Пространства немного более распространены в наши дни.

    Одно из преимуществ выбора пробелов над вкладками заключается в том, что они позволяют создавать более гибкие конфигурации отступов, чем вкладки «Вкладки».

    Например, мы можем выровнять параметры по левой скобке следующим образом:

    show(parameters,
     aligned, // 左边有 5 个空格
     one,
     after,
     another
  ) {
  // ...
}

  • Вертикальный отступ: пустые строки, используемые для разделения кода на логические блоки.

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

    function pow(x, n) {
  let result = 1;
  //              <--
  for (let i = 0; i < n; i++) {
    result *= x;
  }
  //              <--
  return result;
}

    Вставка дополнительной пустой строки помогает сделать код более читабельным. При написании кода не должно быть более 9 последовательных строк кода, не разделенных по вертикали.

точка с запятой

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

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

Если вы опытный программист JavaScript, вы можете выбрать что-то вродеStandardJSТакой стиль кода без точки с запятой. В противном случае лучше использовать точку с запятой, чтобы избежать возможных ошибок. Большинству разработчиков следует использовать точку с запятой.

вложенный уровень

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

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

Например, не следует добавлять вложенные какifусловие:

for (let i = 0; i < 10; i++) {
  if (cond) {
    ... // <- 又一层嵌套
  }
}

Мы можем написать это так:

for (let i = 0; i < 10; i++) {
  if (!cond) continue;
  ...  // <- 没有额外的嵌套
}

использоватьif/elseа такжеreturnТакже можно сделать что-то подобное.

Например, две приведенные ниже структуры одинаковы.

Первый:

function pow(x, n) {
  if (n < 0) {
    alert("Negative 'n' not supported");
  } else {
    let result = 1;

    for (let i = 0; i < n; i++) {
      result *= x;
    }

    return result;
  }
}

второй:

function pow(x, n) {
  if (n < 0) {
    alert("Negative 'n' not supported");
    return;
  }

  let result = 1;

  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}

Но второй более читаем, потому чтоn < 0Этот «особый случай» рассматривается с самого начала. Как только условие проходит проверку, выполнение кода может войти в «основной» поток кода без дополнительной вложенности.

функциональное местоположение

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

  1. в коде, который вызывает эти функциинадОбъявите эти функции:

    // 函数声明
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

// 调用函数的代码
let elem = createElement();
setHandler(elem);
walkAround();

  2. Сначала напишите код вызова, затем напишите функцию

    // 调用函数的代码
let elem = createElement();
setHandler(elem);
walkAround();

// --- 辅助类函数 ---
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

  3. Смешанный: когда функция используется впервые, функция объявляется.

В большинстве случаев лучше второй способ.

Это потому, что при чтении кода первое, что мы хотим знать, это «что он делает». Если code-first, эта информация отображается в самом начале всей программы. После этого, возможно, нам не нужно читать эти функции, особенно когда их названия ясно показывают, что они делают.

гид по стилю

Руководства по стилю содержат общие правила для кода «если вы пишете», такие как: какие кавычки использовать, сколько места для отступа, максимальная длина строки кода и множество деталей.

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

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

Некоторые популярные варианты:

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

Автоматическая проверка

Линтеры — это инструменты, которые автоматически проверяют стиль кода и предлагают улучшения.

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

Вот некоторые из наиболее известных инструментов проверки кода:

  • JSLint— Одна из первых шашек.
  • JSHint— Больше настроек, чем у JSLint.
  • ESLint— должен быть последним.

Все они способны выполнять проверки кода. я используюESLint.

Большинство инспекторов можно интегрировать с редактором: просто включите плагин в редакторе и настройте стиль кода.

Например, чтобы использовать ESLint, вы должны сделать:

  1. УстановитьNode.JS.
  2. использоватьnpm install -g eslintкоманда (npm — это установщик пакета JavaScript) для установки ESLint.
  3. В корневом каталоге вашего проекта JavaScript (папка, содержащая все файлы проекта) создайте файл с именем.eslintrcконфигурационный файл.
  4. Установите/включите плагины в редакторах, интегрированных с ESLint. У большинства редакторов есть эта опция.

Ниже приведен.eslintrcПример файла:

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "no-console": 0,
    "indent": ["warning", 2]
  }
}

здесь"extends"Директива указывает, что мы устанавливаем на основе настройки «eslint:recommended». После этого мы устанавливаем свои собственные правила.

Вы также можете загрузить наборы стилей из Интернета и расширить их. Подробнее об установке см.ESL int.org/docs/user —…

Также в некоторых IDE есть встроенные инспекторы, очень удобные, но не такие настраиваемые, как ESLint.

Суммировать

Все правила синтаксиса, описанные в этой главе (и в упомянутом руководстве по стилю кода), призваны помочь вам улучшить читаемость кода. Все они спорны.

Когда мы думаем о том, как написать «лучший» код, мы должны задать себе следующие вопросы: «Что может сделать код более читабельным и понятным?» и «Что может помочь нам избежать ошибок?» Это главный принцип. иметь в виду при обсуждении и выборе стиля кодирования.

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

домашние вопросы

Сначала задайте вопрос, а потом смотрите ответ.

плохой стиль кода

Важность: ⭐️⭐️⭐️⭐

Что не так со стилем кода ниже?

function pow(x,n)
{
  let result=1;
  for(let i=0;i<n;i++) {result*=x;}
  return result;
}

let x=prompt("x?",''), n=prompt("n?",'')
if (n<=0)
{
  alert(`Power ${n} is not supported, please enter an integer number greater than zero`);
}
else
{
  alert(pow(x,n))
}

почини это.

Отвечать:

Ответ на фоне публичного аккаунта WeChat «Технический разговор»1-3-2Получите ответ на этот вопрос.

Учебники по современному JavaScript: учебные пособия по современному JavaScript с открытым исходным кодом, от начального до продвинутого.Рекомендовано официальной документацией React, учебным пособием по JavaScript вместе с MDN..

Читайте онлайн бесплатно:zh.javascript.info

Отсканируйте приведенный ниже QR-код, подпишитесь на общедоступную учетную запись WeChat «Technology Talk» и подпишитесь на более интересный контент.

Категории