Когда я учился в колледже, нас учили записывать все полностью. Не используйте ярлыки или что-либо еще, чтобы очистить внешний вид вашего кода. Это помогло им понять, что я знаю, что делаю. Я не вижу другой причины делать это, когда есть более простые способы сделать то же самое. вот 5 лучших способов очистить ваш код javascript / ReactJS.
1. Условные
Одной из областей, которая часто используется в веб-разработке, являются условные операторы. Почти все, что вам нужно сделать на сайте, имеет условие. если кнопка нажата, то происходит это, иначе происходит то. обычно это длинный код, который занимает несколько строк и выполняет только одну функцию.
Но теперь это проще. Мы можем сделать то же самое в одной строке с меньшим количеством фигурных скобок и без написания нескольких слов. вот тот же пример в более коротком синтаксисе:
Такой код помогает очистить представление и быстро понять, что происходит. «?» означает «ЕСЛИ», тогда как «:» означает «ИНАЧЕ». Довольно круто, верно?
2. Импорт данных
Это может показаться простым, но когда вы создаете компонент в React, вам не нужны все данные, которые вы проецируете на этот компонент. Это значительно очищает этот компонент, особенно если у вас более 5 элементов. например:
Как видите, добавление данных в сам компонент приводит к длинному коду. Это может даже замедлить работу этого компонента. Что вы можете сделать, так это создать новый файл и экспортировать данные из этого файла.
экспортировать константные данные = [{…}];
а затем импортируйте эти данные в компонент следующим образом:
Выглядит намного чище и позволяет компоненту просто быть компонентом.
3. Пишите простой код
написание полного кода для решения проблемы, когда уже есть функции, созданные в JavaScript, тратит слишком много времени. Я понимаю, гораздо лучше с точки зрения знаний разобраться в проблеме самостоятельно. Но если вы работаете на клиента и вам нужно что-то сделать, вам нужно развиваться быстрее. Научитесь программировать проблемы в своих проектах, а не в чужих.
Использование функций, которые уже являются частью JavaScript, повышает производительность и ускоряет кодирование, а также очищает ваш код.
4. Улучшенные соглашения об именах
При создании функций переменных может показаться, что проще написать что-то быстро. что-то вроде «var t», где «t» означает время. Но если через год кто-то посмотрит на ваш код и попытается в нем разобраться, но не сможет, тогда он придет к вам, и тогда вам потребуется несколько минут, чтобы вспомнить, это сильно усложняет задачу. Функции и переменные имеют способ записи, функции должны быть действием. тогда как переменные должны быть утвердительными именами, что-то, что говорит, что это то, что есть, а НЕ то, что не так. Когда у вас есть что-то вроде isActive, у вас не должно быть другого, которое говорит isNotActive, вместо этого просто используйте !isActive, когда вам нужно ложное значение.
5. Функции одной работы
может быть лучше при написании кода просто написать все, что вам нужно, в функции, я все еще делаю это. Но когда я заканчиваю работу с функцией, я рефакторинг и делаю из нее меньшие функции. У функций всегда должно быть только одно задание. Я узнал об этом от дяди Боба на YouTube:
https://www.youtube.com/results?search_query=clean+code
Это помогает при создании кода для других разработчиков. Это облегчает понимание и даже облегчает исправление любых ошибок. поэтому вместо:
Попробуй это:
Это может показаться длинным, но в итоге код станет чище.
Заключение
Я понимаю, что людей учат полностью записывать вещи или составлять кодовое слово, но есть вещи на месте по какой-то причине. Рефакторинг кода очень важен в командной обстановке, а соблюдение чистоты заставляет вас выглядеть более опытным, чем недавний выпускник. Если вы дочитали до этого момента, посмотрите другие мои посты:
также подписывайтесь на меня в LinkedIn и Instagram:
