Revolver: микро библиотека для frontend на Java Script

в 17:26, , рубрики: javascript

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

Собственно, Revolver — микробиблиотека для frontend (всего чуть более 1500 строк несжатого кода), которая включает в себя API (можете назвать это синтаксический сахар, если вам угодно) для работы с элементами DOM, поддерживающая ряд модулей для создания анимаций и асинхронных запросов.

В Revolver также включено некоторое число полезных хелперов, которыми можно пользоваться в контексте приложения для работы с быстрой и компактной проверкой типов и различные конвертеры данных обеспечивающие например работу с анимацией и распарсингом CCS цветов включая большинство популярных форматов от #ABF варианта до hsla (100, 15%, 30%, .4).

Также можно выделить особенность Revolver анимировать CSS 3D матрицу и все известные свойства CSS transform и даже большинство таких редких сочетаний как border-color или padding, которые не умеет делать больше ни одна библиотека самостоятельно.

Большинство кода написано на ES6 / ES 7 и я очень ожидаю появления полноценной поддержки import чтобы реализовать код модулями и разбить проект на более мелкие независимые компоненты.

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

<script src="./app/revolver.js?production=1.0.4" async id="revolver">
	// charging weapons with namespace
	const revolver = new Revolver('$');

	// fast draw shouting
	...
</script>

Например, чтобы использовать REVOLVE для целевого индекса API достаточно просто указать в приложении:

	// charging weapons with namespace
	const revolver = new Revolver('REVOLVE');

А дальше можно использовать как обычный объект с методами:

REVOLVE.dom("a:first-child","animate",['left:-70px:3000:pulse', 'font-size:30px:1000', 'color:hsl(20, 50%, 40%):3000', 'transform: rotate(360deg,360deg,360deg) perspective(40px) skew(0deg,0deg,360deg):2000:bounce']);

В данном примере представлено API для анимации сразу нескольких свойств CSS и цвета. Для более подробных примеров вы можете обратиться к документации(она написана только на английском языке) или посмотреть код страницы unit тестов.

Кстати, код библиотеки написан максимально производительно без использования лишний раз медленных методов в пользу более быстрому, но более нативному коду(к примеру в проекте нет ни одного foreach или map, или reduce; а также отдано предпочтение работе с массивами нежели с объектами) на манер спортивной дисциплины Fast Draw(скоростная стрельба, как у ковбоев на диком западе).

К сожалению, я не смог скомпилировать Revolver в реализации ES 7 с помощью babel 6 и плюнул на это занятие. Я, как основной и единственный на данный момент разработчик, считаю более целесообразным дождаться полноценной поддержки ES7 кода в браузерах MS — это важнее, чем убивать логику программы транспайлером в обратную совместимость.

Код покрыт тестами, но по моей личной системе. Я тестировал только работоспособность модулей в разных ситуациях. Например для враппера fetch было применено просто тестирование способности загружать контент в разных форматах с разными типами запроса, а также способность корректно передавать данные форм на сервер.

Код, документация и исходники
Страница UNIT test

тест не будет пройден на localhost без развертывания сервера из-за location API, который меняет history.

Буду рад критике и предложениям.

Автор: Лунтик

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js