JavaScript Паттерны. Шаблоны проектирования. 17 Примеров

Эксклюзивный контент на моем Boosty: boosty.to/vladilen
Telegram: t.me/js_by_vladilen
Instagram: / vladilen.minin
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
JavaScript Паттерны. Шаблоны проектирования. 17 Примеров
JavaScript Паттерны - Паттерны проектирования. Тот концепт, который позволяет решать типовые задачи, используя паттерны или шаблоны проектирования на языке javascript.
В видео вы увидите примеры javascript паттернов и шаблонов проектирования
Исходный код урока:
github.com/vladilenm/js-patte...
Constructor 00:00
Factory 10:15
Prototype 20:09
Singleton 23:31
Adapter 29:09
Decorator 35:40
Façade 41:26
Flyweight 50:39
Proxy 57:15
Chain of Responsibility 1:03:13
Command 1:06:58
Iterator 1:11:58
Mediator 1:18:24
Observer 1:26:00
State 1:36:15
Strategy 1:43:40
Template 1:47:30
Сложный JavaScript простым языком:
• Урок 1. JavaScript. Чт...
#js #javascript #design-patterns

[@VladilenMinin]

Эксклюзивный контент на моем Boosty: boosty.to/vladilen

[@DmitryPupinin]

Есть несколько спорных моментов в понимании автором паттернов: 1. Декоратор. Автор описал скорее порождающий паттерн, похожий на Прототип. Основная особенность декоратора - возможность навесить на объект несколько штук одновременно, при этом каждый из них будет расширять возможности базового класса. Например: на стандартный вывод лога в файл можно навесить декораторы отправляющий данные по почте, в телеграм, в слак. Причем повесить можно динамически в любой комбинации. 2. Фасад. Описана скорее Фабрика. Пример фасада: вы берете некую библиотеку (например компрессия видео) в которой милион методов, параметров и т.п. Но вам это все не нужно, поэтому вы делаете фасад с одним методом compress(filename, format) и уже внутри настраиваете сжатие или даже выполняете его в несколько проходов. 3. Flyweight. Здесь автор на верном пути, но пример не показывает самого главного - паттерн нужен для экономии памяти. Пример: нужно отобразить большой список автомобилей (объект Car) и рядом с каждой отобразить логотип. Логотип - это картинка, которая повторяется у разных объектов, но при этом занимает больше всего памяти. И вот картинку и нужно выделить из Car и хранить отдельно и уникально. Тогда отображая даже тысячу объектов нам возможно придется хранить только 1-2 картинки. 4. Chain of Responsibility. Тут автор дал маху и описал Method chaining, ничего общего с заявленным паттерном не имеющий. 5. Command. Похоже что автор вывернул шаблон на изнанку... :) т.к. обычно объект вызывает команду, а не команда объект. Смысл паттерна в том, чтобы унифицировать интерфейс команды и облегчить динамическое связывание объектов с разными командами. Например: ajax сохранение документа (как в Google Docs) можен происходить по нажатию на кнопку, по комбинации клавиш и по таймеру. Все эти элементы связываются с одной командой и вызывают ее метод execute. Таким образом алгоритм сохранения находится в одном месте - в команде. Но главное - нет никаких трудностей в присоединении этой же команды, например, к жесту мышью (gesture). 6. State. Здесь автор не решил проблему, а наоборот ее создал. Представим себе большое количество состояний, которые еще и меняются в зависимости от роли пользователя. Метод change сразу превращается в жестокий набор десятков if и даже хуже. Так вот паттерн State как-раз и предназначен решить создаваемую автором проблему. А решает он ее тем, что как-раз state определяет какое состояние будет следующим! Т.е. именно GreenLight должен решать какой свет будет после него и менять состояние светофора. Кстати, обратите внимание, что у автора после зеленого сигнала включается красный, хотя должен быть желтый. 7. Strategy. В целом автор все описал правильно, за исключение одного, однако же, принципиального момента: стратегия должна храниться внутри контекста (Commute). Здесь нужно понимать, что стратегия - это то, что выбирается и какое-то время используется в основном алгоритме. В нужно время стратегию можно изменить. Таким образом Commute как-раз и предназначен для того, чтобы вызвать стратегию, не упоминая ее саму (Commute.travel()). Тоесть в приложении будет всего несколько мест где стратегия будет выбираться или изменяться, во всех остальных (сотнях) мест мы вызываем ее опосредованно через контекст (Commute). И вот это как-раз и является целью данного паттерна. 8. Template. Такой поведенческий паттерн мне не известен, однако известен "Template Method". В данной части автор рассматривает простое наследование классов, не имеющее к поведенческим паттернам никакого отношения. Автору спасибо за возможность вспомнить и повторно проанализировать цели использования паттернов! :)

[@user-vn2nx1yq9e]

откуда автору то это знать?

[@user-rj8wt6mt3u]

@@user-vn2nx1yq9e А зачем рассказывать многотысячной аудитории, если не знаешь, что рассказываешь или не уверен в том, что рассказываешь правильно?

[@user-vn2nx1yq9e]

как зачем? а рекламу тогда куда пихать?@@user-rj8wt6mt3u

[@zmmr013]

Дай бог вам здоровья. Я думал я один идиот и не вдуплил почему фабрика и фасад в этом примере одно и тоже почти, темплейт просто обычное наследование и так далее. Только начинаю погружаться в особенности паттернов в js, трудно найти живые примеры. Вы в 1 комментарии объяснили часть вопросов, которые возникали в процессе видео. 👍

[@VladilenMinin]

Creational Design Patterns Constructor 4:57 Factory 10:15 Prototype 20:09 Singleton 23:31 Structural Design Patterns Adapter 29:09 Decorator 35:40 Façade 41:26 Flyweight 50:39 Proxy 57:15 Behavioral Design Patterns Chain of Responsibility 1:03:13 Command 1:06:58 Iterator 1:11:58 Mediator 1:18:24 Observer 1:26:00 State 1:36:15 Strategy 1:43:40 Template 1:47:30

[@denisdavydoff7863]

Ещё и тайминг сделал, вот ты машина

[@VladilenMinin]

@@denisdavydoff7863 Думаю с ними удобно)

[@user-ch76tcye4vvuu8]

Не понял в чем принципиальная разница между фабрикой и фасадом? И там и там создается и возвращается объект указанного типа (вместо класса).

[@SomeoneInNet]

@@user-ch76tcye4vvuu8 в данном видео - никакой.Вместо паттерна фасад была реализована фабрика.

[@user-tb2cb8xe2c]

Спасибо!!! Очень круто

[@maximminchenko7633]

Владилен! Выражающаю огромную признательность за твой труд! Лучший!

[@rostyslav5334]

Господи, СПАСИБО, Владилен!!!! Нету такого контента на ютубе!

[@VladilenMinin]

Я считаю важным свещать более продвинутые, тем не менее базовые темы)

[@NazarLesyuk]

@@VladilenMinin верно, продолжайте Владилен, я очень нуждался в объяснении патернов проектирования. Благодарю Вас!

[@bitmainuser4028]

да пздц, жлобы одни.

[@karodar]

К книге Швец А. "Погружение в паттерны проектирования", отличное дополнение

[@stanfarshtei1291]

refactoringDOTguru ----> Тут ВСЁ есть!!!!!!!!!! НО конечно, не так как у Владилена.

[@nikolai4100]

СПАСИБО, Владилен!!!! Прям супер как вовремя, все что нужно! Всех благ тебе

[@romanmelnichenko1365]

Такой объем информации лучше делить на части. Смотрел два дня )) Спасибо за труд!

[@demidovmaxim1008]

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

[@VladilenMinin]

Благодарю за такой отзыв. Дает понимание, что выбранный вектор корректен)

[@TakemuraGoro]

У него куча ошибок, не надо такому следовать.

[@igorkugaudo8212]

@@TakemuraGoro например?

[@TakemuraGoro]

@@igorkugaudo8212 Другая логика. В слушателе, он сделал какой-то узконаправленный код, который не универсальный. Ниже ссылка на вики, можно сравнить (внизу es6). С синглтоном вообще ужасное объяснение, слышал звон, не знает где он. Синглтон нужен, приминительно к бд (как у него), что бы не создавать лишних подключений. Про это ни слова. И так во всем. Код у него работает, конечно. но шаблоны - это прежде всего понимание задачи которую он решает, грамотное применение для оптимизации, не дублирования и так далее. ru.wikipedia.org/wiki/%D0%9D%D0%B0%D0%B1%D0%BB%D1%8E%D0%B4%D0%B0%D1%82%D0%B5%D0%BB%D1%8C_(%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F)

[@quantum-t]

zabut pro “runet” kak pro strawni son

[@lllltheollll]

спасибо огромное!!! давно ждал внятного разбора на эту тему

[@VladilenMinin]

Приятного просмотра)

[@dan.gorbunov]

Твоя продуктивность зашкаливает!)) Спасибо

[@jocoders6560]

Красавелла Владилен! Спасибо огромнейшее)))

[@user-vd9yw5ez3e]

Спасибо Владилен за твои титанические труды. Ты крут

[@alexanderzhalyuk8590]

Прекрасная работа! Спасибо огромное за проделанный труд!

[@user-fu2of6qz4j]

Обычно паттерны, это ты смотришь на статью и после нескольких строк кода отпадает желание читать. А изучить нужно) Здесь настолько очевидные примеры, написаные на es6, что инфа сама влетает в голову. Причем все подходы начинают казаться очевидными. Ловишь себя на мысле, что так логично делать. Правда, видео смотрел на 1.5 скорости, но это никак не минус) Спасибо!

[@alenalel1267]

УУу что-то очень годное подъехало, в прочем как обычно :3

[@user-xw4cw6pw2x]

Огромное спасибо за видео! Как всегда все четко, понятно и доступно! Удачи и успехов!

[@user-gi4gw2ys4b]

Видео от Владилена - это лучшей it контент на youtube! Спасибо!

[@steel1004]

Очередной годный ролик под конспект. спасибо бро!

[@egolege]

Огромное спасибо! Одна из самых основных тем, на мой взгляд.

[@user-wm1pw7oz9b]

Отличное видео! Такого подробного видео я не видел

[@user-yw5xf4cx2v]

Спасибо за видео! Будет здорово, если на канале появится видео про утечки памяти, особенно про то, как их отследить)

[@davidbaghdasaryan2486]

Вы лучший. 💪 Можно еще про Алгоритмы сортировки

[@CorleoneMikele]

Спасибо, круто, супер, продолжай в то же духе. 👍

[@editxvc]

то что мне так не хватало, спасибо

[@technical777]

Паттерны по программированию Constructor, Factory, Prototype, Singleton, Adapter, Decorator, Façade, Flyweight, Proxy, Chain of Responsibility, Command, Iterator, Mediator, Observer, State, Strategy, Template. Для меня это взрыв мозга, их нужно выучить или просто знать об их существовании, есть вещи которые просто не укладываются в голове. Владилен Спасибо Тебе.

[@igor_cojocaru]

Спасибо тебе. Очень нужная информация

[@viktopxio3739]

ТОП КОНТЕНТ!!! Благодарю!

[@madfish5605]

ещё не досмотрел видос, не успел. Но материал усваивается и понимается весьма не сложно. Спасибо, на досуге досмотрю до конца обязательно

[@VladilenMinin]

Обязательно досмотри)

[@user-zs6zn4tj9b]

Это очень качественное и нужное видео. Спасибо

[@ebanusssssi]

Владилен, это нереально полезный урок для меня. Спасибо огромное!

[@aleksey1965]

Владлен, у тебя талант! Смотрю только твои ролики, даже курс купил по Node JS)

[@ReAgent003]

Очень крутое видео, часто сюда заглядываю чтобы освежить знания, спасибо!

[@developer433]

Отличное полезное видео, спасибо! (пара ремарок по английскому: vehicle - читается как "Виикл", light - свет, цвет будет color)

[@braggamaffin]

Большое спасибо, очень нужное видео!

[@seoonlyRU]

чотко, спасибо))) с ходу жирный лайк от его величества кодера - СЕООНЛИ

[@yevgenylevin8381]

Супер контент Владилен ;)

[@OpalGooDog]

очень здорово!!!!Однозначно лайк и подписка!

[@doomymax577]

Спасибо тебе Владилен

[@user-nm9ch8ji7h]

Владилен, ты Бог Javascripta

[@johnbaretty9725]

Yo,Vladilen спасибо!

[@kirillgavrilov9681]

Как обычно, спасибо за видео) Но Chain of responsibility - это явно что-то другое. На мой взгляд, в этом видеоролике просто показан fluent API в классе MySum, основанный на method chaining

[@maksimmaliauka3026]

Круто) Очередной лайк.

[@user-ih4gb2bl8p]

Владилен, спасибо за видео! Интересно было бы про паттерны в React и Express (если таковые есть)

[@o.voytyn]

Спасибо за твои видео, на ютубе много курсов по базовому ЖС а вот по такому продвинотуму намного меньше (если вообще есть), продолжай делать такие видосики) и еще по продвинотому ангуляру (практикум какой то), спасибою

[@VladilenMinin]

По ангуляру в ближайшее время будет еще пара материалов)

[@dispeltr1183]

Владилен, лучший!!!

[@user-zb9qy9yc4b]

Я то думал, что это просто способы решения каких-то задач, а их паттернами назвали?) Спасибо, было интересно!

[@tuen8070]

паттерны - это и есть способы решения каких-то задач.

[@denisdavydoff7863]

Ну тут жирный лайк, очень хорошая работа!

[@VladilenMinin]

Благодарю)

[@AsVit]

Большое спасибо!!!

[@user-yj4wt8nr6v]

Интересно, спасибо за инфу!

[@mariashamonova6636]

Спасибо за полезные видео!)

[@moegreen8543]

Вы хорошо стартанули, Владилен. Если не остановитесь - через год Вы будете №1 на площадке KZbin IT Russian )

[@igixprffikiberg2636]

Круто Владилен

[@ek-wind]

Огромное спасибо за такой плезный контент! ПРОСЬБА: запиши видео по Reflect.

[@shilza8336]

Спасибо! Отличное видео

[@user-ee3zf7tn5d]

Огонь!

[@gazdhikhartumov1159]

Лучшее объяснение паттернов в рунете

[@karfagen86]

Эх, где ты был лет 6 назад, когда я этого ничего не понимал... :( Мне на фоне интересно было послушать, спасибо за видео!

[@VladilenMinin]

6 лет назад активно работал и сам узнавал про все это)

[@stanfarshtei1291]

@@VladilenMinin то-есть надо 6 лет что бы стать профи? :)

[@frizar999]

@@stanfarshtei1291 надо практика, а не время. важно сколько ты вкладываешь часов в свое дело, а не лет.

[@iGotton]

Как всегда топ

[@SlavaCh]

О, как и заказывал, благодарствую!)

[@igor_cojocaru]

Понравилось как в твоём IDE автоматом выводит название переданных параметров в функции. Если кому интересно как так сделать в VS Code просто установите расширение JS Parameter Annotations.

[@thisreal]

если нужно изменить цвет названия этих параметров под вашу тему: то просто в settings.json добавьте нужный цвет: "workbench.colorCustomizations": { "jsannotations.annotationForeground": "#697098" },

[@user-ye8zh3ep7m]

Все делает за вас редактор. Не понимаю почему это вам так нравится?

[@GracePeriod]

@@user-ye8zh3ep7m а тебе больше нравится печатать, чем программировать?

[@user-ye8zh3ep7m]

Больше нравится пользоватся нормальным редактором!

[@GracePeriod]

@@user-ye8zh3ep7m а нормальный это какой? Который не экономит твое время путем автокомплита?

[@DanReksar]

Спасибо) Желаю скорее набрать 10к)

[@vitaliytatarincev1915]

набрал)

[@321123580]

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

[@kirillbaryba746]

Спасибо, хорошая тема

[@DevOpsKaz]

Круто. Спасибо

[@user-pb8ut5lh6s]

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

[@evgenypershukov3228]

Спасибо! Особенно поржал про NaN)

[@cncinstaller6708]

Класс 👍

[@eydeveloper]

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

[@user-bx7ly2th3b]

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

[@powpowpow666]

просто лучший 👍👍👍👍👍👍 спасибо!) желаю обогнать Хауди Хо

[@sadr9189]

Красаучик!!! Супер!

[@oinn6216]

Спасибо за примеры.

[@user-uk3pc3kn3h]

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

[@dimalukashenko4865]

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

[@scorppetrovich8052]

Круто! Еще бы такой же урок по ООП в js es6 на примерах

[@VladilenMinin]

Есть ролик на канале

[@user-yx4ov2xx8s]

Топ! Спасибо

[@VladilenMinin]

Ребят, у кого выдает ошибку static list = { ^ SyntaxError: Unexpected token = Обновите версию NodeJS до последней

[@denisdavydoff7863]

не работает на посл версии, браузер говорит я дебил, bad method definition

[@user-ch76tcye4vvuu8]

@@denisdavydoff7863 В браузере и не должно работать.

[@pavelgramenitsky925]

день убил, чтобы понять почему не работает, огромное спасибо за коммент

[@fitnesshacker_]

Спасибо, помогло!

[@user-xo4hs5dm2d]

Тоже хотел спросить про этот момент: по спецификации ES6 через static определяются только методы, не свойства. Это новая спецификация или что? Явно не работает в стабильной ноде, зачем вы это используете?

[@egorpobylets6597]

Спасибо огромное!!!!!!!!!!!

[@The14Some1]

Chain of responsibility, показанный тут, на самом деле является паттерном под названием "Builder". "Chain of responsibility" сам по себе подразумевает, что у нас есть разные классы, совместно выполняющие какую-то сложную задачу, и реализован механизм передачи данных от одного класса к другому по мере обработки данных.

[@fortuna184]

спасибо большое за уроки

[@olgaibragimova3913]

Видео отличное! То, что нужно, для подготовки к собесу. Удивили комменты в стиле "а где точка с запятой?" "а не говорите нам 'господа'" - вы правда из видео только это смогли подчерпнуть?! а че не спрашиваете 'почему отступ в 2 пробела, а не 4' ? Владилен, терпения Вам и не терять мотивацию для создания нового контента. Ну, и 1000 лайков на 16000 просмотров - камон, ребята, вам лень нажать на "пальчик"? Будьте щедрее на лайки)))

[@mishagarkach]

Взрыв мозга, особенно медиатор поразил :)

[@user-mq1jj9zo5l]

СПАСИБО!

[@hub1347]

Эта тема настолько редкая, что заслуживает ЛайкШер даже без просмотра!

[@daniilukraine3611]

Думал смотреть долго , не буду ... Думал почитаю топ 10 паттернов и дело в шляпе , ну и примерчики посмотрю и все ... НО после первого паттерна я понял что нужно искать тетрадку и записывать все по его словам , потому что этот человек приводит жизненные примеры которые ну очень важны ! Удачи тебе Vladilen !

[@user-wr9iy6lo9r]

Спасибо большое за видео. Планирую курс по vue у вас приобрести.

[@fairplay6113]

материал просто супер, на вес золота, спасибо за работу! по BDD видео не планируется? на ютубе совсем по этой теме ничего нет, да и в рунете тоже.

[@user-ox4cx9uy5n]

Во Flyweight еще нужно использовать ограничение кеша до определенного размера, иначе можно сделать memory leak.

[@user-kg6fz5tz2b]

Спасибо!!!!!!!!!!!!!!!!!!!!!!!

[@Shkur777]

1:24:00 правильно произносить - Айгор :) На ускоренной не правильно можно услышать :)

[@user-rh8kr9cj6y]

Отличные уроки на темы которые давно надо было осветить в таком ключе. Такой контент беспорно очень тяжело готовить и объяснять. Я бы только предложил во время объяснения чего-либо давать чуть больше реальных примеров из жизни, где это можно было бы применить, давай больше кейсов чтоли. Такая проблема у всех, кто объясняет JS - часто примеры оторваны от реальности, пока сам 40 раз не напишешь - не поймешь. Т.е. я смотрю к примеру про прокси, да это круто и волшебно, но как встроить в текущую работу - не очень понятно. Тоже с паттернами, давно хотел ознакомится с ними подробнее и из видео к сожалению не очень понял, как мне здесь и сейчас использовать некоторые из них. А так все видео - 5 баллов и это лучший контент, что я видел на данную тему. На днях куплю курс по Fullstack разработке. Большое спасибо и успехов!

[@user-rh8kr9cj6y]

Было бы отлично увидеть паттерны для библиотек/фреймворков, начиная с Vue.js. Спасибо.

[@user-vs6bg3xn5s]

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

[@user-pk4hb7rl3k]

Отлично, доступно и интересно. Хотелось бы услышать Ваше экспертное мнение по поводу PWA-приложений. Их роль, перспективы ну и по возможности примерчик. Спасибо.

[@VladilenMinin]

Тему PWA буду отдельно освещать. Они сыроваты еще для полноценного использования из-за разных платформ и бразуеров

[@haiir025]

Лучший!

[@viktorzimmermann7813]

кстати было бы прикольно видео (там даже получилась бы серия видосов если многое охватывать) по алгоритмам и так же по юнит тестированию в частности Jest и Enzyme к примеру запилить... Народу понравилось бы точно

[@VladilenMinin]

Будет такой материал

[@iquz_intellectual_games]

круто, круто

[@Mamikonars]

спасибо

[@mukhammadrustambayev2051]

жду от вас видео про SOLID

[@romanleliuk773]

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

[@dustfellsans9705]

Владилен, спасибо огромное за данное видео, оно было очень полезно! Но у меня возник вопрос: является паттерн "модуль" в JS до сих пор актуальным? Ибо одни говорят о том, что ES6 решил эту проблему описанную в паттерне, другие говорят о том, что он до сих пор востребован. Хотелось услышать ваше мнение на этот счёт, заранее спасибо.

[@wildemax]

Спасибо за видео, полезноно! Но все же ; лучше ставить в конце команд, меньше ошибок будет! Это как книгу писать без разделительных знаков!

[@Snegurjan]

Так нравится ,что Сенсей нас называет "Господа"))))