меню

Чистый код на 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

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

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


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

Видео самоучитель jQuery от Envato

Видео курс от компании Envato, Видео курс на английском языке. jQuery - это библиотека, которая значительно упрощает и ускоряет написание JavaScript кода. Видео курс самоучителя jQuery позволит Вам научится работать на нем. Пройдя данный курс Вы научитесь основам работы с jQuery!

Разрешаем только ввод цифр в поле input

Часто возникает задача запрета ввода не цифровых значений в поле input. В этом материале разберем реализацию данного механизма на JavaScript.

Использование HTML5-элемента audio в JavaScript

Благодаря тегу audio появившемуся в HTML5, можно очень просто добавлять звук на сайт. В javascript работать со звуком позволяет соответствующий класс Audio, а проверить поддержку формата звукового файла в браузере - метод canPlayType

Управление версиями Node.js с помощью nvm в Windows

Вопрос экономии времени и удобства окружения разработчика — штука сложная. Работая с Node.js, иногда приходится тестировать своё приложение не только в той версии, которую используете вы, но и в тех, что были выпущены до неё или даже после.

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

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

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

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

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

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

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