JavaScript design patterns overview
6 likes1,695 views
Документ представляет собой обзор паттернов проектирования в JavaScript, включая их классификацию на порождающие, структурные и поведенческие шаблоны. Обсуждаются преимущества и недостатки использования паттернов, а также описываются антипаттерны и советы по их внедрению в код. В заключение приводится литература для дальнейшего изучения темы.
JavaScript design patterns overview
- 2. Что такое паттерны? По словам Кристофера Александра, “любой паттерн описывает задачу, которая снова и снова возникает в нашей работе, а также принцип ее решения, причем таким образом, что это решение можно потом использовать миллион раз, ничего не изобретая заново”
- 3. Категории паттернов проектирования • Порождающие шаблоны (Creational) o Создание объектов • Структурные шаблоны (Structural) o Изменяют интерфейс и функциональность уже существующих объектов o Решают проблемы организации больших структур • Поведенческие шаблоны (Behavioral) o Взаимодействие объектов
- 4. Creational • Singleton o 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*
- 5. Недостатки • Нет подхода, определяющего, когда и как применять те или иные паттерны
- 6. Преимущества • Паттерны способствуют повторному использованию, решая общие проблемы дизайна • Применение паттернов облегчает документирование кода • Если программист знаком с паттернами, то ему будет легче поддерживать такой код
- 7. Антипаттерны 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
- 8. • Глобальные переменные • Передача строк в setTimeout() или setInterval() (это вызывает eval()) • Изменение прототипа Object • Внедрение JavaScript непосредственно в html код • document.write вместо document.createElement Антипаттерны
- 9. • The JavaScript Code Quality Tool • by Douglas Crockford • http://jslint.com o blocks and brackets if (a == b) { ... } o put break in switch after each case o use === instead of == o for (name in object) { if (object.hasOwnProperty(name)) { .... } } o The eval function is the most misused feature of JavaScript JSLint
- 11. Singleton Настоящий singleton работает так: var my1 = new Single(); var my2 = new Single(); >>> my1 === my2 true Но в JavaScript все не так просто
- 12. Singleton Проблема: Свойство instance - public
- 13. Singleton Замыкание (closure) • Внутренняя функция имеет доступ к переменным и аргументам внешней функции • Эти переменные существуют, пока существует ссылка на внутреннюю функцию
- 14. Singleton
- 15. Chaining шаблон цепочек Достоинства: • Компактный код • Маленькие функции Недостатки: • Код сложнее в отладке Роберт Мартин (“Clean Code”): «Крушение поезда»
- 17. Модуль • Использует парадигму Singleton • Использует замыкания и самовызывающиеся функции (IIFE) • Не засоряет глобальное пространство имен • Поддерживает приватные данные • Хорошо масштабируется по мере роста приложения “Anything can be defined as a reusable module” - Zakas.
- 18. Immediately-invoked function expression самовызывающиеся функции (function () { // all vars and functions are in this scope only // and access to all globals }()); Преимущество: ничто не глобально Проблема: это анонимный модуль – нет доступа снаружи (callbacks, обработчики событий)
- 20. Revealing Module Pattern шаблон открытия модуля Модификация модуля, когда все методы являются частными, а в конце определения модуля принимается решение, каким из них следует стать общедоступными
- 22. Фабрика • Выполнение повторяющихся операций, необходимых при создании похожих объектов • Способ создания объектов без необходимости знать их тип (класс)
- 23. Фабрика
- 25. Фасад • Фасад делает нашу жизнь проще • Сложную логику легко скрыть за фасадными методами • Удобен для реализации кроссбраузерных решений
- 26. Фасад
- 27. MV*: MVC, MVP, MVVM MVC
- 28. MV* MVP Presenter извлекает данные из Модели и форматирует их для отображения в Виде. Все взаимодействие проходит только через Presenter MVVM Модель вида (ViewModel) • Команды для Вида, чтобы влиять на Модель • обертка данных из Модели, которые подлежат связыванию (data binding)
- 29. Популярные паттерны • Mixin • Observer/PubSub • Mediator • Decorator
- 30. Полезные советы “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.
- 31. Литература • JavaScript Patterns by Stoyan Stefanov • JavaScript: The Good Parts by Douglas Crockford • Writing Maintainable JavaScript by Nicholas Zakas • 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
- 32. Спасибо за внимание! Ксения Редунова @Katidotk