javascript design patterns overview by ksenia redunova
TRANSCRIPT
![Page 1: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/1.jpg)
JavaScript Design Patterns overview
Ксения Редунова
![Page 2: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/2.jpg)
Шаблоны проектирования
Зачем они нужны?
“In my view, large-scale JavaScript apps are nontrivial
applications requiring significant developer
effort to maintain, where most heavy lifting of data
manipulation and display falls to the browser.”
- Addy Osmani
![Page 3: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/3.jpg)
Что такое паттерны?
По словам Кристофера Александра,
“любой паттерн описывает задачу, которая снова и снова возникает в нашей работе, а также принцип ее решения, причем таким образом, что это решение можно потом использовать миллион раз, ничего не изобретая заново”
![Page 4: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/4.jpg)
Категории паттернов
Порождающие шаблоны (Creational)Создание объектов
Структурные шаблоны (Structural)Изменяют интерфейс и функциональность уже
существующих объектовРешают проблемы организации больших структур
Поведенческие шаблоны (Behavioral)Взаимодействие объектов
![Page 5: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/5.jpg)
CreationalSingleton
Module
Factory
Abstract factory
Builder
Prototype
Lazy initialization
Multiton
Object pool
RAII
Structural
• Facade
• Decorator
• Adapter
• Bridge
• Composite
• Front Controller
• Flyweight
• Proxy
Behavioral
• Observer (Pub/Sub)
• Mediator
• Iterator
• Chain of responsibility
• Command
• Interpreter
• Memento
• Servant
• Strategy
• …MV*
![Page 6: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/6.jpg)
Недостатки
Нет подхода, определяющего, когда и как применять те или иные паттерны
![Page 7: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/7.jpg)
Преимущества
Паттерны способствуют повторному использованию, решая общие проблемы дизайна
Применение паттернов облегчает документирование кода
Если программист знаком с паттернами, то ему будет легче поддерживать такой код
![Page 8: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/8.jpg)
Антипаттерны
Andrew Koenig (1995):
Describe a bad solution to a particular problem which resulted in a bad situation occurring
Describe how to get out of said situation and how to go from there to a good solution
![Page 9: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/9.jpg)
Антипаттерны
Глобальные переменные
Передача строк в setTimeout() или setInterval() (это вызывает eval())
Изменение прототипа Object
Внедрение JavaScript непосредственно в html код
document.write вместо document.createElement
![Page 10: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/10.jpg)
Singleton
var mySingleton = {};
![Page 11: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/11.jpg)
Настоящий singleton работает так:
var my1 = new Single();
var my2 = new Single();
>>> my1 === my2
true
Но в JavaScript все не так просто ☺
Singleton
![Page 12: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/12.jpg)
Проблема: Свойство instance - public
Singleton
![Page 13: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/13.jpg)
• Внутренняя функция имеет доступ к переменным и аргументам внешней функции
• Эти переменные существуют, пока существует ссылка на внутреннюю функцию
Замыкание (closure)
![Page 14: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/14.jpg)
14
![Page 15: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/15.jpg)
Достоинства:
Компактный код
Маленькие функции
Недостатки:
Код сложнее в отладке
Роберт Мартин (“Clean Code”): «Крушение поезда»
Chaining
![Page 16: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/16.jpg)
Chaining
![Page 17: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/17.jpg)
Использует парадигму Singleton
Использует замыкания и самовызывающиеся функции (IIFE)
Не засоряет глобальное пространство имен
Поддерживает приватные данные
Хорошо масштабируется по мере роста приложения
“Anything can be defined as a reusable module”
- Zakas.
Module
![Page 18: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/18.jpg)
(function () {
// all vars and functions are in this scope only
// and access to all globals
}());
Преимущество: ничто не глобально
Проблема: это анонимный модуль – нет доступа снаружи (callbacks, обработчики событий)
IIFE
![Page 19: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/19.jpg)
Импортируем глобальные переменные
Расширяем модуль
Module
![Page 20: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/20.jpg)
Модификация модуля, когда все методы являются частными, а в конце определения модуля
принимается решение, каким из них следует стать общедоступными
Revealing Module Pattern
![Page 21: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/21.jpg)
21
![Page 22: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/22.jpg)
Фабрика
Выполнение повторяющихся операций, необходимых при создании похожих объектов
Способ создания объектов без необходимости знать их тип (класс)
![Page 23: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/23.jpg)
Фабрика
![Page 24: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/24.jpg)
Конструктор Object()
![Page 25: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/25.jpg)
Фасад
Фасад делает нашу жизнь проще
Сложную логику легко скрыть за фасадными методами
Удобен для реализации кроссбраузерных решений
![Page 26: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/26.jpg)
Фасад
![Page 27: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/27.jpg)
Pub/Sub
Backbone Events
onoff
trigger
_.extend(object, Backbone.Events);
27
![Page 28: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/28.jpg)
Pub/Sub
28
![Page 29: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/29.jpg)
MV*: MVC, MVP, MVVM
MVC
![Page 30: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/30.jpg)
MV*
MVPPresenter извлекает данные из Модели и форматирует их для отображения в Виде
MVVMМодель вида (ViewModel, что означает «Model of View») Команды, которыми может пользоваться Вид,
чтобы влиять на Модель обертку данных из Модели, которые подлежат
связыванию
![Page 31: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/31.jpg)
Полезные советы
“The secret to building large apps is never build large
apps. Break your applications into small pieces. Then,
assemble those testable, bite-sized pieces into your
big application” - Justin Meyer.
“The more tied components are to each other, the less reusable they will be, and the more difficult it
becomes to make changes to one without accidentally affecting another” - Rebecca Murphey.
![Page 32: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/32.jpg)
Литература
JavaScript Patterns by Stoyan Stefanov
Writing Maintainable JavaScript by Nicholas Zakas
Learning JavaScript Design Patterns by Addy Osmani
Patterns for Large-Scale JavaScript Application Architecture by Addy Osmani
Learning JavaScript Design Patterns by Addy Osmani
http://jsdesignpatterns.com
http://shichuan.github.io/javascript-patterns/
and many more
![Page 33: JavaScript Design Patterns overview by Ksenia Redunova](https://reader034.vdocuments.us/reader034/viewer/2022042818/55ae07851a28abbb788b4669/html5/thumbnails/33.jpg)
Ксения Редунова
Thank You!