[Из песочницы] Front-end JavaScript framework Evolution beta01.12.2016 15:20

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: 'version 1.4.2 beta',
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). Кажется, что я правильно разбил их и поэтому доступны только три основных режима: для экранов меньше 980 px (мобильные телефоны), для маленьких мониторов и планшетов (980–1280 px) и схема для крупных мониторов (больше 1280 px).

С радостью выслушаю критику и пожелания так как код буду развивать и дополнять новыми модулями.

На данный момент доступна beta версия для ознакомления и экспериментов так как основной код еще находится в состоянии шлифовки и мелких доработок.

→ Ссылка на git

Комментарии (3)

  • 1 декабря 2016 в 14:00

    0

    ↑

    ↓

    Кажется, что я правильно разбил их и поэтому доступны только три основных режима

    Зачем изобретать велосипед, если есть bootstrap grid system, ставшая стандартом де-факто? Да и называть экраны меньше 980 px мобильными телефонами — не верно (тот же iPad 1024×768).

  • 1 декабря 2016 в 14:32

    –2

    ↑

    ↓

    Это не фреймворк, это библиотека.
    фреймворки это например Angular.JS, React.JS.

    • 1 декабря 2016 в 14:56

      +1

      ↑

      ↓

      React.JS это тоже библиотека.

© Habrahabr.ru