В этой статье мы рассмотрим рекомендации по написанию эффективного и чистого кода JavaScript и способы сделать его более эффективным, чистым и понятно.

Введение

JavaScript — один из самых популярных языков программирования, используемых для веб-разработки. Он стал важным инструментом для создания интерактивных и динамических веб-сайтов. В то время как популярность растет, написание эффективного и чистого кода может стать сложной задачей. В Интернете осталось много очень крупных проектов и непереработанного устаревшего кода. Особенно для новых разработчиков, которые только начинают изучать JavaScript, что является более сложной задачей. В этой статье мы обсудим некоторые рекомендации, которым должны следовать разработчики, чтобы писать эффективный и чистый код JavaScript.

1. Используйте осмысленные имена переменных

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

При выборе имен переменных важно быть описательными и избегать использования аббревиатур или отдельных букв, если только они не являются общеизвестными и общепринятыми. (Пример: я в цикле for )

Например:

// Bad - because it does not answer what is the purpose of the variable
let x = 5;
// Good - it explains the purpose of variable
let numberOfElements = 5;

2- Держите свой код организованным и модульным

Организация кода в виде небольших частей и модулей упрощает его сопровождение и понимание. Это также упрощает тестирование и отладку вашего кода. Сохранение кода небольшими частями и кусками также позволяет разработчикам повторно использовать его в других проектах.

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

В примере ниже мы увидим сложение чисел друг с другом.

// Bad - it does not explain what is this function has been used for
function calc1(a, b) {
  return a + b;
}
// Good - explains what is this function for
function addNumbers(a, b) {
  return a + b;
}

3- Используйте новейшие языковые функции

JavaScript постоянно развивается, и постоянно добавляются новые языковые функции. Эти изменения действительно важны для изучения и применения к вашей кодовой базе. После того, как вы будете в курсе этих изменений, вы сможете начать использовать новейшие функции javascript. Это поможет вам писать более эффективный и чистый код. Давайте приведем пример с введением ключевых слов ES6 let и const. Эти ключевые слова сейчас широко используются во многих javascript-проектах. Если вы хотите узнать больше о различиях между let и const, вы можете прочитать статью ниже.



Вопросы для интервью по JavaScript: в чем разница между var, let и const (ES6)
Понимание разницы между var, let и const в JavaScript.javascript .plainenglish.io



// Lets create value which we will not change in the future. 
// Bad
var x = 5;
// Good
const x = 5;

4- Избегайте использования глобальных переменных

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

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

// Bad
counter = 0;
// Good
let counter = 0;

5- Пишите многоразовый и компонуемый код

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

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

// Bad
function displayMessage1() {
  console.log("Hello, world!");
}
function displayMessage2() {
  console.log("Hello, world!");
}

// Good
function displayMessage(message) {
  console.log(message);
}
displayMessage("Hello, world!");
displayMessage("Hello again!")

6- Эффективно используйте условные операторы и циклы

Условные выражения и циклы — неотъемлемая часть JavaScript. Но важно использовать их эффективно. Циклы могут быть настоящими узкими местами в вашем коде, если они используются неправильно.

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

Вместо сложных условий попробуйте разбить их на более мелкие и простые.

Рассмотрите возможность использования методов функционального программирования, таких как

  • карта
  • фильтр
  • уменьшить

чтобы упростить ваш код.

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

// Bad
for (let i = 0; i < items.length; i++) {
  if (items[i].type === "fruit") {
    console.log(items[i].name);
  }
}
// we are iterating over all of the items in the first example
// Good
const fruits = items.filter(item => item.type === "fruit");
fruits.forEach(fruit => console.log(fruit.name));
// on the second one we are filtering items first by their type then iterate

7- Минимизируйте манипуляции с DOM

Работа с объектной моделью документа (DOM) может занимать много времени и ресурсов. Минимизируйте количество манипуляций с DOM, которые вы выполняете в своем коде.

Один из способов сделать это — как можно меньше манипулировать DOM и вместо этого использовать JavaScript для обновления данных, используемых для рендеринга DOM.

Используйте такие библиотеки, как React, Vue и Angular, которые предлагают оптимизацию для манипулирования DOM и обновляют DOM только при необходимости.

// Bad
for (let i = 0; i < items.length; i++) {
  const item = items[i];
  const node = document.createElement("div");
  node.innerHTML = item.name;
  document.body.appendChild(node);
}
// Good
const nodes = items.map(item => {
  const node = document.createElement("div");
  node.innerHTML = item.name;
  return node;
});

8- Пишите эффективный код

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

Например, использование мемоизации для кэширования результатов дорогостоящих вычислений и отказ от использования оператора delete для удаления элементов из массивов.

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

9- Используйте обработку ошибок

Обработка ошибок и исключений в вашем коде — важный аспект написания надежного кода.

Блоки Try-catch можно использовать для обработки ошибок, а оператор throw — для создания пользовательских ошибок.

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

// Bad - no error handling
function divide(a, b) {
  return a / b;
}
// Good - error handling and logs are implemented
function divide(a, b) {
  if (b === 0) {
  throw new Error("Cannot divide by zero");
  }
  return a / b;
}
try {
  const result = divide(10, 0);
  console.log(result);
  } catch (error) {
  console.error(error.message);
}

10- Проверьте свой код

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

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

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

const { expect } = require("chai");
describe("divide", () => {
  it("should return the result of dividing two numbers", () => {
  expect(divide(10, 2)).to.equal(5);
});
it("should throw an error if dividing by zero", () => {
  expect(() => divide(10, 0)).to.throw("Cannot divide by zero");
  });
});

Заключение

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

Это все, что касается лучших практик написания эффективного и чистого кода JavaScript.

Если вы нашли эту статью полезной, вы можете получить доступ к похожим, подписавшись на Medium-членство по моей реферальной ссылке. 🙂

Подпишитесь на меня в Твиттере

Удачного кодирования!

Мелих

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.