Requirements

Требования к JavaScript

Архитектура

Функциональность и динамика клиента описывается несколькими уровнями JS.

Ниже приведен список уровней в порядке их инициализации.

1. Библиотеки - используются для покрытия всех задач, которые можно решить средствами библиотеки в чистом виде либо при частичном переопределении её методов
2. Файлы сервисных функций - описание микро-функций, выполняющих вспомогательные/сервисные действия в методах классов. Не допускается взаимодействие сервисных функций с другими элементами.
3. Классы - Классы применяются для управления абстрактными данными и объектами DOM во всех случаях, когда взаимодействие пользователя предполагает ввод и получение данных (имеются признаки состояний, работы с данными). Приоритетным вариантом использования классов является React.
4. Контроллеры - Созают экземпляры классов и обеспечивают их взаимодействие.

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

Библиотеки

1. React - если разработчик обладает квалификацией
2. jQuery - подключается в виде локального ресурса
3. js Twitter Bootstrap - подключается в виде локального ресурса

Native js применяется для описания функций, объектов, массивов, отбработки циклов и кейсов.

jQuery применяется для доступа и управления элементами DOM, отправки ajax запросов, запуска тригеров и перехвата событий. Применение native js для данных целей не допускатеся.

js Twitter Bootstrap - применяется для реализации динамики стандартных объектов. Не допускается применение native js, jQuery и других библиотек для описания динамики, которая уже предусмотрена в Bootstrap.

Для всех случаев, не предусмотренных Native js, jQuery, Twitter Bootstrap допускается использование дополнительных библиотек. Все библиотеки должны загружаться локально (без ссылок на сторонние ресурсы)

Если библиотека не предполагает локальное хранение данных, она должна подгружаться асинхронно.

Валидация и стандартизация

В случа работы с формами и данными пользователей обязательна валидация данных на стороне клиента. Валидация производится по нескольким признакам:

• наличия данных, если они являются обязательными
• соответствия данных формату (например: email - проверяется на соответсвие требований к email)

В тех случаях, когда практика user experience предполагает ввод данных в разных форматах (даты, адреса, телефоны и т.д.) используются:

• формы, ограничивающие ввод данных в нестандартных/недоступных форматах
• выполняется стандартизация и упрощение данных, в т.ч. с применением сторонних библиотек и сервисов.

Взаимодействие с DOM

Атрибуты

Доступ к объектам DOM допускается только через атрибуты вида js-{object}="{specification}", где

{object} - смысловое наименование (например “js-callback” - для формы обратной связи)

{specification} - уточняющее определение для дочерних элементов (например “name” - для инпута, в котором указывается имя)

В указанном выше примере DOM может выглядеть следующим образом:

<form js-callback="form">
    <input type="text" js-form-input="name"/>
    <input type="tel" js-form-input="phone"/>
</form>

Доступ к объектам DOM через id, классы и прочие атрибуты не допускатеся.

Интерактив

Не допускается инициализация интерактива с объектам DOM через определение событий/функций в html разметке.

Например, недопустима подобная реализация событий: <button onclick=someFunction()></button>.

Любые реакции объектов DOM должны определяться через события, которые:

• навешиваются на объекты DOM через аттрибуты и определены в библиотеках или файлах сервисных функций (для примитивных взаимодейтсивй). Частный пример - навешивание реакций в Twitter Bootstrap.
• навешиваются на объекты DOM внутри методов классов, ответственных за управление данными объектами (например, любая форма привязывается к классу, который в свою очередь навешивает события на все элементы формы: инпуты, нотификации, кнопки)