меню

Чистый код на JavaScript, 5 рекомендаций которые улучшат Ваш код.

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

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

  1. Избавьтесь от else.

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

    If и else условие

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

    Избавиться от else

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

  2. Декларативный кода и встроенные функции.

    Допустим, у вас есть массив чисел, и вы хотите их отсортировать. Обычная реализация будет следующей:

    Bubble sorting, сортировка пузырьком

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

    1. Они делают код более компактным, а компактный код обычно более поддерживаем (хотя это не всегда так);
    2. Они уже используют реализации, над которыми больше работали, поэтому могут быть более быстрыми, безопасными и известными другим разработчикам;

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

    Javascript sort array метод

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

  3. Раздели свой код на логические блоки.

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

    Some fruit business logic

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

    Apple is citric?

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

  4. Switch case и словари.

    Допустим, в вашем приложении используется логика фильтрации. Обычным способом ее обработки является использование оператора switch case.

    Switch case for filters

    Нет ничего плохого в таком подходе, но есть другой, более удобный при работе с упорядоченными ответами на каждое высказывание. Использование словарей. В JavaScript объект по умолчанию уже является словарем, то есть неупорядоченным массивом, в котором элементы могут быть доступны по ключу, обычно строке или числовому значению. Это также означает, что словари прекрасно подходят для задач, где не важен порядок, а только доступ к элементам.

    Dictionary conditionals

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

  5. Используйте деструктуризацию и spread для переопределения объекта.

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

    Handling state/object changes

    С ES6 у нас есть более простой способ сделать это, используя метод Object.assign или еще более простой синтаксис распространения.

    Spread operator new assign

    Это создаст новый объект и избежит мутации, при этом будет короче, чем первый вариант.

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


Возможно, вам будет интересно

Как отключить ввод текста по переключателю disabled

В данном материале будет представлен самый простой способ включения и отключения ввода информации в текстовое поле INPUT=TEXT с помощью библиотеки jQuery и html атрибута disabled.

Склонение окончаний в словах на Javascript

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

Плавная кнопка "Наверх" на jQuery

Многие из Вас видели, что на некоторых сайтах при прокрутке окна браузера, в какой-то момент появляется кнопка "Наверх". Если по ней кликнуть, то начинается плавная промотка полосы прокрутки до самого верха. Как реализовать плавную кнопку "Наверх" через jQuery, Вы и узнаете из этой статьи.

Javascript array шпаргалка

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

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту