Микро-фреймворк на данный момент имеет довольно гибкое 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
Комментарии (33)
staticlab
01.12.2016 15:28+2Непонятно, зачем такая библиотека нужна в 2017 году. Прямая манипуляция DOM-элементами давно уже моветон. Более того, подозреваю, что в библиотеке не предусмотрена компонентизация хотя бы в стиле jQuery. И вообще, API выглядит довольно уныло даже по сравнению с ванильным Web API.
zShift
01.12.2016 17:12Про API это вы о чем именно? Я делал обертки ванильного API только для сложных действий. Например для анимации.
Могу сделать также как у jQuery($(sel).().()), но делать много действий с одними и теми же элементами получается в основном у новичков jQuery. А для каких-то дополнительных функций, если они нужны, я предусмотрел callbacks.
Что бы вы изменили в этом API?staticlab
02.12.2016 22:12Я подразумевал, что для современного фронтенда библиотеки типа jQuery слишком низкоуровневые. Даже Knockout и Backbone предполагали абстракцию от вёрстки и компонентизацию приложения. При этом цель в очистке кода от манипуляции нативными элементами дабы оставалась практически только бизнес-логика приложения. Когда я разрабатываю какую-нибудь очередную админку или CRM мне неинтересно думать: "Ага, тут у нас вёрстка календарика, нужно сбросить на его днях все подсветки и добавить подсветку на день date". Я просто хочу передать компоненту календаря желаемую дату, а он пусть сам с ней разбирается. Да, в jQuery-компонентах такая абстракция уже предусмотрена, но при этом я сначала должен в вёрстке создать некий div, а потом из кода превратить его в календарь, сохранив ссылку. jQuery позволяет создавать хотя бы такие компоненты, отчасти из-за чего она и стала популярна.
Кроме того, под унылостью я понимал то, что тут вам уже пояснили. API нетривиален: функция dom делает совершенно разные вещи в зависимости от значения и типов её параметров. При этом, однако, есть и такая функция, как insert, хотя dom также умеет добавлять новый элемент. В любом случае, показывайте не статичное добавление элементов, а какое-то использование данных и их обновление. Например, чем ваша библиотека выиграет в кейсе "textbox и div, в который выводится текущее значение текстбокса" против реализации на jQuery, не говоря уже о более современных библиотеках?
RubaXa
01.12.2016 16:26+1Больше походе на невнятный набор хелперов, а размер совсем не микро.
Кроме этого, уже есть Zepto, который умеет намного больше, а главное лучше.zShift
01.12.2016 17:02Не знал про Zepto. Есть к чему стремиться, но я не ставил себе цель сделать клон jQuery, как это сделано у Zepto.
RubaXa
01.12.2016 19:22Стремиться? Какую нишу вы хотите занять?
Например Zepto поставили цель сделать удобное API для работы DOM, событиями, анимацией, ajax, touch-устройствами и маленький размер. Удобный API для перечисленного — это jQuery-style, как не крути.
Или вот микро библиотека Voyeur пытается предложить альтернативный взгляд, спорный, но всё же альтернативный.
У вас же просто набор методов объединенных единым namespace, который с лихвой покрывают возможности Zepto имеющего тесты, доку и коммьюнити.
Так что взгляните на всё это и подумайте, что же вы хотите, велосипед ради велосипеда (не осуждаю, это нормально, но только для себя в рамках образования) или альтернативный вариант/свежий взгляд?
zShift
01.12.2016 20:39>> Стремиться? Какую нишу вы хотите занять?
Осуждаете…
>> У вас же просто набор методов объединенных единым namespace, который с лихвой покрывают возможности Zepto имеющего тесты, доку и коммьюнити.
Чтобы никто не схватил и не начал потом жаловаться на сильные изменения я прислушиваюсь ко всем на стадии beta. С чего-то надо начинать.
Да без проблем. Во второй версии я сделаю такие же нунчаки как у jQuery, если уж другое кажется смешным.
baldrs
01.12.2016 16:51А чем эта библиотека лучше jQuery?
zShift
06.12.2016 13:22Не утверждаю, что написал лучше или хуже, но вот например jQuery не умеет так:
$('div').animate({'border-radius':'20px 50px 200px 10px'},1000)
А evolution так умеет:
$.dom("#mainContents","animate",['border-radius:25px 10px 15px 5px:1000:circ','opacity:1:2000']);
Обратите внимание на разные easing и разное время анимации для каждого из CSS свойств.
(:staticlab
06.12.2016 13:24А не правильнее ли делать такое через css animations?
baldrs
06.12.2016 13:28Правильнее, только если вы в 2016 году не тянете за собой IE<10 которые их не поддерживают.
staticlab
06.12.2016 13:34Согласен, но у автора в коде используется requestAnimationFrame (IE10+)
zShift
06.12.2016 17:29Так сейчас у всех используются современные браузеры и даже если речь об IE, то и у них в качестве движка по умолчанию все обновляется до Edge(речь не идет о тех, кто отключил обновление системы умышленно — они продивинутые и у них навряд ли нет того же Chrome).
Я пользователей Windows XP уже своей целевой аудиторией не считаю, да и те пользуются или Opera или Chrome, что равнозначно из-за webkit.
В общем их единицы единичные.
Нужен ли этот fallback?staticlab
06.12.2016 17:33Движок IE не обновляется до Edge. Он так и остаётся на версии 11. Edge — отдельное самостоятельное приложение.
Если не поддерживаете старые браузеры, то фоллбек не нужен. Речь шла только о способе задания анимаций.
zShift
06.12.2016 17:50Вот IE11 под Windows 7. В эмуляции указано Edge. Систему не обновлял бог знает сколько.
staticlab
06.12.2016 17:53Edge в данном случае буквально означает "крайний". Фактически же это IE11. Даже на Windows 10. По возможностям IE11 сильно отличается от реального браузера Edge. Можете убедиться сами на kangax.
zShift
06.12.2016 17:56Для меня главное, что он поддерживает request animation frame в данном конкретном случае. Иначе я бы скорее всего написал просто на SetTimout. У jQuery, например, сделан такой fallback, но я вот его реализовывать по понятным причинам не стал.
zShift
06.12.2016 17:25Писать этот бардак в inline или переключать тысячу классов? Можно и так, но мне было удобнее через JS.
Со временем, кстати, планирую добавить и поддержку CSS-animations(rotate, translate, skew и т.д.)
Odrin
Зачем изобретать велосипед, если есть bootstrap grid system, ставшая стандартом де-факто? Да и называть экраны меньше 980px мобильными телефонами — не верно (тот же iPad 1024?768 ).
zShift
Сейчас вообще ничего нельзя сказать с уверенностью просто потому что экраны постоянно становятся больше и больше.
iPad же все же не мобильный телефон.
Мне не нравятся media-queries. Не люблю SASS и LESS, к примеру. А эта штука позволяет моментально и автоматически подцепить нужную CSS-схему. А для коррекции всего-то необходимо отконфижить один из CSS файлов.
Bootstrap для того функционала который я задумывал потянет за собой и jQuery в том числе, а она нынче весит непозволительно много.
Мне же удалось уложиться в какие-то 32кб кода с комментариям в последней версии.
Я не стал поддерживать старые IE с учетом того, что таких пользователей остается единицы и благодаря этому удалось сделать фреймворк минимального веса.
TheShock
У меня маленький телефон 1920*1080 ;)
Вы с этой либой опоздали лет минимум на 10.
И даже десять лет назад никто не пользовался бы либой, где команды отдаются строками:
Зачем?!
Чтобы было неудобнее?
Чтобы не работало автодополнение?
Чтобы был нечитаемый стектрейс?
Чтобы легче было допустить ошибку?
Почему не самые обычные методы, как 10 лет назад в JQuery?
zShift
>> Почему не самые обычные методы, как 10 лет назад в JQuery?
Постеснялся боянить. Ладно, убедили
RubaXa
Я однажды упаровшись написал такое: https://github.com/RubaXa/jquery.zen#zen-school ;]
zShift
Да уж :) Слава богу я до такого пока не дошел. Хорошо! Будет сделано красивое jQuery-style API в версии 2. И, я надеюсь, я все таки не хуже какого нибудь Bootstrap. Ибо обладаю немалым опытом верстки и могу сделать небольшой grid system(но только без БЕМ и LESS — не люблю много тегов и повторения при перестройке).