Front-end JavaScript framework Evolution beta

Evolution is a JavaScript microframe for front-end developers written by me in my spare time, the main idea of ​​which was simplicity, a small amount of code, a convenient API for working with HTML-DOM elements and the presence of a small number of micromodules.



The micro framework currently has a fairly flexible API for virtually any manipulation of HTML elements, and is also able to animate CSS properties.



For example, to get the HTML link of an element, you can use the following API:

$.dom("#elem, .withClass, div:last, p:first")'; 

To create a new element in the HTML tree and then insert it into the document, you can use the following simplest syntax:

')

 $.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", } }); 

As you can see from the example, you can safely use the options: first \: last and insert an element at the beginning or end of the target element (after and before). I tried to make the API as simple and convenient as possible (as it is read, and it works).



Evolution can also delete HTML elements:

 $.dom('.prost div', "del"); 

The micro framework can work with attributes of elements. To get them, use the API:

 $.attr('h1', 'data-test, style, etc'); 

Snippet code for setting attribute values ​​and deleting them:

 $.attr('h1', {'data-test': 'some value'}); $.attr('h1', {'data-test': null}); 

Among other things, support for the animation of CSS HTML properties is already implemented. For example, to animate border-radius, you can use the following syntax:

 $.dom("#mainContents","animate",['border-radius:25px 0px:100']); 

Any number of CSS properties of the element can be specified in the array; all of them will be animated at the same time. The last argument specifies the animation time in ms.



Since it was fundamental for me to get a framework that would give the most frequently used in jQuery, I immediately developed several micromodules for different purposes.



For example the module $ .scroll:

 $.scroll([100,400],true); //       ... $.scroll('#shell code pre:first',true); //     $.scroll() //      $.scroll('#chapter_8'); //        id 

There is also support for AJAX in string, HTML and JSON data formats:

 $.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) }); 

Sample received JSON data:

 { "great": "test", "level1": { "level2": { "test": "this is JSON Object" } } } 

Unfortunately, I have not yet implemented the proper support of the POST and OPTIONS methods, but they will definitely appear in the future. $ .Toggle module:

 $.dom('h1','tog'); 

Dvizhek also provides functions for working with events like click, hover, etc .:

 // 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'; }); 

It makes little sense to write about all the functions here, but here are some of the functions that I implemented: modal windows that can be moved around the screen; a micro-tab module for organizing tab-separated content and a $ .rotate module for creating a simple slider.



Among other things, framework Evolution can automatically track the screen size of the user's browser and automatically connect the required CSS file depending on the situation (min, med and max schemes). It seems that I have broken them correctly and therefore only three basic modes are available: for screens less than 980px (mobile phones), for small monitors and tablets (980-1280px) and a scheme for large monitors (more than 1280px).



I will be happy to hear criticism and suggestions as the code will be developed and supplemented with new modules.



At the moment, the beta version is available for review and experiments, since the main code is still in a state of grinding and minor modifications.



→ Link to git