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
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.