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

ты что фабрикой синглтон реализуешь?))) ууууу, нормально так настроение поднял инфоциган =)

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

а разве тут показана фабрика? по мне это выглядит как абстрактная фабрика, а это немного другое

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

facade очень странно реализован. Вообще не понял, что это и зачем.
мы создали класс с методом, который создаёт экземпляры классов-списков жалоб разных типов, в каждом из которых по одной жалобе. При каждом вызове этого метода будет создаваться новый экземпляр класса-списка жалоб, в который будет добавляться одна жалоба. При повторном вызове фасада с тем же типом жалобы опять создастся ещё один экземпляр списка, куда добавится одна единственная жалоба.

Почему в паттерне Constructor не сделать static create() ? Зачем создавать new MemberFactory ? )

Можете допомогти,а принцип open-close не нарушається патерном factory,ми ж порушимо незмінну класу при добавлении нового класа?

СПАСИБО!

Не уверен в правильности примеров цепочки ответственности и фасаде.

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

@Владилен Минин
JavaScript и OOP? Серьёзно? Если нет нормального OOP, то нет и паттернов. Я ещё бы понял Typescript, но не JS.

Спасибо Владилен! Чтобы не открывать Википедию на слове "инфлюментированы", пожалуйста говори эти слова "по-русски", ну или поясни сразу что это значит. Спасибо.

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

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

Есть несколько спорных моментов в понимании автором паттернов:
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". В данной части автор рассматривает простое наследование классов, не имеющее к поведенческим паттернам никакого отношения.
Автору спасибо за возможность вспомнить и повторно проанализировать цели использования паттернов! :)

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

господи, у меня флешбэки войны во Вьетнаме при виде отсувствующих ;

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

Yo,Vladilen спасибо!

Не очень понимаю разницу между factory и facad

Шаблон итератор: хранить индекс в объекте нельзя. Надо хранить в замыкании, т.е. создавать переменную в функции [Symbol.iterator].
Иначе, если остановить перебор или вставить перебор в перебор, то объект будет перебираться не с начала. А каждый перебор должен быть одинаковым.

попыталась в codesandbox воспроизвести пример с фабрикой, static list = {...} выдает ошибку - Support for the experimental syntax 'classProperties' isn't currently enabled.

В шаблоне проектирования Адаптер не будет ли проще сделать NewCalc extends OldCalc, или это простой пример, и в реальности этого не применить?

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

static list = {
simple: SimpleMembership,
standard: StandardMembership,
premium: PremiumMembership
} а почему у меня выдает ошибку Parsing error: Unexpected token =

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

Хорошее толкование.

извините, но это 17 примеров, как простой код превратить в нарочито нечитаемое ООП :( при этом часть из них ещё нарушает принципы иммутабельности. Увы, большая часть этих паттернов устарела для JS

есть функции высшего порядка, а есть декораторы, вопрос на засыпку: в чем разница?

Лол, template это просто сам по себе смысл наследования, а не паттерн

Много времени просто под диктовку пишешь код, видео раза в два как минимум можно было бы сократить

Владилен, если не секрет где ты работаешь? Фрилансишь на апворке или в компании. B сколько ты зарабатываешь в месяц? Просто интересно))) И сколько лет ты уже в программировании? Хочу просто понять сколько нужно потратить лет чтобы иметь такой опыт и сколько можно зарабатывать в перспективе

Владилен, а насколько часто на работе приходится ими пользоваться? Ты показал достаточно много паттернов, значит, ты ими пользовался в реальной разработке?

Бездумное дублирование примеров с добавлением в них ошибок, которые искажают основополагающие идеи паттерна. К примеру в случае с декоратором, вы нарушаете идею сохранения интерфейса, так как если подменить обертку, то ваш клиентский код упадет, а это основа - динамическое добавление новой функциональности оборачиваемому объекту

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

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

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

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

Добрый день, отличный урок, может еще что-то вроде PRPL?

А может кто-нибудь объяснить разницу между Facade и Factory? Т.е. если мы в первый просто занесём тот список ссылок на классы, то по сути получится именно фабрика, которая собственно проще воспринимается и поддерживается, разве нет?

Владилен, сделайте на канале кнопку спонсора, думаю что вам приятно периодически получать донаты.

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

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

уже год почти, или даже год, как знаком с js, работаю с ним, изучаю глубоко все. сегодня уже пишу и на python, мгновенно его освоил. знаком с php, было джело, на джуна задачи могу сделать. сегодня я понимаю какую боль испытывают те, кто работает с js, именно программисты а не разработчики которые только одну библиотеку или фреймворк знают, и то только поверхностно, как там все внутри не знают. в js столько лишних движений... библиотеки сделаны не продуманно, а лишь вот под задачу что была нужны на тот момент. много нагромождения, мусора... вроде у тебя есть несколько десятков вариантов решить одну задач, но все они через одно место... js, это очень сложный яп!!! учить его первым, я бы крайне не рекомендовал! python тоже не легок, когда ты перестаешь писать мусоро код, квак и php. но python и php, реально учат кодить. а js скорее учит говнокодить.))) столько подводных камней в js... чем дальше, чем страшнее.)))) теперь я понимаю, почему фронтов не считают программистами. потому что 99% фронтов, не разбираются в проблемах, а просто ищут готовые решения, вставляют и та сойдет. фронты учат js на примитивном уровне, сразу идут на фреймворк или библиотеку, ам уже за них подумали, все решили, только вставляй готовые решения и норм будет. инженеров, там почти нет. даже на юту, 99.9% мусоро интенсивов! только Владилен и еще пару человек пишут реально годное... тот же python, не позволит писать мусор, мы рууки сломаете просто на ровно месте.)) поэтому по ем только мелкие решения на 15 минут видео. мне на днях скинули задачку на собеседовании, суть в том, что нельзя использовать математические методы js, пишем все на примитивном уровне... я был готов написать это на hp и python, только не на js, ибо там столько головняка можно получить, что жесть. хахаха задача примитивная, решается пару строк если не ограничить тебя примитивностью. js лучше преподавать, чем на нем писать. хахаха

Запуск срипта в консоле, для VScode Ctrl + Alt + N если кто не знал.))) это в винде. да, там еще выводит с какой скорость выполнился скрипт.

получается, что HOC из реакта это декоратор

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

Всё вроде бы ОК, но после паттерна "Mediator" мой мозг залип в "рекурсии"..