Архитектура JS API Яндекс.Карт: от версии 1.1 к 2.0 Сергей Константинов, руководитель группы разработки алгоритмов API Яндекс.Карт

Я расскажу вам Какие архитектурные задачи стояли перед нами в рамках API 2.0 Каким образом мы эти задачи решали Об архитектуре карты и геообъектов О подсистемах событий и опций 1

Что такое хорошая архитектура? 2

Большое монолитное ядро Большие сложные интерфейсы, сильная связанность объектов Сложность отладки Проблемы 1.x Модульность Простые интерфейсы с понятной ответственностью Режим для упрощенной отладки Многоязычность Требования к 2.0 3

модуль пакет сборщик загрузчик Модульная система Состоит из следующих логических единиц: 4

Модуль Атомарная единица функциональности с уникальным именем Модули делятся на 2 типа: js, css js модуль это javascript замыкание, предоставляющее в публичную область 1 объект или класс Может использовать для работы другие модули Модулей много ( 600 в API) 5

{ "name": "Placemark", "type": "js", "src": ["placemark-helper.js"], "depends": [ "util.augment", "GeoObject ] } Файл описания модуля 6

Пакет Именованный набор модулей Может включать другие пакеты Все содержимое пакета и его дочерних пакетов доступно в публичной области 7

Видимость функционала Package Module Private Public 8

Файл описания пакета { "name": "package.mapHint.core", "description": "Хинт на карте.", "depends": [ "map.addon.hint", "package.layouts" ] } 9

Сборщик Работает с файлами описания модулей и пакетов Поддерживает несколько режимов сборки: release, debug, dev Позволяет отслеживать неправильные (не используемые, циклические) зависимости Написан на node.js 10

Загрузчик Поддерживает два способа загрузки: 1. Указание имен пакетов в параметре load 2. Постзагрузка с помощью функции ymaps.load Загрузка осуществляется асинхронно 11

Подключение /?lang=ru-RU&mode=debug&coordorder=longlat&load=package.map&ns=YM Язык интерфейса * Режим работы (release) Порядок координат (latlong) Пространство имен (ymaps) Загружаемые пакеты * обязательный параметр (значение по умолчанию) 12

Параметр суслик 13

Параметр суслик /?onload=onLoadCallback function onLoadCb () { ymaps.load("package.geoObjects", function () { // получаем доступ к package.geoObjects })} 14

Загрузка /combine.xml?modules=... /index.xml?lang=ru-RU&load= Загрузчик + информация о всех модулях и пакетах 2. Код запрошенных модулей включая зависимости 15

Profit 16

За основу взята Document Object Model (DOM) Карта является корневым элементом модели Система опций выполняет роль CSS стилей Система событий работает поверх системы событий браузера и никак ее не затрагивает Объектная модель 17

Объектная модель карты Map.geoObjects.cursors.controls.layers.behaviors.panes.events.balloon.hint.action.zoomRange.converter.container.options 18

Корневые коллекции карты Map.geoObjects.cursors.controls.layers.behaviors.panes.events.balloon.hint.action.zoomRange.converter.container.options 19

Коллекции элементов карты Определяют добавленные в них элементы как дочерние Выстраивают с дочерними элементами иерархию наследования опций и иерархию распространения событий Бывают двух видов: на основе массива и на основе двусвязного списка 20

Иерархия элементов map2.rootCollection node1 node2 node3 map2.rootCollection node4 collection1 21

map2.rootCollection node1 node2 node3 map2.rootCollection node4 collection1 Иерархия элементов 22

Менеджеры опций и событий Map.geoObjects.cursors.controls.layers.behaviors.panes.events.balloon.hint.action.zoomRange.converter.container.options 23

Должна позволять выстраивать иерархии наследования опций Должна позволять использовать предустановленые наборы опций Должна позволять разрешать коллизии имен опций на разных уровнях иерархии Должна работать быстро Требования к системе опций 24

Пример работы системы опций map.options map.geoObjects.options geoObject.options balloon.options layout balloonLayout geoObjectBalloonLayout balloonLayout hint.options 25

Менеджер опций.options Методы setParent, getParent Имя, которое сообщает родителю при запросе вверх по иерархии Механизм настройки маппинга имен опций при запросе с нижних уровней иерархии Механизм кеширования значений опций Опцию preset отрабатывает особенным образом 26

Опция preset Представляет собой объект вида {имя опции: значение} Может задаваться как объектом, так и ключом в хранилище option.presetStorage Хэш также может содержать preset 27

Опция preset layout balloonLayout... preset 28

Должна позволять строить иерархии распространения событий Не должна затрагивать систему событий браузера Должна позволять управлять распространением событий по аналогии с браузером (методы stopPropagation, preventDefault) Должна быть удобной и работать быстро Требования к системе событий 29

Менеджер событий.events Имеет методы setParent, getParent Принимает контекст, который устанавливается в target событиям, генерируемым на нем Останавливает пропагирование по иерархии, если у события был вызван stopPropagation() После распространения события вверх по иерархии генерирует defaultaction событие, если у события не был вызван preventDefault() 30

Распространений событий map.geoObjects.events geoObjectArray.events geoObject.events iconOverlay.events click clickdefaultaction (4) click (1) click (2) click (3) 31

Геообъекты Вначале был GeoJson Один геообъект, много геометрий Но GeoJson подошел не полностью Коллекции геообъектов это тоже геообъекты (композиция) 32

Объектная модель геообъекта GeoObject.options.events.state geometry overlay properties 33

Геометрия Это геометрические данные + идентификатор типа данных Предоставляет различный математический функционал для работы со своими данными Геометрии делятся на 3 вида: базовые основные пиксельные 34

Взаимодействие геометрии и геообъекта geoObject.options.events.state geometry.options.events pixelGeometry map.events событие pixelgeometrychange событие boundschange 35

Оверлеи Отображают пиксельную геометрию определенного типа с учетом переданных данных и опций Оверлеи бывают разные html графические активные области Геообъект создает оверлеи не напрямую, а через фабрику оверлеев 36

Фабрики оверлеев interactive (по умолчанию) интерактивные графические оверлеи и html оверлей для геометрии Point interactiveGraphics интерактивные графические оверлеи в том числе и для геометрии Point staticGraphics неинтерактивные графические оверлеи (без активных областей) hotspot оверлеи активных областей 37

Геообъекты Placemark Polyline Polygon GeoObject Вспомогательные классы Placemark Polyline Polygon Circle Rectangle 38

Profit Map 5 полей 59 методов 14 полей 12 методов GeoObject 4 поля 44 метода 8 полей 4 метода 39

Необязательные поля карты Map.geoObjects.cursors.controls.layers.behaviors.panes.events.balloon.hint.action.zoomRange.converter.container.options 40

Механизм создания аддона Mapmap.addon.balloon map событие создания экземпляра создание.balloon 41

Аддоны карты и геообъекта.hint.balloon.editor GeoObject.hint.balloon.controls.geoObjects Map 42

Полезные ссылки Сайт: Клуб: Блог: 43

Вопросы? Сергей Константинов 44