Продвинутый javascript. Лучшие практики и шаблоны проектирования

Научись говорить на языке javascript

Привыкни к четкому code style и внедри

Не лезь в чужой монастырь…прими его правила

Понимай как работают js функции

Придерживайся хорошего тона

Пиши комментарии (jsDoc)
Используй цепные вызовы функций
Не создавай html на

Лучшие Javascript Style Guides

Google: http://google.github.io/styleguide/javascriptguide.xml
Airbnb: https://github.com/airbnb/javascript
Github: https://github.com/styleguide/javascript
Mozilla: https://goo.gl/HtFRDb

Организация кода и ООП

ООП в js - инкапсуляция, абстракция, насследование и

Инкапсуляция

Наследование и абстракция

Полиморфизм

Пиши поддерживаемый код !

Интуитивный
Понятный
Легко адаптируемый
Расширяемый
Отлаживаемый (debuggable)
Тестируемый (Jasmine, Karma)

Почему запариваемся над поддерживаемым

Потому что 80% времени мы поддерживаем код, а не пишем его!

Design Patterns (Шаблоны проектирования)
Убирают дублирование
Общая терминология
Быстрое взаимодействие
Генерируемые и переиспользуемые компоненты

Доказанные парадигмы.

Виды шаблонов

Пораждающие (Creational)
Constructor, Factory, Prototype, Singleton
Структурные (Structural)
Module, Decorator, Façade
-

АРХИТЕКТУРА СОВРЕМЕННОГО JS ПРИЛОЖЕНИЯ

2 парадигмы: MVC и поддерживаемая и расширяемая javascript

Паттерны MV*

Model-View-Controller (MVC)
Модель-представление-контроллер. Контроллер и представление зависят от модели

Model

View

Controller

Поддерживаемая и расширяемая javascript архитектура

- Независимые модули (Module)
- Ядро (Mediator)
-

В классическом случае по N.Zakas и Addy Osmani

Mediator (ядро) – Facade

Шаблон Module

- Инкапсулированная частичка приложения
- Взаимозаменяемая единичная часть большой системы, которая

Шаблон Module

Шаблон Module

- Все что после return, это - public methods. до

Современные модульные паттерны

Формат для написания модулей javascript в браузере (AMD -

Шаблон Facade

- позволяет скрыть сложность системы путем сведения всех возможных внешних

Шаблон Facade

Теперь можно использовать addMyEvent - даже не зная что внутри

Шаблон Mediator

- Глобальный диспетчер событий
Взаимодействие между модулями осуществляется путём посылки

https://github.com/aranm/scalable-javascript-architecture

https://github.com/aurajs/aura

http://scaleapp.org/

ПРОИЗВОДИТЕЛЬНОСТЬ, ПРОФИЛИРОВАНИЕ И ТЕСТИРОВАНИЕ

Оптимизируйте циклы. Уменьшайте количество итераций
в циклах.
Уменьшайте количество

Не забывай предохраняться! (безопасность)

Проверяй все получаемые данные
Используй безопасные HTTP заголовки
(чтобы браузер

USE THE SOURCE AND YOUR HEAD, LUKE!

Пользуйся документацией Mozilla Developer Network
Задавай

Спасибо за внимание!

И помните….
“Большой путь, маленькими шагами”

Чернобаев Николай. 2015