フロントエンドJavaScriptフレームワークEvolutionベータ

Evolutionは、私が暇なときに書いたフロントエンド開発者向けのJavaScriptマイクロフレームワークです。その主なアイデアは、シンプルさ、少量のコード、HTML-DOM要素を操作するための便利なAPI、および少数のマイクロモジュールです。



現時点のマイクロフレームワークには、HTML要素のほぼすべての操作のためのかなり柔軟なAPIがあり、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", } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例からわかるように、安全にoptions：first \：lastを使用して、ターゲット要素の先頭または末尾（後と前）に要素を挿入できます。 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});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

とりわけ、HTML CSSプロパティのアニメーション化のサポートが実装されました。 たとえば、境界半径をアニメーション化するには、次の構文を使用できます。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

配列では、要素のCSSプロパティを好きなだけ指定できます。これらはすべて同時にアニメーション化されます。 最後の引数は、アニメーション時間をミリ秒単位で示します。



jQueryで最も一般的に使用されるフレームワークを取得することは私にとって基本的なことだったので、すぐにさまざまな目的のためにいくつかのマイクロモジュールを開発しました。



たとえば、$ .scrollモジュール：

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

文字列、HTML、JSONデータ形式のAJAXサポートもあります。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このエンジンは、クリック、ホバーなどのイベントを操作するための機能も提供します。

 // 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モジュール。



特に、Evolutionフレームワークは、ユーザーのブラウザー画面のサイズを自動的に追跡し、状況（最小、中、最大スキーム）に応じて目的のCSSファイルを自動的に添付できます。 私はそれらを正しく壊したようですので、3つの主なモードしか利用できません：980px未満の画面（携帯電話）、小型のモニターとタブレット（980-1280px）、および大型のモニター（1280px以上）のスキーム。



コードを開発し、新しいモジュールで補足する際に、批判や提案に喜んで耳を傾けます。



現時点では、メインコードはまだ洗練されてマイナーな改善の状態にあるため、レビューと実験のためにベータ版を利用できます。



→ gitへのリンク