JavaScript Паттерны. Шаблоны проектирования. 17 Примеров
HTML-код
- Опубликовано: 5 июн 2024
- Эксклюзивный контент на моем 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
Эксклюзивный контент на моем Boosty: boosty.to/vladilen
Есть несколько спорных моментов в понимании автором паттернов:
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
Дай бог вам здоровья. Я думал я один идиот и не вдуплил почему фабрика и фасад в этом примере одно и тоже почти, темплейт просто обычное наследование и так далее. Только начинаю погружаться в особенности паттернов в js, трудно найти живые примеры. Вы в 1 комментарии объяснили часть вопросов, которые возникали в процессе видео. 👍
Господи, СПАСИБО, Владилен!!!!
Нету такого контента на ютубе!
Я считаю важным свещать более продвинутые, тем не менее базовые темы)
@@VladilenMinin верно, продолжайте Владилен, я очень нуждался в объяснении патернов проектирования. Благодарю Вас!
да пздц, жлобы одни.
К книге Швец А. "Погружение в паттерны проектирования", отличное дополнение
refactoringDOTguru ----> Тут ВСЁ есть!!!!!!!!!! НО конечно, не так как у Владилена.
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 Думаю с ними удобно)
Не понял в чем принципиальная разница между фабрикой и фасадом? И там и там создается и возвращается объект указанного типа (вместо класса).
@@user-ch76tcye4vvuu8 в данном видео - никакой.Вместо паттерна фасад была реализована фабрика.
Спасибо!!! Очень круто
Владилен! Выражающаю огромную признательность за твой труд! Лучший!
СПАСИБО, Владилен!!!! Прям супер как вовремя, все что нужно! Всех благ тебе
Такой объем информации лучше делить на части. Смотрел два дня ))
Спасибо за труд!
В топ видео. Один из лучших преподавателей на мой сугубо личный взгляд, на просторах рунета. Огромное спасибо.
Благодарю за такой отзыв.
Дает понимание, что выбранный вектор корректен)
У него куча ошибок, не надо такому следовать.
@@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)
zabut pro “runet” kak pro strawni son
спасибо огромное!!!
давно ждал внятного разбора на эту тему
Приятного просмотра)
Спасибо Владилен за твои титанические труды. Ты крут
Видео от Владилена - это лучшей it контент на youtube! Спасибо!
Паттерны по программированию Constructor, Factory, Prototype, Singleton, Adapter, Decorator, Façade, Flyweight, Proxy, Chain of Responsibility, Command, Iterator, Mediator, Observer, State, Strategy, Template.
Для меня это взрыв мозга, их нужно выучить или просто знать об их существовании, есть вещи которые просто не укладываются в голове.
Владилен Спасибо Тебе.
УУу что-то очень годное подъехало, в прочем как обычно :3
Обычно паттерны, это ты смотришь на статью и после нескольких строк кода отпадает желание читать.
А изучить нужно)
Здесь настолько очевидные примеры, написаные на es6, что инфа сама влетает в голову.
Причем все подходы начинают казаться очевидными. Ловишь себя на мысле, что так логично делать.
Правда, видео смотрел на 1.5 скорости, но это никак не минус)
Спасибо!
Огромное спасибо! Одна из самых основных тем, на мой взгляд.
Прекрасная работа! Спасибо огромное за проделанный труд!
Спасибо за видео! Будет здорово, если на канале появится видео про утечки памяти, особенно про то, как их отследить)
Огромное спасибо за видео! Как всегда все четко, понятно и доступно! Удачи и успехов!
Очередной годный ролик под конспект. спасибо бро!
Красавелла Владилен! Спасибо огромнейшее)))
Твоя продуктивность зашкаливает!)) Спасибо
Отличное видео! Такого подробного видео я не видел
Владилен, это нереально полезный урок для меня. Спасибо огромное!
ещё не досмотрел видос, не успел. Но материал усваивается и понимается весьма не сложно. Спасибо, на досуге досмотрю до конца обязательно
Обязательно досмотри)
Владлен, у тебя талант! Смотрю только твои ролики, даже курс купил по Node JS)
то что мне так не хватало, спасибо
чотко, спасибо))) с ходу жирный лайк от его величества кодера - СЕООНЛИ
Спасибо, круто, супер, продолжай в то же духе. 👍
Спасибо тебе. Очень нужная информация
Вы лучший. 💪
Можно еще про Алгоритмы сортировки
Очень крутое видео, часто сюда заглядываю чтобы освежить знания, спасибо!
ТОП КОНТЕНТ!!! Благодарю!
Отличное полезное видео, спасибо! (пара ремарок по английскому: vehicle - читается как "Виикл", light - свет, цвет будет color)
Chain of responsibility, показанный тут, на самом деле является паттерном под названием "Builder". "Chain of responsibility" сам по себе подразумевает, что у нас есть разные классы, совместно выполняющие какую-то сложную задачу, и реализован механизм передачи данных от одного класса к другому по мере обработки данных.
Супер контент Владилен ;)
Владилен, спасибо за видео!
Интересно было бы про паттерны в React и Express (если таковые есть)
Это очень качественное и нужное видео. Спасибо
Понравилось как в твоём IDE автоматом выводит название переданных параметров в функции. Если кому интересно как так сделать в VS Code просто установите расширение JS Parameter Annotations.
если нужно изменить цвет названия этих параметров под вашу тему:
то просто в settings.json добавьте нужный цвет:
"workbench.colorCustomizations": {
"jsannotations.annotationForeground": "#697098"
},
Все делает за вас редактор. Не понимаю почему это вам так нравится?
@@user-ye8zh3ep7m а тебе больше нравится печатать, чем программировать?
Больше нравится пользоватся нормальным редактором!
@@user-ye8zh3ep7m а нормальный это какой? Который не экономит твое время путем автокомплита?
Как обычно, спасибо за видео)
Но Chain of responsibility - это явно что-то другое. На мой взгляд, в этом видеоролике просто показан fluent API в классе MySum, основанный на method chaining
Большое спасибо, очень нужное видео!
Эх, где ты был лет 6 назад, когда я этого ничего не понимал... :(
Мне на фоне интересно было послушать, спасибо за видео!
6 лет назад активно работал и сам узнавал про все это)
@@VladilenMinin то-есть надо 6 лет что бы стать профи? :)
@@stanfarshtei1291 надо практика, а не время. важно сколько ты вкладываешь часов в свое дело, а не лет.
Спасибо тебе Владилен
Yo,Vladilen спасибо!
Вы хорошо стартанули, Владилен. Если не остановитесь - через год Вы будете №1 на площадке RUclips IT Russian )
Интересно, спасибо за инфу!
Спасибо за полезные видео!)
очень здорово!!!!Однозначно лайк и подписка!
Большое спасибо!!!
Я то думал, что это просто способы решения каких-то задач, а их паттернами назвали?)
Спасибо, было интересно!
паттерны - это и есть способы решения каких-то задач.
Спасибо за твои видео, на ютубе много курсов по базовому ЖС а вот по такому продвинотуму намного меньше (если вообще есть), продолжай делать такие видосики) и еще по продвинотому ангуляру (практикум какой то), спасибою
По ангуляру в ближайшее время будет еще пара материалов)
Огромное спасибо за такой плезный контент! ПРОСЬБА: запиши видео по Reflect.
владилен часто в твоих видео встречаю "создаем что-то и оно будет стейтом...", вот хочется как-то по проще что ли, ну и было бы практичнее если бы ты разбирал на более живых примерах, в духе при работе в домом, но опять же на твой вкус и такие голые примеры тоже очень полезны, спасибо за контент)
Круто Владилен
Ну тут жирный лайк, очень хорошая работа!
Благодарю)
Владилен, лучший!!!
Спасибо! Отличное видео
Огонь!
Это очень круто, но хотелось бы более реальные примеры использования этих паттернов.
Никто не знает с чем столкнется в реальности. Все примеры уникальные, по опыту скажу, что далеко не всегда реальный пример может помочь в дальнейшем. Среди проектов куча легаси и костылей. Так что такие примеры как бальзам на душу.
Владилен, ты Бог Javascripta
Круто) Очередной лайк.
Спасибо, хорошая тема
Спасибо за видео, очень полезно
Очень полезно для меня, как раз собирался изучить теорию по паттернам и затем практиковаться с одним проектом. Начал смотреть на другом канале, но проблема в том, что примеры слишком упрощённые и не понятно, где многие шаблоны вообще можно использовать. Спасибо за полезные видео.
как новичок, могу сказать, что лично мне в данном видео тоже нихера не понятно, как это все может быть использовано в реальности.
Зачем создавать 3 класса, а потом создавать 4й, который будет разруливать косяки первых трех, если ... можно было изначальн сделать просто 1 нормальный класс?))
Зачем мутить какую-то дичь с observer, чтобы плюсануть циферку на 1?
Круто. Спасибо
Спасибо) Желаю скорее набрать 10к)
набрал)
О, как и заказывал, благодарствую!)
Спасибо за примеры.
Ребят, у кого выдает ошибку
static list = {
^
SyntaxError: Unexpected token =
Обновите версию NodeJS до последней
не работает на посл версии, браузер говорит я дебил, bad method definition
@@denisdavydoff7863 В браузере и не должно работать.
день убил, чтобы понять почему не работает, огромное спасибо за коммент
Спасибо, помогло!
Тоже хотел спросить про этот момент: по спецификации ES6 через static определяются только методы, не свойства. Это новая спецификация или что? Явно не работает в стабильной ноде, зачем вы это используете?
Класс 👍
Спасибо огромное!!!!!!!!!!!
Спасибо большое за видео.
Планирую курс по vue у вас приобрести.
Круто! Еще бы такой же урок по ООП в js es6 на примерах
Есть ролик на канале
спасибо большое за уроки
Видео отличное! То, что нужно, для подготовки к собесу. Удивили комменты в стиле "а где точка с запятой?" "а не говорите нам 'господа'" - вы правда из видео только это смогли подчерпнуть?! а че не спрашиваете 'почему отступ в 2 пробела, а не 4' ?
Владилен, терпения Вам и не терять мотивацию для создания нового контента.
Ну, и 1000 лайков на 16000 просмотров - камон, ребята, вам лень нажать на "пальчик"? Будьте щедрее на лайки)))
материал просто супер, на вес золота, спасибо за работу! по BDD видео не планируется? на ютубе совсем по этой теме ничего нет, да и в рунете тоже.
Думал смотреть долго , не буду ... Думал почитаю топ 10 паттернов и дело в шляпе , ну и примерчики посмотрю и все ... НО после первого паттерна я понял что нужно искать тетрадку и записывать все по его словам , потому что этот человек приводит жизненные примеры которые ну очень важны ! Удачи тебе Vladilen !
СПАСИБО!
Спасибо! Особенно поржал про NaN)
Владилен, спасибо огромное за данное видео, оно было очень полезно! Но у меня возник вопрос: является паттерн "модуль" в JS до сих пор актуальным? Ибо одни говорят о том, что ES6 решил эту проблему описанную в паттерне, другие говорят о том, что он до сих пор востребован. Хотелось услышать ваше мнение на этот счёт, заранее спасибо.
Как всегда топ
круто, круто
Топ! Спасибо
Отличные уроки на темы которые давно надо было осветить в таком ключе. Такой контент беспорно очень тяжело готовить и объяснять. Я бы только предложил во время объяснения чего-либо давать чуть больше реальных примеров из жизни, где это можно было бы применить, давай больше кейсов чтоли.
Такая проблема у всех, кто объясняет JS - часто примеры оторваны от реальности, пока сам 40 раз не напишешь - не поймешь.
Т.е. я смотрю к примеру про прокси, да это круто и волшебно, но как встроить в текущую работу - не очень понятно. Тоже с паттернами, давно хотел ознакомится с ними подробнее и из видео к сожалению не очень понял, как мне здесь и сейчас использовать некоторые из них. А так все видео - 5 баллов и это лучший контент, что я видел на данную тему. На днях куплю курс по Fullstack разработке. Большое спасибо и успехов!
Было бы отлично увидеть паттерны для библиотек/фреймворков, начиная с Vue.js. Спасибо.
Во Flyweight еще нужно использовать ограничение кеша до определенного размера, иначе можно сделать memory leak.
Красаучик!!! Супер!
Лучшее объяснение паттернов в рунете
Владилен здравсвуйте, подскажите пожалуйста, что бы посоветовали почитать по основам ООП в контексте JS. Я Сейчас как раз на стадии изучения классов и прототипов, далее в планах React. Спасибо
спасибо
Эта тема настолько редкая, что заслуживает ЛайкШер даже без просмотра!
Добрый день, а почему на 43:14 вы создаете метод (reply) заглушку, может лучше в методе add обернуть вызов метода reply в конструкцию try/catch ?
1:24:00 правильно произносить - Айгор :)
На ускоренной не правильно можно услышать :)
Ну как теория для собеседования сойдет, практический новичку будет нереально сложно понять где какой из этих паттернов использовать и как их использовать. Можно снять получасовое видео по самым наиболее популярным паттернам с использованием в разработке какого нибудь приложения. Вот идея для видео
Спасибо за видео, в процессе возник вопрос, является ли пример с фасадом еще и фабрикой?
Отлично, доступно и интересно. Хотелось бы услышать Ваше экспертное мнение по поводу PWA-приложений. Их роль, перспективы ну и по возможности примерчик. Спасибо.
Тему PWA буду отдельно освещать. Они сыроваты еще для полноценного использования из-за разных платформ и бразуеров
Спасибо!!!!!!!!!!!!!!!!!!!!!!!
Очень вскользь, хотелось бы поподробней, с несколькими примерами. Либо хотя бы больше уточнений, например какие бывают декораторы, что декорировать можно не только класс. Но в целом очень круто, ничего подобного на русском не видел.
Можете навести примеры шде и как можно использовать эти патерны в контексте разработки на React?
просто лучший 👍👍👍👍👍👍
спасибо!)
желаю обогнать Хауди Хо
Я второй раз посомтрел. Понял что зп 100к как в примере для такого программиста как вы это мало)
Все ок, Единственное, просьба или уменьшить шрифт кода, или в качестве резюме показать весь код