Front-end JavaScript framework Evolution beta

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

Автор: zShift

Источник