JavaScript Design Patterns overview by Ksenia Redunova

1. JavaScript Design Patterns
overview
Ксения Редунова

2. Шаблоны проектирования
Зачем они нужны?
“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

3. Что такое паттерны?
По словам Кристофера Александра,
“любой паттерн описывает задачу, которая снова и снова
возникает в нашей работе, а также принцип ее решения,
причем таким образом, что это решение можно потом
использовать миллион раз, ничего не изобретая заново”

4. Категории паттернов
Порождающие шаблоны (Creational)
Создание объектов
Структурные шаблоны (Structural)
Изменяют интерфейс и функциональность уже
существующих объектов
Решают проблемы организации больших структур
Поведенческие шаблоны (Behavioral)
Взаимодействие объектов

5. Creational
Singleton
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*

6. Недостатки
Нет подхода, определяющего, когда и как
применять те или иные паттерны

7. Преимущества
Паттерны способствуют повторному использованию, решая
общие проблемы дизайна
Применение паттернов облегчает документирование кода
Если программист знаком с паттернами, то ему будет легче
поддерживать такой код

8. Антипаттерны
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

9. Антипаттерны
Глобальные переменные
Передача строк в setTimeout() или setInterval() (это вызывает
eval())
Изменение прототипа Object
Внедрение JavaScript непосредственно в html код
document.write вместо document.createElement

10. Singleton
var mySingleton = {};

11. Настоящий singleton работает так:
var my1 = new Single();
var my2 = new Single();
>>> my1 === my2
true
Но в JavaScript все не так просто ☺
Singleton

12. Проблема: Свойство instance - public
Singleton

13. • Внутренняя функция имеет доступ к переменным и
аргументам внешней функции
• Эти переменные существуют, пока существует ссылка на
внутреннюю функцию
Замыкание (closure)

14. 14

15. Достоинства:
Компактный код
Маленькие функции
Недостатки:
Код сложнее в отладке
Роберт Мартин (“Clean Code”): «Крушение поезда»
Chaining

16. Chaining

17. Использует парадигму Singleton
Использует замыкания и самовызывающиеся функции (IIFE)
Не засоряет глобальное пространство имен
Поддерживает приватные данные
Хорошо масштабируется по мере роста приложения
“Anything can be defined as a reusable module”
- Zakas.
Module

18. (function () {
// all vars and functions are in this scope only
// and access to all globals
}());
Преимущество: ничто не глобально
Проблема: это анонимный модуль – нет доступа снаружи (callbacks,
обработчики событий)
IIFE

19. Импортируем глобальные переменные
Расширяем модуль
Module

20. Модификация модуля, когда все методы являются
частными, а в конце определения модуля
принимается решение, каким из них следует стать
общедоступными
Revealing Module Pattern

21. 21

22. Фабрика
Выполнение повторяющихся операций, необходимых при
создании похожих объектов
Способ создания объектов без необходимости знать их тип
(класс)

23. Фабрика

24. Конструктор Object()

25. Фасад
Фасад делает нашу жизнь проще 
Сложную логику легко скрыть за фасадными
методами
Удобен для реализации кроссбраузерных
решений

26. Фасад

27. Pub/Sub
Backbone Events
on
off
trigger
_.extend(object, Backbone.Events);
27

28. Pub/Sub
28

29. MV*: MVC, MVP, MVVM
MVC

30. MV*
MVP
Presenter извлекает данные из Модели и
форматирует их для отображения в Виде
MVVM
Модель вида (ViewModel, что означает «Model of
View»)
Команды, которыми может пользоваться Вид,
чтобы влиять на Модель
обертку данных из Модели, которые подлежат
связыванию

31. Полезные советы
“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.

32. Литература
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 

33. Ксения Редунова
Thank You!