Кто еще хочет писать чистый код JavaScript?

7 советов, которые помогут вашим коллегам полюбить ваш кодекс.

Ваш колледж: "Кто автор этого кода?"

Ожидание: «Это я!» Вы гордо отвечаете, потому что этот код прекрасен, как принцесса.

Реальность: "Нет, это не я!" Вы лжете, потому что этот код уродлив, как зверь.

Теперь, если вы хотите воплотить ожидания в реальность, продолжайте читать.

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

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

// Don't
let xyz = validate(‘amyjandrews’);
// Do
let isUsernameValid = validate(‘amyjandrews’);

Имеет смысл называть тип коллекции множественным числом. Таким образом, не забывайте о s:

// Don't
let number = [3, 5, 2, 1, 6];
// Do
let numbers = [3, 5, 2, 1, 6];

Функции делают вещи. Итак, имя функции должно быть глаголом.

// Don't
function usernameValidation(username) {}
// Do
function validateUsername(username) {}

Начните с is для логического типа:

let isValidName = validateName(‘amyjandrews’);

Не используйте константы напрямую, потому что со временем вы спросите: «Что это, черт возьми?» Прежде чем использовать константы, лучше дать им имена:

// Don't
let area = 5 * 5 * 3.14;
// Do
const PI = 3.14;
let radius = 5;
let area = PI * radius * radius;

Для функций обратного вызова не поленитесь просто называть параметры одним символом, например h, j, d (возможно, даже вы, отец этого имени, не знаете, что они означают). Короче говоря, если параметр - человек, передайте человек; если это книга, передайте книгу:

// Don't
let books = [‘Learn JavaScript’, ‘Coding for Beginners’, ‘CSS the Good Parts’];
books.forEach(function(b) {
  // …
});
// Do
let books = [‘Learn JavaScript’, ‘Coding for Beginners’, ‘CSS the Good Parts’];
books.filter(function(book) {
  // …
});

2. Выбрасывайте информативные ошибки

«Произошла ошибка».

Или просто: «Ошибка».

Какая ошибка?

Каждый раз, когда я вижу такую ​​ошибку в некоторых приложениях или на веб-сайтах, я как пользователь ненавижу ее. Что я делаю не так? Я делаю эту ошибку? Так что за ошибка? Вы мне не говорите, откуда мне знать, что я буду делать дальше?

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

Написать четкое сообщение об ошибке совсем несложно.

Если нет подключения к Интернету, то:

showMessage(‘No internet connection! Please check your connection and try again!’);

Если пользователь забыл что-то ввести, тогда:

showMessage(‘Please enter your username’);

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

if (error) {
  throw new Error(‘validation.js:checkUser: special characters are now allowed’);
}

Выше приведен формат сообщения об ошибке, к которому вы можете обратиться.

3. Вернитесь как можно скорее.

Взгляните на код ниже:

function login(username, password) {
  if (isValid(username)) {
    // Log in
  } else {
    showMessage(‘Username is not valid’);
  }
}

Часть else не нужна. Мы должны удалить его, вернув сообщение раньше:

function login(username, password) {
  if (!isValid(username)) {
    showMessage(‘Username is not valid’);
    return;
  }
  // Log in
}

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

4. Не наделяйте функцию слишком большой властью.

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

function validateAndLogin() {
  // Do a lot of things here
}

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

Ниже представлены лучшие:

function validate() {
  // Only validate
}
function login() {
  // Only login
}

5. Избегайте побочных эффектов.

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

Например:

var number = 3;
function changeNumber(add) {
  number = 2 + add;
  return number;
}
changeNumber();

Когда вы вызываете функцию changeNumber, переменная number будет изменена на 6. Это настоящая проблема, потому что иногда вы не имеете ни малейшего представления об изменениях глобальной переменной. Так что вам следует избегать этого побочного эффекта в своих проектах.

Как? Используя чистую функцию.

Приведенный выше пример можно изменить на:

function addThree(summand) {
  const constant = 3;
  const sum = summand + constant;
  return sum;
}

6. Создавайте модули

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

const validateUsername = function (username) {
  // Validate username
};
const validatePassword = function (password) {
  // Validate password
};
Module.exports = {
  validateUsername,
  validatePassword
};
const { 
  validateUsername,
  validatePassword
} = require(‘./validation’);
let isUsernameValid = validateUsername(‘amyjandrews’);

7. Используйте подключаемый модуль форматирования кода.

Я использую VSCode для большинства своих проектов. Если вы используете VSCode, обязательно установите Prettier ради красивого кода.

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

Подводя итог, вы должны подумать о людях, которым вы передадите свой проект: «Как заставить их чувствовать себя счастливыми, продолжая работать над этим проектом?» Потому что это то, чего вы ожидаете, когда кто-то передает вам проект.