Как напортачить начинающему JS разработчику: принципы DRY, KISS, YAGNI, SOLID
Vložit
- čas přidán 3. 07. 2024
- ⏰ Курс JavaScript 2.0: itgid.info/course/javascript-2
🧠 Чат Telegram c кодами задач: t.me/itgid_info
👇 Разверни для полной информации
💎 Курс Функции в JavaScript: itgid.info/course/function-2021
🧑🏻💻 Сайт: itgid.info
😋 Курс Методы массивов: itgid.info/course/arraymethod
Программист оптимизировал JavaScript код по принципу DRY и получил костыли и велосипеды - разбираемся в чем проблемы, изучаем возможности оптимизации простого кода на JS, пробуем соотнести принципы DRY и KISS плюс YAGNI в JavaScript. Пишем 2 оптимизации кода.
00:00 Принципы разработки: DRY, KISS
01:40 Постановка задачи и решение
05:45 Изучаем код JS оптимизированный разработчиком
15:00 Доводим глупости до конца
17:30 Делаем первый вариант оптимизации кода
26:05 Второй вариант оптимизации
Моя рабочая станция:
Desktop: AMD Ryzen5 1600,Asus GeForce GTX 1650 Phoenix 4GB GDDR6, RAM: 16GB, Motheboard: MSI A320M PRO-M2 V2, Power: Chieftec Value APB-400B8 400W Bulk, Box: Gougar MX350 Mesh
HDD:
- Samsung 860 Evo-Series 500GB M.2
- Toshiba P300 2TB
- Silicon Power A56 256GB
Monitors:
- 23.8" Dell P2419HC
- 23.8" Dell P2418D
Mouse: Trust Verto Ergonomic Wireless
Keyboard: HP KU-1469
Microphone: Samson C01U Pro
+ MacBook Pro M1 13'' 8-Core CPU/8-Core GPU/16-core Neural Engine /16GB/256GB
+ IBM Lenovo ThinkPad E14 / Intel Core i5-1135G7 (4.2 ГГц) / RAM 16 ГБ / SSD 1 ТБ / Intel Iris Xe Graphics
Спасибо вам за ваш труд)
Спасибо!!! Учусь у вас на курсе javascript 2.0 . Классный курс. Предпологаю что буду учиться и дальше!!!! Хорошее познавательное видео спасибо.
Очень интересно) спасибо за видео)
😂 не смог написать простейшую функцию со второй попытки , отписывайтесь закрывайте видео, чувство юмора на уровне )
Круто, спасибо вам за уроки
ф
извиняюсь
Спасибо за классные советы.
Интересный материал
сразу лайк за разборку такой темы) кодить учат все, хорошо кодить-мало кто)
спасибо. пойду поправлю код
Интерн с бионика приветствует) Меня радует что мой подход решения в итоге сошёлся с вашим) Успехов и лайк!
Спасибо. Приятно. Бионик - бест.
КРАСАВЧИК!!!!!!!!!!!!!!!!!!!!!!!
100% путишествование по функциям :)
Интересная тема, недавно сам писал некий функционал на своем pet-проекте и тоже избавлялся от лишней вложенности. В итоге из 3-х уровней вложенности получилось свести к одному промису))). Ну и мне понравилось что профессионал думает также - сначала надо написать хоть как-то, а уже потом оптимизировать. Вообще такие вещи сами собой приходят, но говорить об этом нужно, потому что направить программиста тоже очень важно.
супер
SUPER MASTER
Спасибо за урок!
Хорошая пища для размышлений.
Как по мне, то всегда нужно хорошо подумать что , где , как и с какой целью использовать, а не бездумно применять все что написано где-то там в интернетах. На заборах ведь тоже пишут...
да
Не подскажите, как сделать так, чтобы vs code камментила куски кода по хот кею, как в видео?
Гугл только странные левые скрипты показывает ):
То что по завершению представил очень хорошо подойдёт начинающему новичку, - я думаю
Еще вопрос :hover и :focus отличаются?
У вас в теге , а браузер русскоязычный, поэтому браузер предлагает перевести контент.
Что бы не предлагал, надо изменить атрибут lang 😀
В index.html поставьте ru в место en и переводить перехочет)
спасибо. Решил не пихать сюда обвес html - чтобы не отвлекать.
Скорее всего перевести хочет из-за слова Lorem
1. Предлагало перевод именно на португальский
2. Предложение о переводе впервые появились после добавления этого слова на страницу.
Извиняюсь может упустил , но разбора SOLID в этом примере не увидел, и у меня как у новичка произошел брейн лаг , мол как это в одной функции и получаем значение и записываем и проверяем. Извиняюсь если в чем то не прав
Функция, которая только получает значение, называется document.querySelector. Зачем нам писать ещё одну функцию, чтобы также заменить ей однострочный вызов другой? Чтобы что?
Сегодня на паре проходил SOLID. Вернулся домой с учёбы - как тут у Александра видео на эту тему. Совпадение? ))
не думаю
Мне кажется новичкам главное придумать хоть как-то, хоть с тремя, хоть с пятью функциями, главное чтобы работало и не выдавало ошибок. А реализация с учетом этих принципов придет с опытом.
То чувство когда работаешь по принципу "Наконец-то заработало, можно идти спать"
А как же получение кнопки? Там тоже отлично впишется эта функция))
Как у вас подсвеченный код?Какое-то расширение наверно?
Подсветка синтаксиса есть в любом редакторе кода (сейчас в блокноте не пишут). Если вопрос был про тему, то это скорее всего Monokai Dimmed
Функциональщина же. Дэн не может терпеть в опп. Он любит функции и также делает их под любую задачу, значит и мы тоже будем.
А кто такой ден? И согласен - я за ООП, сколько страданий сейчас приносит реакт в процедурном стиле.
@@itgid прогрессивное человечество уже давно ведёт священную войну функциональщиков против ООП, а вы всё ещё ООП с процедурами сравниваете :-). Но да, в приведенном куске кода все парадигмы просто не могут развернуться во в ю свою мощь :-)
Я для себя делал страничку с кучей кнопок копировать и вот правила DRY я не выполни, а KISS выполнил - копировал функцию меняя оду надпись. И так много, много, ... раз.
Всё работает, а упростить пока что не выходит. Я всего лишь любитель, делал для себя.
"Предложил, оптимизировал. довел до конца элементарную функцию с двумя ошибками. В принципе, можно выключать, отписываться и меня больше не смотреть"
Хорош, Алекс, хорош
Я бы еще const {querySelector} = document; добавил.
В последнем примере, всегда ищется text2, зачем искать text2, если нет text ?
Для работы нам нужны оба элемента, так что не обязательно проверять их наличие по одному. Это не настолько большие накладные расходы, чтобы ради них жертвовать читаемостью и после каждого querySelector-а делать проверку
а почему нельзя было написать text1 && text 2 return )
вот уже кисс пашол усложняешь ) новую функцию создал )
Александр очень принципиальный критик!
Нет. Меня тоже критикуют. Я воспринимаю критику адекватно - просто не смотрю и не читаю ее :) на самом деле классный очень пример, такой тяжело выдумать и на нем можно поучиться, поэтому я благодарен автору кода.
@@itgid пример отличный. Возможно у вас руки как-то дойдут до фаербейс. Он сейчас очень востребован и входит часто в требования фулстеков. Туториалов, которые хорошо его объясняли почти нет, даже на англ. есть только примеры с валидацией. Если вы созреете к этой технологии, то это будет мегакруто
Забыли ещё одну крылатую фразу: преждевременная оптимизация --- корень всех зол (с)
Студент написал 2 функции что бы в дальнейшем использовать их в других работах (не факт что они пригодятся), при этом не вынес их в отдельный модуль, не экспортировал/импортировал.
Как поступить начинающему разработчику - не вы**ываться (извиняюсь за французский).
Не стоит на первых парах концентрироваться на соблюдении этих принципов программирования - это сильно сбивает.
Все эти принципы очень классно усвоятся на более-менее объёмном проекте.
SOLID помогут предотвратить боль в пальцах и заднем проходе при разрастании проекта.
Всю теорию можно читать по несколько раз и восхищаться про себя, типа "да, да, круто. Вот это точно понадобится".
Но набираясь опыта человек сам дойдёт до этих принципов, даже если он до этого не знал о них.
Александру, как всегда, спасибо за видео. Человек умеет донести мысли до аудитории.
Круто. Ваш текст можно как выводы - в конце видео. Спасибо!
На мой взгляд, YAGNI это очень тонкий лед.
С одной стороны, он очень понятен и обязателен, с другой стороны, во всем надо знать меру. Профессионал всегда будет учитывать контекст задачи и думать немного наперед, закладывая в функционал чуть больше, чем необходимо. Если этого не делать и хардкодить все подряд, потом на масштабирование будет тратиться неадекватное количество времени.
Особенно эта проблема актуальна для фрилансеров, которые могут сначала решить все в лоб, а потом в случае сhange request заказчик будет платить второй раз за переписывание того же самого функционала и даже скорее всего не узнает об этом. При этом при серьезной работе за такой подход разрабу могут и в мастер напушить.
Лично я бы бы такую задачу решал так же в одну функцию, но добавил аргументы sourceElementSelector и targetElementSelector. Тогда в будущем можно спокойно наплодить в ДОМ еще сколько угодно элементов и кнопок, при этом пользоваться одной функцией для копирования содержимого.
🤔 эх все это, клиа коде анд коде стаил, могут прийти только со временем на большом объеме практики и набитых шишек 😭
Всем кто закончил курс JS 2.0 большой респект, рекомендую 👍
Иду на react 👍😁
Я так понимаю, что начинающему программисту пока не нужно смотреть в сторону этих принципов. Для общего представления, так сказать, знать, что они есть. Иначе можно окунуться в такие дебри... Спасибо вам за детальный разбор!
Верно. Вначале нужно начать писать. Криво. Косо но писать. А потом придете уже к пониманию.
@@itgid , полностью с вами согласен.
Я сам как начинающий у которого свежи воспоминания о старте... только через год с лишним к этим solid'aм приходишь. Все постепенно. Пиши хоть как то и радуйся что сделал.
Минимум год, а еще лучше 5 )))
Если взять принципы и их всегда применять, то вместо рабочего хоть и может не красивого кода (костылей) получите, вылизывание кода, а не разработку.
Разработчика который думает как переназвать название переменной, функции, и т.д. не любят)
Но в конце ты получаешь сразу два элемента - это неэффективно. Потому что, если отсутствует первый, то второй искать не надо уже.
Можно было бы ещё в последний вариант добавить const {querySelector} = document
согласен.
классный материал. я когда был новичком такую дичь не писал))) как новички умудряются нагромоздить столько бесполезных функций - для меня загадка)