🗣️ 🏛️ 🤟 フロントエンドJavaScriptフレームワークEvolution ::リリース1.5.7 👩🏼‍🏫 🍄 🍳

Evolutionフロントエンドフレームワークの最初のパブリックベータバージョンが発表されてから約1か月が経ちました。私はコードをプロダクションリリースまで徹底的に改良し、機能を大幅に拡張しました。

独自のフレームワークを作成する主なアイデアは、主にミニマリズムとモビリティのキーにあると言っておく価値があります。私は、部分的なjQuery機能、タブやスライダーなどの既製のコンポーネントのセット、および適応性のサポートを備えた独自の国内バージョンのフレームワークが本当に必要でした。

現時点では、スタイルとコードを備えたサイズが約50 KBのエンジンがあり、縮小バージョンの主要な機能部分の重量はわずか19.4 KBです。

まず、アニメーションメカニズムがフルスタックの3Dおよび2D変換をサポートするようになり、大幅に改善されました。エンジンは、3Dモードで変換を操作するためのコンテキストを自動的に設定し、すべてのCSS3変換プロパティをサポートします。

例：

//      $.dom("a:first-child", "style", ['display:inline-block', 'transform:perspective(200px)']); //  ,   $.dom("a:first-child","animate",['left:-170px:3000:pulse', 'font-size:30px:1000', 'color:gold:3000', 'transform:rotateX(360deg) rotateZ(360deg) perspective(40px):2000:flicker']);

さらに、アニメーション機能には、RGBaモードで色をアニメーション化する機能が追加されました。このために特別なことをする必要はありません。 RGB形式または単に名前（サポートされている名前のコレクションがあります）、および#dcdcdc形式で色を指定できます。システムは自動的に色をRGBaに変換し、アニメーションを色、背景色、または境界線色のプロパティに適用します。

エンジンには緩和効果があります。以下は、アニメーションを操作するための一時的な関数の完全なリストです。easeIn、easeOut、easeOutQuad、easeOutCubic、easeInOutCubic、easeInQuart、easeOutQuart、easeInOutQuart、easeInQuint、easeOutQuint、easeInOutQuint、ease、easeInElastic、easeOutEinEutOutOlutOutOutluto easeInOutCirc、easeInQuad、easeInExpo、easeOutExpo、easeInOutExpo、easeOutBounce、bouncePast、bounce、radical、harmony、back、expo、easeOutStrong、easeInBack、easeOutBack、swingTo、swingFrom、spring、blink、pulse、wobble、sinusoidal、f

Evolution JSは、重量がわずか20 kbで、依存関係がない同様の機能を備えた最初のマイクロフレームワークです。

私の前回のプレゼンテーションからの意見に基づいて、クリック、ホバーなどのイベントを適用するためにAPIをわずかに変更することにしました。

これで次のようになります。

  $.event('a:first-child', 'click', function(e){ e.preventDefault(); })

複数の最適化とリファクタリングに加えて、新しい機能が登場しました。

ローカルストレージAPI：

 $.storage(['evolution={"js framework": "1.5.8"}'],'set'); $.storage('evolution','get'); $.storage('evolution','del');

クラスAPI：

 $.addClass('#some','class-test'); $.removeClass('#some', 'class-test'); $.hasClass('#some', 'class1 class2 class3'); //returns true if all classes defined for element #some

Gridモジュールは十分に再設計され、ユーザーの画面のサイズに応じて5つのCSSスキームのいずれかを適応的に接続します。

1-mobile.css（サイズが480px以下の画面）、
2-tablet.css（480〜768 pxの画面）、
3-ptablet.css（768pxから960pxの画面）、
4-desktop.min（960pxから1280px）、
5-desktop-max.css（1280pxより大きい画面）。

→ フレームワークはgithubプロジェクトページからダウンロードできます。

将来のバージョンでは、APIの大幅な変更がhabrovchanのリクエストで計画されます。これはjQuery構文に対応し、ルーターモジュールもカーネルに入ります。

機能を改善するための提案と、必要な機能を実装するための注文を引き続き受け付けます。

フロントエンドJavaScriptフレームワークEvolution ::リリース1.5.7

More articles: