Evolution — это JavaScript микрофреймворк для front-end разработчиков написанный мною в свободное время, основной идеей которого была простота, малое количество кода, удобное API для работы с элементами HTML-DOM и наличие небольшого числа микромодулей.
Микро-фреймворк на данный момент имеет довольно гибкое API для фактически любых манипуляций с HTML-элементами, также способен анимировать свойства CSS.
Например, для получения ссылки HTML элемента можно воспользоваться следующим API:
$.dom("#elem, .withClass, div:last, p:first")'; Для создания нового элемента в дереве HTML и последующей его вставки в документ можно использовать вот такой простейший синтаксис:
$.dom('dfn',"new|before|footer:first", { html: '<a style="color:#b06400" href="#">version 1.4.2 beta</a>', attr: { style: "color:#b06400; text-align:center; display:block", } }); Как видно из примера, можно смело употреблять опции :first\:last и вставлять элемент в начале или конце целевого элемента(after и before). API я старался сделать максимально простым и удобным(как читается, так и срабатывает).
Также Evolution умеет удалять HTML-элементы:
$.dom('.prost div', "del"); Микрофреймворк умеет работать и с атрибутами элементов. Для получения их используется API:
$.attr('h1', 'data-test, style, etc'); Код сниппета для установки значения атрибутов и их удаления:
$.attr('h1', {'data-test': 'some value'}); $.attr('h1', {'data-test': null}); Кроме прочего уже сейчас реализована поддержка анимации CSS-свойств HTML. Например, для анимации border-radius можно использовать следующий синтаксис:
$.dom("#mainContents","animate",['border-radius:25px 0px:100']); В массиве можно указывать сколько угодно CSS-свойств элемента, все они будут анимированы одновременно. Последний аргумент указывает время анимации в ms.
Поскольку основополагающим для меня было получить фреймворк, который даст самое часто используемое в jQuery, то я сразу разработал несколько микромодулей для разных целей.
Например модуль $.scroll:
$.scroll([100,400],true); //промотка от верхнего угла текущего положения на ... $.scroll('#shell code pre:first',true); // скроллинг до элемента плавно $.scroll() // грубая установка верхнего положения страницы $.scroll('#chapter_8'); // установка положения экрана на высоту элемента с id Также есть поддержка AJAX в форматах строки, HTML и JSON данных:
$.ajax('http://www.domain.ru/framework/ajax.html','GET','dom', function(){ $.dom('div',"new|before|#mainContents", { attr: { id: "ajaxData", } }); for(var i in this) { $.insert($.dom('#ajaxData'), this[i].outerHTML); } }); $.ajax('http://www.domain.ru/framework/JSON.html','GET','json', function(){ // callback functions contains Data in variable [this](Object in JSON notation) }); Пример полученных JSON данных:
{ "great": "test", "level1": { "level2": { "test": "this is JSON Object" } } } К сожалению, я пока не реализовал должной поддержки методов POST и OPTIONS, но они обязательно появятся в будущем. Модуль $.toggle:
$.dom('h1','tog'); Также движек предоставляет функции для работы с событиями типа click, hover и т.д.:
// collapsed lists var sideLists = $.dom('aside ul'); for(var w in sideLists) { sideLists[w].style.display = 'none'; } $.click('aside h3', function(x){ x.nextElementSibling.style.display = ( x.nextElementSibling.style.display === 'none' ) ? 'inherit' : 'none'; }); $.dblclick('dt', function(x){ x.nextElementSibling.style.display = ( x.nextElementSibling.style.display === 'none' ) ? 'inherit' : 'none'; }); $.hover('dt', function(x){ x.nextElementSibling.style.display = ( x.nextElementSibling.style.display === 'none' ) ? 'inherit' : 'none'; }); $.xhover('dt', function(x){ x.nextElementSibling.style.display = ( x.nextElementSibling.style.display === 'none' ) ? 'inherit' : 'none'; }); Обо всех функциях писать здесь большого смысла нет, но вот еще некоторые из функций, которые я реализовал: модальные окна с возможностью перемещения по экрану; модуль микро-табов для организации контента разделенного вкладками и модуль $.rotate для создания простейшего слайдера.
Помимо прочего framework Evolution умеет автоматически отслеживать размеры экрана браузера пользователя и автоматически подключать нужный CSS файл в зависимости от ситуации(схемы min, med и max). Кажется, что я правильно разбил их и поэтому доступны только три основных режима: для экранов меньше 980px(мобильные телефоны), для маленьких мониторов и планшетов(980-1280px) и схема для крупных мониторов(больше 1280px).
С радостью выслушаю критику и пожелания так как код буду развивать и дополнять новыми модулями.
На данный момент доступна beta версия для ознакомления и экспериментов так как основной код еще находится в состоянии шлифовки и мелких доработок.
→ Ссылка на git
ссылка на оригинал статьи https://habrahabr.ru/post/316606/
Добавить комментарий