JavaScript Паттерны. Полный курс (22 паттерна в 1 видео)

#YauhenK #webDev #JS #JSPatterns
Всех приветствую в курсе «JavaScript Паттерны».
В данном видео-курсе мы с вами рассмотрим самые распространённые паттерны проектирования, которые используются при разработке.
Паттерны, или шаблоны - это определённые, зарекомендовавшие себя конструкции, которые служат для решения типовых задач программирования.
Рассматривать мы их с вами будем на примере языка JavaScript в синтаксисе ES6.
✒ Timeline:
✔ 0:00 - Введение
✔ 3:32 - Singleton (Одиночка)
✔ 8:21 - Factory Method (Фабричный метод)
✔ 11:28 - Abstract Factory (Абстрактная фабрика)
✔ 15:08 - Prototype (Прототип)
✔ 18:46 - Builder (Строитель)
✔ 23:17 - Decorator (Декоратор)
✔ 27:29 - Facade (Фасад)
✔ 32:08 - Proxy (Заместитель)
✔ 36:10 - Adapter (Адаптер)
✔ 40:24 - Composite (Компоновщик)
✔ 46:30 - Bridge (Мост)
✔ 52:37 - Flyweight (Легковес)
✔ 57:51 - Mediator (Посредник)
✔ 1:02:34 - Iterator (Итератор)
✔ 1:06:14 - Chain of Responsibility (Цепочка обязанностей)
✔ 1:11:55 - Strategy (Стратегия)
✔ 1:16:58 - Memento (Снимок)
✔ 1:20:31 - Template Method (Шаблонный метод)
✔ 1:24:17 - Visitor (Посетитель)
✔ 1:28:05 - Command (Команда)
✔ 1:34:44 - Observer (Наблюдатель)
✔ 1:38:19 - State (Состояние)
✒ Репозиторий курса:
✔ GitHub: github.com/YauhenKavalchuk/de...
✒ Полезные ссылки:
✔ Плейлист по ES6: • ES6
✒ Используемые ресурсы и инструменты:
✔ Carbon (Screenshots): carbon.now.sh/
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ KZbin: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

[@Ramosok]

Очень помог этот курс подготовиться к собесу, да и вообще все твои ролики помогли стать хорошим jun+ разработчиком.

[@YauhenKavalchuk]

👍

[@digitalturkistan1857]

Евгени очень дорожит подписчиков что ему не трудно ответит каждому комментарии. Спасибо

[@Ramosok]

Спасибо за твой труд!

[@YauhenKavalchuk]

Спасибо за отзыв

[@user-pd6px2ky6f]

Большое спасибо за урок! Успехов вам!

[@YauhenKavalchuk]

Пожалуйста

[@user-mu7yi5ii6n]

Спасибо за видос будем посмотреть))

[@YauhenKavalchuk]

Пожалуйста)

[@yevhenvictorovich2288]

Thanks for this video. I've just started to read a book about it.

[@YauhenKavalchuk]

My pleasure

[@N7N7N77]

Спасибо, все прослушала и законспектировала....очень важное видео

[@YauhenKavalchuk]

Всегда пожалуйста

[@user-wz1tn7fn4s]

Спасибо, очень удобный формат))

[@YauhenKavalchuk]

Пожалуйста

[@user-hq3ri7ui7l]

Спасибо за труд, интересно и полезно

[@YauhenKavalchuk]

Пожалуйста

[@user-sn2nq2nr8p]

​@@YauhenKavalchuk0:38

[@toyotominashimoto9963]

годный урок. кратко и ясно

[@YauhenKavalchuk]

Спасибо)

[@oleksandr.ryzhyk]

Шикарно! Спасибо большое!

[@YauhenKavalchuk]

Пожалуйста

[@yurii873]

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

[@YauhenKavalchuk]

Пожалуйста)

[@_oxios_]

Класс, четко! Мало что понял. Нужно больше практики.

[@YauhenKavalchuk]

Спасибо за отзыв)

[@JB-sv8oh]

самое лучшее видео по паттернам

[@YauhenKavalchuk]

Спасибо

[@user-rg5tk3sw6v]

Спасибо за видео)

[@YauhenKavalchuk]

Пожалуйста

[@evergreensun7283]

Вы крутой!! Спасибо за видео. Успехов вам

[@YauhenKavalchuk]

Спасибо большое)

[@filippkotenko851]

Спасибо тебе за труды большое)

[@YauhenKavalchuk]

Пожалуйста

[@SvetloeSerdce]

мне кажется, я еще не раз посмотрю этот видос)))

[@YauhenKavalchuk]

👍

[@Krishtal3]

Дуже дякую за відео, корисно для всіх рівнів программістів

[@YauhenKavalchuk]

Пожалуйста

[@toyotominashimoto9963]

прими мою благодарность, малой. сохраню себе это видео в качестве шпаргалки и руководства на будущее)

[@YauhenKavalchuk]

👍

[@nickwhiteman8816]

Евгений спасибо большое за этот канал) Буду теперь тебя смотреть)

[@YauhenKavalchuk]

Спасибо за отзыв

[@uzver3787]

Чётко! Отличный курс! JavaScript Паттерны

[@YauhenKavalchuk]

Благодарю)

[@user-oz3wx9uk7b]

спасибо, самое понятное что я находил по паттернам

[@YauhenKavalchuk]

Пожалуйста)

[@Nextspace8bit]

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

[@yurii873]

Смотрел ваш курс по graphQL - эт супер ))) еще раз спасибо. Надеюсь у вас в Минске все ок, мы все с вами!

[@YauhenKavalchuk]

Спасибо за поддержку!

[@dianabohomoliuk9191]

ОГРОМНОЕ тебе спасибо! Ты сделал невероятное - такую сложную тему так круто й просто объяснил. Спасибо, за то, что ты делаешь!)

[@YauhenKavalchuk]

Спасибо большое за отзыв 😊

[@user-gf9qe9im7r]

ничего не понятно! материал для новичков объяснен так что и профи не поймет что тут говорят

[@Polite_person_]

Спасибо за урок!

[@YauhenKavalchuk]

Пожалуйста

[@AlexanderYukal]

5:40 Простите, Евгений, я что-то плохо понял к какому контексту принадлежит переменная instance? Похоже она определяется глобально? Если я не ошибаюсь в строгом режиме такое делать нельзя? 7:54 А вот вижу, просто дальше не досмотрел. Хм, подход интересный, но тогда еще остается проблема с оператором "new", ведь при каждом его вызове будет выделятся память, если я не ошибаюсь.

[@hasst9261]

Отлично

[@YauhenKavalchuk]

👍

[@Max-kr4ie]

Ты крут!

[@YauhenKavalchuk]

Спасибо)

[@kirillpavlovskii8342]

крутое видео, спасибо

[@YauhenKavalchuk]

Пожалуйста

[@vitaliiponomarov1271]

#собеседование #javascript #frontend #html #css #React #Redux видео база, топ, основа.

[@YauhenKavalchuk]

👍

[@user-ed5lw8lz2i]

Отличное видео, подача материала очень четкая и понятная, спасибо большое. Немножко не понял смысл паттерна Strategy, ну ещё почитаю про него )

[@YauhenKavalchuk]

Пожалуйста

[@user-gd8kj4dc1m]

Начал только разбираться. Проверьте, пожалуйста, по-моему в паттерне Singleton закралась опечатка (на 06:36). Установка счетчика в ноль в конструкторе необходимо переместить в блок if. Спасибо.

[@user-zk6tw7rj1t]

yes

[@abudarovich]

в "сохраненные" 🔥

[@YauhenKavalchuk]

👍

[@vponochovny]

6:35 - А разве не будет if(!instance) выполняться, когда мы впервый раз создали этот класс через new? И получится, что instance будет равно this первого созданного класса? тут я не совсем понимаю как работает

[@Rusu421]

Так и должно быть. В первый раз переменная пустая, и мы записываем в нее this. Во второй проверка выдает заполненность переменной и сразу делает возврат существующего объекта. Но у него в этом варианте по бороде пошел весь синглтон, потому что он при каждой инициализации обнуляет счетчик. Можно проверить, инициализировав второй счетчик после повышения первого. Он должен был счетчик и инициализацию внести в фигурные скобки. Во втором, где в начале идет вариант возврата существующего объекта, такого не происходит.

[@user-mp2qu2nh9t]

Если я правильно понял, то объект команды лучше передавать непосредственно в метод execute водителя - в таком случае один водитель сможет выполнять разные команды. Если же команду передавать в конструктор водителя, то получается "Один водитель - одна команда".

[@YauhenKavalchuk]

Правильно поняли

[@user-rd3yd6lh2e]

Супер! Огромное спасибо за Вашу работу! Все понятно!

[@YauhenKavalchuk]

Спасибо за отзыв

[@user-gf9qe9im7r]

а мне непонятно, автор очень плохо объясняет материал

[@Fresmr]

И тема сегодняшней лекции

[@YauhenKavalchuk]

👍

[@romasbitinas643]

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

[@Nikitosss91]

Ничего не понятно, но очень интересно

[@YauhenKavalchuk]

¯\_(ツ)_/¯

[@user-tk7qv9rv2c]

Спасибо за курс, с первого раза (ничего не зная о паттернах), сложно, конечно. Но мне кажется, что и тема эта не для базового уровня?

[@YauhenKavalchuk]

Пожалуйста

[@frookkiesilver4805]

Обожаю твои видосы, ну ничего лишнего, у других растянуто по часу на каждый паттерн. Как в магазине: я просто хочу посмотреть, что есть в наличии, а консультант начинает затирать какой ахрененный именно "этот" товар.

[@YauhenKavalchuk]

Спасибо за отзыв и на а сравнение)

[@serhiimaliuha69]

Евгений, можете навести примеры, когда вы используете преведенные паттерны во время разработки на React ?

[@YauhenKavalchuk]

Нет не могу. Паттерны в React не используются. Как вариант - очень отдалённо можно сказать что для утилит нормализации данных использую что-то вроде Адаптера. А так, паттерны в основном нужны при разработке на чистом JS

[@dreawmy2912]

@@YauhenKavalchuk на чистом js большинство паттернов не нужны или их сложно понять

[@user-ew2md8cu8j]

@@YauhenKavalchuk а как же HOC в реакте, это же декораторы

[@ReAgent003]

Спасибо! 01:34:28 а почему водителю не передан класс "onSwitchOffCommand"? Как теперь ему машину глушить?)) Наверное в классе "Driver" надо было разделить логику запуска/останова двигателя? 01:36:58 думаю лучше передавать как можно меньше информации (в данном случае news было бы достаточно) Хорошее видео!

[@user-ed5lw8lz2i]

Кстати тоже не очень понял. Я назвал класс не Driver, а Command, и тогда можно в его экземпляры передавать как onStartCommand так и onSwitchOffCommand, и тогда более-менее смысл паттерна начинает быть понятным.

[@maximevtahov2360]

спасибо за видео, очень полезно

[@YauhenKavalchuk]

Пожалуйста

[@artemdovhyi4312]

Пришел сюда повторить материал, но совсем запутался Если я не ошибаюсь, говоря о паттерне Фабричный метод ты говорил о простой фабрике, а не о самом патерне Различия в том, что простая фабрика имеет большой условный оператор для создания того или иного продукта, а паттерн создает класс в котором есть пустой метод по созданию продукта с определенным интерфейсом, а подклассы могут его переназначать для создания конкретных продуктов

[@YauhenKavalchuk]

¯\ _(ツ)_/¯

[@Prevedov]

А полные видео по каждому паттерну будут на канале?

[@YauhenKavalchuk]

Это видео содержит полный курс по всем паттернам

[@Prevedov]

@@YauhenKavalchuk спасибо!

[@zmmr013]

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

[@YauhenKavalchuk]

🤔возможно, не очень удачный пример

[@zet0sfx]

46:35 Мост - это разве не структурный паттерн? Оговорка?

[@YauhenKavalchuk]

Да, оговорка

[@donottrackmepls]

В видео показан пример "Simple Factory", а не "Factory Method" - что, кажется, немного "урезает" всю мощь паттерна. Поправьте если я не прав :)

[@YauhenKavalchuk]

Ну, я всё рассказал в видео)

[@ridl27]

и да, можно все же было показать и более продвинутые примеры этих паттернов, а не простые, как вы говорите) не недооценивайте силу и желание работяг :D

[@YauhenKavalchuk]

Как уж есть

[@ridl27]

@@YauhenKavalchuk спасибо и на том) но если у Вас будет время и желание - можете дополнить эту серию уроков :)

[@Renarus]

33:05 «авторизироваться» 😅

[@YauhenKavalchuk]

🙂

[@azamatzabirdinov3777]

Bridge это структурный паттерн

[@YauhenKavalchuk]

Да, я оговорился

[@alicenNorwood]

41:34 (Компоновщик): - Один исходный класс... - (Чтобы править ими всеми?)

[@YauhenKavalchuk]

Ага)

[@iGotton]

+

[@YauhenKavalchuk]

👍

[@zigzag2341]

Прокси какой-то неправильный, интерфейс же поменялся, т. к оригинальный метод не принимал аргумент с паролем или это норма в JS ? Это самый крутой материал по паттернам, который я встречал

[@YauhenKavalchuk]

Да вроде всё ок. За отзыв, спасибо

[@ridl27]

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

[@YauhenKavalchuk]

В git есть весь код! Посмотрите в ветках

[@ridl27]

​@@YauhenKavalchuk да, код именно паттернов есть, но не их использования = практического применения. я об этом))

[@alexup7437]

Не совсем понял разницу между декоратором и посетителем

[@_lazer_]

на JS все это выглядит стремно, без нормального ООП, интерфейсов... :) но для новичков видео однозначно хорошое!

[@YauhenKavalchuk]

Да на JS это стрёмно)

[@user-ox4yl6gu3u]

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

[@_lazer_]

@@user-ox4yl6gu3u так говорят те кто кроме JS ничего больше не видел :)

[@user-ox4yl6gu3u]

@@_lazer_ ну если знания ассемблера, Си, Python - это относится, к тем, кто ни чего не видел, то твоя правда!

[@miloman1995s]

я искренне не понимаю, зачем мне паттерные проектирования, работаю 3 года, ощущаю себя middle++/senior.... пользуюсь SOLID, DRY, KISS , FSD archirecture.... но нафига мне паттерны? я не пользуюсь ООП, я пишу в функциональном стиле (да я понимаю что функциональное программирование это что то типа библиотеки ramda.. но в целом и в общем - называю стиль написания функциональным)

[@andreigovorukhin]

ощущаешь middle++/senior, но по факту джун - смирись

[@Fresmr]

после видео смастирил машину

[@YauhenKavalchuk]

😁

[@suc911]

Паттерн Composite Вообще не зашёл. Описание древовидное а пример достаточно плоский, может стоило еще 1 уровень добавить ( может body расписать )

[@raptorthefirst]

У кого собез в Епаме на этой неделе ?)

[@YauhenKavalchuk]

¯\ _(ツ)_/¯

[@bargamut]

У Компоновщика временная метка съехала: должна быть на 40:24

[@YauhenKavalchuk]

Спасибо, поправил

[@michaelmyers717]

А куда ещё один пропал, где 23-й то😁

[@YauhenKavalchuk]

🤷‍♂️😁

[@alexandrkurmoyarov4634]

В реализации visitor лишние console.log() вызовы: 1. В exportVisitor не надо писать auto.export = console.log(`Exported data: ${auto.info()}`) Лучше: auto.export = `Exported data: ${auto.info()}` А после ифов return auto.export И в классе Auto: return visitor(this) И потом выводить в консоль console.log(tesla.accept(exportVisitor)) 2. Или оставить все как есть но тогда вызывать без консоли tesla.accept(exportVisitor)). Все равно undefined возвращает.

[@YauhenKavalchuk]

👍

[@mrsad6611]

А чем отличается реализация синглотон паттерна от статического класса. Ведь по сути статический класс сам по себе реализует все задачи singleton. Статичность класса гарантирует что сущность будет одна во всех случаях. Вот например: class Basket { static count = 0; static countUp(){ Basket.count++; } } _______________________________________________ --------------- script.js ---------------------------------- Basket.countUp(); console.log(Basket.count); ----------------- script2.js ___________________ Basket.countUp(); console.log(Basket.count); консоль: 1 2