Kwert-soft.ru

IT Софт для ПК
1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Javascript работа с api

Национальная библиотека им. Н. Э. Баумана
Bauman National Library

Персональные инструменты

JavaScript API

JavaScript API (сокращенно JS API) — набор программных интерфейсов для создания приложений. Библиотека позволяет осуществлять вызовы API прямо из браузера пользователя, минуя сервер, помогая при этом экономить трафик и вычислительные ресурсы. Кроме того, она дает доступ к некоторым возможностям, которые не доступны для вызова с сервера. Широко используется такими компаниями, как Yandex и Mai.ru, где JS API предоставляет возможность разрабатывать приложения в Моем Мире и подключать внешние сайты с использованием JavaScript. JavaScript API поддерживает обратную совместимость, написанный один раз код будет корректно работать с выходом новых версий. Функции JavaScript API можно расширить за счёт модулей — готовых решений других разработчиков.

Содержание

Требования к скрипту

  • скрипт будет встраиваться в страницы сторонних веб-приложений;
  • скрипт должен выполнять свою работу качественно;
  • скрипт должен загружаться быстро;
  • скрипт не должен (непредсказуемо) влиять на работу веб-приложения;
  • скрипт должен соответствовать требованиям безопасности.

5 принципов написания встраиваемых скриптов

1. Система сборки
Сборка необходима, потому что:

  • используются сторонние библиотеки,
  • есть несколько вариантов поставки скрипта,
  • скрипт может подгружать файлы ресурсов по мере необходимости.

Собирать нужно конкатенацией (операция склеивания объектов линейной структуры), потому что основной скрипт должен загружаться быстро, то есть одним файлом. В связи с этим, нужно всё собрать в один файл. Необязательные, дополнительные возможности нужно подгружать лишь тогда, когда клиент библиотеки вызывает соответствующие методы. Но ядро должно загрузиться быстро, хорошо закэшироваться и сразу предоставить клиенту API. Весь скрипт при этом надо завернуть в один scope, чтобы обернуть код в scope с помощью Grunt, используйте options banner и footer.
Это будет выглядеть таким образом:

2. Переключение между локальной и продакшн конфигурацией
Чтобы можно было легко управлять сборками и конфигурациями, нужно добавить одну переменную config, положить её в отдельный файл configDev.js или configProd.js и иметь отдельные сборки скрипта. При конкатенации нужно указать, из каких файлов собрать скрипт, — и цельный файл-скрипт готов.
Пример prod config-файла:

3. Как передать API наружу?

При помощи кода :

  • Тестировать несколько версий библиотеки на странице, причём так, что они друг другу не мешают.
  • Весь скрипт поместить в один закрытый scope.
  • Иметь полный контроль над всеми экземплярами.

4. “Правильная” система модулей При конкатенации кода таких модулей всё будет работать безо всяких библиотек для модулей.

5. Инициализация API
Если в библиотеке есть хоть какая-то инициализация, то нужно вынести её в отдельный метод. Можно даже создать отдельный метод для инициализации в каждом модуле. [Источник 1] Общая структура кода может выглядеть таким образом:

Примеры JavaScript API

  • Web Alarms API предоставляет доступ к настройкам оповещений на устройстве пользователя, при помощи которых можно настроить уведомления или запустить некоторое приложение в определенное время. Типичные примеры использования данного API это запуск будильников, календарей или любых других приложений, которые выполняют определенные действия в определенное время.

Этот API доступен через свойство alarms объекта window.navigator. Объект alarms предоставляет три метода:

  1. getAll(): возвращает список всех уведомлений на данном устройстве в виде массива объектов Alarm.
  2. add(): регистрирует новое уведомление по указанной дате и возвращает объект типа AlarmRequest.
  3. remove(): удаляет ранее добавленное уведомление по его уникальному идентификатору (уникальному в границах приложения).
  • Presentation API предоставляет веб-приложениям доступ к дополнительным устройствам отображения, таким как проектор или подключенный телевизор. Этот API работает как с проводными (HDMI, DVI и др.) так и беспроводными (MiraCast, Chromecast, DLNA, AirPlay) технологиями. Все что делает этот API, это позволяет обмениваться сообщениями между скриптами на вашей странице и на странице презентации на дополнительном дисплее.

Данный API доступен по свойству presentation объекта window.navigator object. Данное свойство предоставляет метод requestSession() и два события present и availablechange. Метод requestSession() используется для запуска и восстановления сеанса презентации на дополнительном экране. Он возвращает объект сессии презентации. Когда содержимое по url адресу переданному в метод requestSession() загружается, страница на экране презентации получает событие present. Когда подсоединяется первый или отключается последний дополнительный монитор, происходит событие availablechange.

  • Standby API дает контроль над переходом устройства в спящий режим. Этот API позволяет предотвращать переход устройства в режим энергосбережения (в том числе, отключение экрана). Эта возможность является ключевой для некоторых веб-приложений (например, навигатор в смартфоне).

Standby API доступен через свойство wakeLock объекта window.navigator. Это свойство предоставляет два метода:

  1. request: заставляет устройство не отключать экран.
  2. release: разрешает устройству отключать экран по своему усмотрению.

Оба метода принимают только один аргумент, строку «screen» или «system». Первый вариант используется чтобы указать, что нужно не отключать экран, второй для того, чтобы указать на другие устройства, например процессор или радио (но не экран). [Источник 2]

Подключение JavaScript API

Возможно IFrame-приложении или на внешнем сайте.

Подключение на внешнем сайте

Для использования JS API необходимо:

  • На домен приложения или сайта загрузить файл receiver.html
  • На вкладке Настройки IFrame управления приложением или в интерфейсе редактирования сайта указать адрес загруженного файла receiver.html
  • Подключить загрузчик библиотеки, добавив следующий код в элемент всех страниц, где вы хотите использовать JS API:
  • Загрузить библиотеку с помощью вызова функции mailru.loader.require(part, callback). Первым аргументом в нее передается часть библиотеки, которую надо загрузить (сейчас это только api). Второй аргумент — это функция, которая будет вызвана когда библиотека будет подгружена, выполняйте всю работу с API внутри этой функции.
  • Инициализировать библиотеку
  1. для приложений: вызвав функцию mailru.app.init(private_key)
  2. для сайтов: вызвав функцию mailru.connect.init(app_id, private_key)
  • После инициализации можно использовать любые функции JS API для получения данных, поднятия диалоговых окон и другого интерактивного взаимодействия.

Стоит отметить, что для корректной работы JS API на многостраничных приложениях необходимо передавать на внутренние страницы все GET-параметры, которые приложение получает на главной странице. Это не относится к сайтам.

Во Flash-приложении

Возможно использовать все функции JS API внутри Flash части вашего приложения. Для этого у Mail.ru создан Flash API — ActionScript прослойка для вызова функций JS API.

Подключение и работа в Yandex API

Работа с JavaScript API выглядит следующим образом:

Javascript работа с api

Пользователи могут использовать JavaScript API для решения следующих задач:

Для реализации дополнительных возможностей на сайте:

открытие форм связи онлайн-консультанта (чат, заявка) из любого места сайта пользователя. Получение дополнительной информации о посетителях сайта;

открытие формы и заказ обратного звонка через сайтфон;

присвоение свойств (например, посетителю, открывшему личный кабинет, присвоено свойство “действующий клиент”, открывшему тарифы — “потенциальный” и т.д.).

Получение дополнительных данных в отчетах:

данные о любом пользовательском событии на сайте (чтение книги, просмотр тарифов, открытие личного кабинете и т.д);

Читать еще:  Создание игр на javascript книга

информация с любой формы заявки пользователя.

Работа с событиями

Отправка пользовательского события

Для отправки пользовательского события используется следующий метод:

НазваниеТипОписание
categorytextкатегория, обязательный параметр
actiontextдействие, обязательный параметр
nametextярлык, необязательный параметр
valuetextзначение, необязательный параметр

Работа с баннером

Проверка наличия операторов онлайн

Для проверки наличия операторов онлайн используется метод:

Метод возвращает true , если есть хотя бы один доступный оператор, иначе false .

Форма заявки

Для открытия формы заявки используется метод:

Пользовательская форма заявки

Данные, полученные при использовании пользовательской формы заявки на сайте, можно отправить с помощью следующего метода:

Пользоваться данным методом можно лишь в случае отправки формы способом, не приводящим к перезагрузке страницы! Для остальных ситуаций есть альтернативный метод.

НазваниеТипОписание
reqОписание параметров: myName — тип text — имя посетителя, myEmail — тип text — адрес электронной почты посетителя, myPhone — тип text — телефон посетителя, myMessage — тип text — текст заявки и остальная информация, для которой нет отдельного поля, mySale — true — если это продажа; false — если не продажа (по умолчанию), group_id — id группы, в которую должна быть передана заявка, myCost — сумма сделки. Если необходимо передать сумму сделки, то обязательно надо передать в параметре is_sale значение true .
callback«success»: , «result»: <"code": >>Функция одного аргумента, которая будет вызвана после того, как сервер пришлет результат сохранения формы. Необязательный параметр.
  1. Обычная заявка:
  1. Заявка, приведшая к продаже:
  1. Пример с использованием параметра callback:

после успешного сохранения заявки в консоль браузера будет выведен результат:

Альтернативный способ отправки пользовательской заявки

  1. Перед отправкой заявки нужно получить аутентификационные данные виджета, используя метод JS API Comagic.getCredentials() . Метод возвращает объект:

    Передать полученные данные вместе с остальным данными формы.

    В серверном обработчике заявки сделать HTTP-запрос к сервису для добавления заявки.

    Базовую часть URL жёстко прописывать нельзя. Её необходимо взять из данных п.1. Она может меняться.

    В ответ придёт флаг успешности добавления заявки ( application/json ):

    Пример использования альтернативного способа отправки пользовательской заявки

    Вариант с перезагрузкой страницы

    Будем исходить из того, что на сайте уже установлен код вставки, подключена библиотека jQuery и есть форма обратной связи. Код простейшей формы обратной связи выглядит, примерно, так:

    Для того, чтобы отправить заявку, код формы нужно доработать: добавить служебные поля и обработчик на кнопку «Отправить»:

    В коде страницы или в отдельном JS-файле нужно написать функцию formSubmit() , которая будет вызываться каждый раз при клике на кнопку «Отправить»:

    Этот код получает служебную информацию, сохраняет ее в невидимые служебные поля формы и отправляет форму на сервер.

    Далее, нужно модифицировать код, который отвечает за обработку заявки на сервере. В нашем случае этот код находится в файле send.php:

    Вариант с AJAX-запросом

    HTML-разметка простейшей формы:

    JS-код отправки AJAX-запроса:

    PHP-код обработки полученного запроса:

    Для того, чтобы отправить заявку в случае отправки заявки AJAX-запросом, модифицировать HTML-форму не нужно. Нужно модифицировать JS-код таким образом, чтобы получение служебной информации происходило перед отправкой запроса:

    Код, который нужно выполнить на сервере. В данном случае он находится в файле sendAjax.php:

    Форма сайтфона

    Для открытия нашей стандартной формы сайтфона используется метод:

    Капча для формы сайтфона

    НазваниеТипОписание
    callbackВозвращаемый ответ: myKey — ключ капчи, myURL — адрес картинки.

    Замена маски номера для формы сайтфона

    Для того чтобы заменить стандартную маску ввода номера в сайтфоне и разрешить вводить номера в других форматах, в код вставки необходимо добавить строку:

    Вторым параметром необходимо передавать формат маски, которая должна отображаться в сайтфоне.

    Пользовательская форма сайтфона

    Помимо стандартных виджетов можно использовать любую свою форму для обратного звонка на сайте.

    Для этого необходимо встроить вызов метода обратного звонка в свою форму с помощью JS API:

    НазваниеТипОписание
    captcha_keytextИдентификатор капчи. Обязательный, если в настройках обратного звонка включена капча.
    captcha_valuetextРешение капчи (то, что ввел посетитель на форме): взять результат myURL из метода Captcha.get_captcha() , перейти по ссылке, увидеть 4 цифры. Обязательный, если в настройках обратного звонка включена капча.
    phonetextНомер телефона посетителя. Обязательный.
    delayed_call_timetextВремя совершения звонка в миллисекундах по UTC.
    group_idtextID группы сотрудников, в которую будет направлен звонок.
    callback<"success": , "result":>Возвращаемый ответ, необязательный (но желательный). Если его не задать, то функция отработает аналогично вызову из стандартной формы сайтфона и покажет всплывающее уведомление с результатом. Параметры: success: true — успешно, false — не успешно; result — результат вызова: status — статус вызова.
    КодЗначение
    успешно, звонок отправлен на платформу
    1капча введена неверно
    2не задан сценарий обработки обратного звонка
    3ошибка платформы
    4исчерпан лимит на количество вызовов в минуту (не более 10 звонков)

    Форма чата

    При вызове следующего метода, если есть операторы online, открывается форма чата:

    Если ни одного оператора нет online, то открывается форма заявки.

    Работа с посетителем

    Получение ID посетителя

    Для получения ID посетителя используется следующий метод:

    Получение ID сессии посетителя

    Для получения ID сессии посетителя используется следующий метод:

    Добавление информации о посетителе

    Для добавлении информации о посетителе используется следующий метод:

    Пользоваться данным методом можно лишь в случае отправки формы способом, не приводящим к перезагрузке страницы! Для остальных ситуаций есть альтернативный метод.

    НазваниеПараметрыОписание
    reqmyName — тип text — имя посетителя (перезаписываемый)
    myEmail — тип text — адрес электронной почты посетителя (добавляется уникальный)
    myPhone — тип text — телефон посетителя (добавляется уникальный)
    callback«success»:Функция одного аргумента, которая будет вызвана после того, как сервер пришлет результат сохранения формы. Необязательный параметр.

    Альтернативный способ добавления информации о посетителе

    Будем исходить из того, что на сайте уже установлен код вставки, подключена библиотека jQuery

    • Перед отправкой информации о посетителе нужно получить аутентификационные данные, используя метод JS API Comagic.getCredentials() .

    Метод возвращает объект:

    • Передать полученные данные вместе с остальным данными формы.

    Добавление свойства посетителю

    Для присвоения свойства или его значения используется следующий метод:

    НазваниеТипОписание
    nametextИмя свойства, которое должно быть присвоено посетителю
    valuetextЗначение свойства (необязательный параметр)

    Свойство тип посетителя со значением Потенциальный устанавливается следующим образом:

    Свойство Действующий клиент (без значения) устанавливается следующим образом:

    Проверка наличия свойства у посетителя

    Для проверки наличия свойства у посетиетля используется следующий метод:

    НазваниеТипОписание
    nametextИмя свойства, которое должно быть присвоено посетителю
    callbackВозвращаемый ответ. success: true — метод обработан успешно, false — ошибка; result: true — свойство name установлено false — свойство name не установлено

    Получение значения свойства посетителя

    Для получения значения свойства у посетителя используется следующий метод:

    НазваниеТипОписание
    nametextИмя свойства, которое должно быть присвоено посетителю
    callbackВозвращаемый ответ. success: true — метод обработан успешно, false — ошибка; result: value — значение свойства name , false — свойство name не установлено

    Удаление свойства посетителя

    Для удаления свойства, заданного посетителю, используется следующий метод:

    НазваниеТипОписание
    nametextИмя свойства, которое должно быть удалено

    Подмена номера

    Подмена номера в динамических блоках

    Для того, чтобы включить подмену номера в динамически добавляемых блоках, в код вставки необходимо добавить дополнительную строку:

    Управление подменой номера

    В случае, когда подмена номера нужна только при выполнении определенных условий, например, только для посетителей Москвы, нужно переопределить функцию, управляющую подменой номера, window.__cs_onReplacePhones(phones) . Она работает следующим образом:

    если возвращает true , то подмена будет выполнена так, как если бы функция не была переопределена,

    если возвращает false , то подмена не будет выполнена.

    Функция создается в момент инициализации сервисного кода и по умолчанию имеет вид:

    Если управлять подменой не требуется, то функцию переопределять не нужно.

    Если номера нужно подменять только при определенных условиях, то эту функцию надо переопределить, дописав в тело необходимые условия подмены.

    Получение номеров, выданных посетителю

    Если клиенту необходимо получить список всех номеров, выданных посетителю сайта, можно воспользоваться следующей функцией:

    В ответ вернется массив объектов, аналогичный списку phones в __cs_onReplacePhones .

    Тип заменяемого идентификатораПример возвращаемого значения поля id
    id#comagic_phone
    class.comagic_phone
    name[name=comagic_phone]
    numbernumber=XXXXXXXXXXX

    Получение зарезервированных под посетителя номеров ДТ

    Если клиенту необходимо получить список зарезервированных номеров динамического трекинга под посетителя, можно воспользоваться следующей функцией:

    Эта функция вернет null в случае, когда под посетителя не зарезервировано ни одного номера динамического трекинга.

    Если зарезервированные номера есть, то вернется массив объектов, аналогичный списку phones в __cs_onReplacePhones .

    Как начать работу с Performance API в JavaScript

    Производительность, производительность, производительность. У вас может быть лучший сайт в мире, но если загрузка займет 2 минуты, его никто не увидит. Если ваш сайт загружается за 2 минуты, вероятно, не составит труда понять, почему. Оптимизация сложнее, когда вы пытаетесь снизить среднее время загрузки с 1 до 0,85 секунды.

    Существует множество инструментов, которые могут помочь вам понять, как ваше приложение работает локально. Performance API здесь, чтобы помочь нам получить детальное представление о наших веб-страницах. Вы можете получить реальные данные и посмотреть, как ваш сайт работает в разных браузерах, сетях, частях света и многом другом!

    Performance API часто описывается как совокупность API. Слишком много вещей, чтобы описать все это в одной статье. В этом посте мы покажем самые основные функции, которые помогут вам начать мониторинг производительности.

    API развивается, и есть много новых функций и устаревших функций. 2-й уровень всех API-интерфейсов для повышения производительности; некоторые из них частично реализованы, некоторые все еще являются черновиками. Поэтому вам следует регулярно проверять MDN или веб-сайт W3C на наличие последних обновлений.

    Как получить доступ к данным о производительности

    performance.now

    Самый простой способ измерить производительность программы — это использовать performance.now() . Метод вернет текущее время с разрешением менее миллисекунды. Если вы хотите узнать больше времени с высоким разрешением, я настоятельно рекомендую прочитать проект редактора W3C на эту тему.

    performance.now позволяет вам измерить только то, что находится в вашем JavaScript коде (то есть производительность пользователя). Позже в этом посте я приведу пример использования performance.now .

    Для доступа к различным событиям DOM и браузера у нас есть 3 функции:

    getEntries() возвращает все доступные записи производительности. Попробуйте запустить performance.getEntries() на текущей странице, и вы увидите большой массив. Первоначально, большинство записей будут относиться ко всем изображениям, сценариям и другим вещам, которые загружаются страницей (иначе ресурсы).

    getEntriesByType() похож на getEntries() , но даст вам возможность отфильтровать результаты.

    Вы можете запросить 6 типов:

    • frame: очень экспериментальная функция, которая позволяет разработчикам получать данные о том, сколько работы выполняется браузером в одном цикле событий. Если браузер выполняет слишком много работы за один цикл, частота кадров упадет, а пользовательский интерфейс будет плохим.
    • resource: это относится ко всем ресурсам, которые загружаются сайтом.
    • mark: это пользовательские маркеры, которые можно использовать для расчета скорости вашего кода.
    • measure: меры позволяют нам легко измерить разницу между двумя метками.
    • paint: записи paint относятся к пикселям, отображаемым на экране.
    • longtask: Длинные задачи — это любые задачи, выполнение которых занимает более 50 мс.

    Мы рассмотрим некоторые из этих типов в следующих разделах. Вот простой пример для начала:

    getEntriesByName(entryName) фильтрует все записи по имени.

    Аудит ваших функций

    Для аудита определенных функций JavaScript наиболее простым инструментом является то, что мы описали выше, performance.now() .

    Вот пример использования:

    Проблема now в том, что управлять им немного сложно, если у вас много измерений. Более полезный инструмент mark , который создает некоторые записи производительности, которые вы можете запросить позже. Затем вы можете комбинировать маркеры и создавать новые записи, используя measure .

    Данные навигации

    Навигация используется, чтобы получить детальное представление о важных этапах создания веб-страницы. Самый безопасный способ получить доступ к навигационным данным:

    В моем браузере я получаю:

    Ресурс

    Каждый раз, когда ресурс загружается страницей, мы можем найти его след в записях производительности. Все, что нам нужно сделать, чтобы получить их, это запустить performance.getEntriesByType(‘resource’) . Это включает в себя изображения, сценарии, файлы CSS и многое другое. Так, например, если мы хотим сосредоточиться на производительности изображений на сайте, мы можем запустить:

    Вот один из ресурсов, найденных на моем сайте:

    Эта запись имеет множество значений 0, как вы можете видеть, потому что мы ограничены CORS. Поэтому следующие свойства всегда будут возвращать 0: redirectStart, redirectEnd, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart и responseStart.

    Отрисовка

    API рисования относится к событиям, которые рисуют пиксели в окне. Как мы видели в предыдущем фрагменте, у нас есть доступ к First Time to Paint и First Contentful Paint. Если вы работали с инструментами внешней оптимизации, такими как Lighthouse, вы можете быть знакомы с этими терминами. First Time to Paint — это когда первый пиксель появляется на экране пользователя. First Contentful Paint — это когда элемент, определенный в DOM, начал отображается. Для оптимизации First Time to Paint вы можете уменьшить количество сценариев и таблиц стилей, блокирующих рендеринг, использовать HTTP-кэширование, оптимизировать загрузку JavaScript и многое другое!

    Это полезные показатели, но они довольно ограничены, если вы пытаетесь понять, что видят ваши пользователи. Чтобы иметь представление о восприятии производительности вашего пользователя, нам нужно объединить несколько показателей.

    API производительности гигантский и быстро меняется. Если вы хотите глубоко изучить эту тему, вам следует посетить страницу рабочей группы по веб-производительности, где можно найти последние рабочие проекты и рекомендации.

    Национальная библиотека им. Н. Э. Баумана
    Bauman National Library

    Персональные инструменты

    JavaScript API

    JavaScript API (сокращенно JS API) — набор программных интерфейсов для создания приложений. Библиотека позволяет осуществлять вызовы API прямо из браузера пользователя, минуя сервер, помогая при этом экономить трафик и вычислительные ресурсы. Кроме того, она дает доступ к некоторым возможностям, которые не доступны для вызова с сервера. Широко используется такими компаниями, как Yandex и Mai.ru, где JS API предоставляет возможность разрабатывать приложения в Моем Мире и подключать внешние сайты с использованием JavaScript. JavaScript API поддерживает обратную совместимость, написанный один раз код будет корректно работать с выходом новых версий. Функции JavaScript API можно расширить за счёт модулей — готовых решений других разработчиков.

    Содержание

    Требования к скрипту

    • скрипт будет встраиваться в страницы сторонних веб-приложений;
    • скрипт должен выполнять свою работу качественно;
    • скрипт должен загружаться быстро;
    • скрипт не должен (непредсказуемо) влиять на работу веб-приложения;
    • скрипт должен соответствовать требованиям безопасности.

    5 принципов написания встраиваемых скриптов

    1. Система сборки
    Сборка необходима, потому что:

    • используются сторонние библиотеки,
    • есть несколько вариантов поставки скрипта,
    • скрипт может подгружать файлы ресурсов по мере необходимости.

    Собирать нужно конкатенацией (операция склеивания объектов линейной структуры), потому что основной скрипт должен загружаться быстро, то есть одним файлом. В связи с этим, нужно всё собрать в один файл. Необязательные, дополнительные возможности нужно подгружать лишь тогда, когда клиент библиотеки вызывает соответствующие методы. Но ядро должно загрузиться быстро, хорошо закэшироваться и сразу предоставить клиенту API. Весь скрипт при этом надо завернуть в один scope, чтобы обернуть код в scope с помощью Grunt, используйте options banner и footer.
    Это будет выглядеть таким образом:

    2. Переключение между локальной и продакшн конфигурацией
    Чтобы можно было легко управлять сборками и конфигурациями, нужно добавить одну переменную config, положить её в отдельный файл configDev.js или configProd.js и иметь отдельные сборки скрипта. При конкатенации нужно указать, из каких файлов собрать скрипт, — и цельный файл-скрипт готов.
    Пример prod config-файла:

    3. Как передать API наружу?

    При помощи кода :

    • Тестировать несколько версий библиотеки на странице, причём так, что они друг другу не мешают.
    • Весь скрипт поместить в один закрытый scope.
    • Иметь полный контроль над всеми экземплярами.

    4. “Правильная” система модулей При конкатенации кода таких модулей всё будет работать безо всяких библиотек для модулей.

    5. Инициализация API
    Если в библиотеке есть хоть какая-то инициализация, то нужно вынести её в отдельный метод. Можно даже создать отдельный метод для инициализации в каждом модуле. [Источник 1] Общая структура кода может выглядеть таким образом:

    Примеры JavaScript API

    • Web Alarms API предоставляет доступ к настройкам оповещений на устройстве пользователя, при помощи которых можно настроить уведомления или запустить некоторое приложение в определенное время. Типичные примеры использования данного API это запуск будильников, календарей или любых других приложений, которые выполняют определенные действия в определенное время.

    Этот API доступен через свойство alarms объекта window.navigator. Объект alarms предоставляет три метода:

    1. getAll(): возвращает список всех уведомлений на данном устройстве в виде массива объектов Alarm.
    2. add(): регистрирует новое уведомление по указанной дате и возвращает объект типа AlarmRequest.
    3. remove(): удаляет ранее добавленное уведомление по его уникальному идентификатору (уникальному в границах приложения).
    • Presentation API предоставляет веб-приложениям доступ к дополнительным устройствам отображения, таким как проектор или подключенный телевизор. Этот API работает как с проводными (HDMI, DVI и др.) так и беспроводными (MiraCast, Chromecast, DLNA, AirPlay) технологиями. Все что делает этот API, это позволяет обмениваться сообщениями между скриптами на вашей странице и на странице презентации на дополнительном дисплее.

    Данный API доступен по свойству presentation объекта window.navigator object. Данное свойство предоставляет метод requestSession() и два события present и availablechange. Метод requestSession() используется для запуска и восстановления сеанса презентации на дополнительном экране. Он возвращает объект сессии презентации. Когда содержимое по url адресу переданному в метод requestSession() загружается, страница на экране презентации получает событие present. Когда подсоединяется первый или отключается последний дополнительный монитор, происходит событие availablechange.

    • Standby API дает контроль над переходом устройства в спящий режим. Этот API позволяет предотвращать переход устройства в режим энергосбережения (в том числе, отключение экрана). Эта возможность является ключевой для некоторых веб-приложений (например, навигатор в смартфоне).

    Standby API доступен через свойство wakeLock объекта window.navigator. Это свойство предоставляет два метода:

    1. request: заставляет устройство не отключать экран.
    2. release: разрешает устройству отключать экран по своему усмотрению.

    Оба метода принимают только один аргумент, строку «screen» или «system». Первый вариант используется чтобы указать, что нужно не отключать экран, второй для того, чтобы указать на другие устройства, например процессор или радио (но не экран). [Источник 2]

    Подключение JavaScript API

    Возможно IFrame-приложении или на внешнем сайте.

    Подключение на внешнем сайте

    Для использования JS API необходимо:

    • На домен приложения или сайта загрузить файл receiver.html
    • На вкладке Настройки IFrame управления приложением или в интерфейсе редактирования сайта указать адрес загруженного файла receiver.html
    • Подключить загрузчик библиотеки, добавив следующий код в элемент всех страниц, где вы хотите использовать JS API:
    • Загрузить библиотеку с помощью вызова функции mailru.loader.require(part, callback). Первым аргументом в нее передается часть библиотеки, которую надо загрузить (сейчас это только api). Второй аргумент — это функция, которая будет вызвана когда библиотека будет подгружена, выполняйте всю работу с API внутри этой функции.
    • Инициализировать библиотеку
    1. для приложений: вызвав функцию mailru.app.init(private_key)
    2. для сайтов: вызвав функцию mailru.connect.init(app_id, private_key)
    • После инициализации можно использовать любые функции JS API для получения данных, поднятия диалоговых окон и другого интерактивного взаимодействия.

    Стоит отметить, что для корректной работы JS API на многостраничных приложениях необходимо передавать на внутренние страницы все GET-параметры, которые приложение получает на главной странице. Это не относится к сайтам.

    Во Flash-приложении

    Возможно использовать все функции JS API внутри Flash части вашего приложения. Для этого у Mail.ru создан Flash API — ActionScript прослойка для вызова функций JS API.

    Подключение и работа в Yandex API

    Работа с JavaScript API выглядит следующим образом:

Ссылка на основную публикацию
Adblock
detector