Geekly Articles each Day

アヌカむブMatreshka.js v0.1

この蚘事は叀くなっおいたす。 珟圚のバヌゞョン履歎を参照しおください。


以前の蚘事はすべお珟圚の状態に曎新されたした
リポゞトリ

サむトドキュメントもありたす

Matreshka Logo みなさんこんにちは。 マトリョヌシカに関する䞀連の蚘事が最埌に公開されおから5か月が経過したした。 それ以来、少数の゚ラヌが修正され、コメントの圱響䞋でプロゞェクトがShoojuのスポンサヌを芋぀け、ロゎず通垞のブヌトストラップ以倖のWebサむトを受け取ったなど、いく぀かの䟿利な機胜が登堎したした。



マトリョヌシカは、デヌタの重芁性が倖芳を支配する汎甚フレヌムワヌクであり、デヌタが曎新されるずむンタヌフェむスが自動的に曎新されるこずを思い出させおください。
Matryoshkaを䜿甚するず、デヌタずプレれンテヌションのさらなる同期を心配するこずなく、デヌタずプレれンテヌション芁玠オブゞェクトプロパティや入力フィヌルドの倀などを簡単に関連付けるこずができたす。 たずえば、最も単玔なバむンディングは次のようになりたす。
<select class="my-select"> <option>1</option> <option>2</option> <option>3</option> </select>

むンスタンスを䜜成したす。
 var mk = new Matreshka();

xプロパティを.my-select芁玠に.my-select 。
 mk.bindElement( 'x', '.my-select' );

デヌタを倉曎する
 mk.x = 2;

プロパティxに異なる倀を割り圓おた埌、それに応じお芁玠の状態が倉化したす。
ラむブ䟋をご芧ください

入れ子人圢のもう1぀の重芁な機胜は、むベントカスタムむベントを含むです。 たずえば、マトリョヌシカはプロパティの倀の倉化をキャッチできたす。
 mk.on( 'change:x', function( evt ) { alert( 'x   ' + evt.value ); });

コヌドは"x "を出力したす。
 mk.x = '';

これらおよびその他の機胜の詳现に぀いおは、䞊蚘のリンクを参照しおください。


蚘事のデザむンに぀いお少し
jsdoc構文を䜿甚しおメ゜ッドずプロパティを瀺したす。特に、ラティスは、たずえばMK#addDependenceは、 MK#addDependenceのむンスタンスであるaddDependenceメ゜ッドに぀いお説明しおいるこずを意味したす。


最もおいしい


䟝存関係 MKaddDependenceメ゜ッド 


この最もクヌルな方法を䜿甚するず、䞀郚のデヌタが他のデヌタに䟝存するこずを確認できたす。 最初の匕数は䟝存プロパティのキヌ、2番目はプロパティが䟝存するキヌの配列たたはスペヌスで列挙されたキヌを持぀文字列、3番目はプロパティの新しい倀を返すハンドラヌ関数です。 これは、プロパティを取埗するたびにgetterが呌び出され、プロパティが䟝存するデヌタを倉曎するずきに、 addDependenceがプロパティの倀を事前に蚈算するずいう違いがあるゲッタヌの䞀皮の眮換です。 比范的重い蚈算はコヌドのパフォヌマンスに倧きな圱響を䞎える可胜性があるため、ゲッタヌを慎重に䜿甚する必芁がありたす。 リ゜ヌスの消費ずいう芳点から芋るず、「䟝存関係」はデヌタ倉曎むベントの通垞の凊理ず違いはなく、実際、それらに察する構文䞊の砂糖です。 さらに、このメ゜ッドは自己文曞化コヌドに向けたもう1぀のステップです。

プロパティヌf垞にプロパティヌa, b, c, d, eの合蚈になる必芁があるずしたしょう。
これは、玔粋なむベントに基づいたコヌドのようです。
 this.on( 'change:a change:b change:c change:d change:e', function() { this.f = this.a + this.b + this.c + this.d + this.e; });

それをこれず比范しおください
 this.addDependence( 'f', 'abcd e', function() { return this.a + this.b + this.c + this.d + this.e; });

たたはこれでも
 this.addDependence( 'f', 'abcd e', function( a, b, c, d, e ) { return a + b + c + d + e; });


たず 、ゞェスチャを少なくする必芁がありたす 'change:'をヒヌプする必芁はありたせん
第二に 、メ゜ッドず匕数の名前により、察応するコヌド行が䜜成される理由を明確に理解したす。 人間の蚀語に翻蚳するず、最初の方法は「 a, b, c, d, eのプロパティを倉曎するずきa, b, c, d, e䜕かをするずき」、2番目の方法は「プロパティfプロパティa, b, c, d, eぞの䟝存性を远加する」 「。 違いを感じたすか
第䞉に 、他のプロパティが䟝存するプロパティの1぀がsilentフラグで倉曎された堎合、最初のオプションは機胜したせん。

たずえば、境界線を蚈算するタスクがありたす。

オプション1、むベント時
 this.on( 'change:a change:b', function() { this.p = ( this.a + this.b ) * 2; });

䟝存関係を䜿甚するオプション2
 //  2 this.addDependence( 'p', 'a b', function() { return ( this.a + this.b ) * 2; });

今、私たちが呌び出す堎合
 this.set({ a: 2, b: 3 }, { silent: true });
...その埌、最初のバリアントではpは倉化せず、2番目では倉化したす。

p倉曎でむベントハンドラヌをハングさせ、 pがsilentフラグの倉曎に䟝存するプロパティの1぀をハングさせた堎合、予想どおり、倉曎ハンドラヌpは呌び出されないこずに泚意しおください。
 this.on( 'change:p', function() { /* ... */ } ); this.set( 'a', 12, { silent: true }); //   "p"    ""

次のバヌゞョンでは、他のクラスにあるデヌタぞのプロパティの䟝存関係を远加する予定ですデヌタが倖芳を支配するアプリケヌションの䞀般的なタスク。 これは既に実装されおいたすが、蚀語構文の制限により文曞化されおいたせん。 他のクラスぞの䟝存関係は次のようになりたす。
 this.addDependence( 'a', [ instance1, 'bc d', instance2, 'ef g', this, 'hij' ], function() { /* ... */ });

2番目の匕数の奇数の配列芁玠がむンスタンスである堎合、偶数の芁玠はキヌのリストです。 具䜓的に芋えたすが、他のオプションがあれば嬉しいです。

䟋のあるペヌゞで、メ゜ッドliveを芋るこずができたす。

Rendolのコメントに関しおマッピングは䟝存関係を䜿甚しお実装できたす。

メディ゚ヌタヌ仲介者


MKメ゜ッドsetMediator


倚くの堎合、デヌタの怜蚌ず倉換のタスクが含たれたす。 クラスにプロパティがあるずしたす。プロパティは垞に文字列であり、他には䜕もありたせん。 暙準ツヌルを䜿甚しおこの問題を解決しおみたしょう。
 // - this.on( 'change:a', function() { if( typeof this.a !== 'string' ) { this.a = String( this.a ); } }); // - 1 this.on( 'change:a', function() { if( typeof this.a === 'string' ) { /* ... */ } }); // - 2 this.on( 'change:a change:b', function() { if( typeof this.a === 'string' ) { /* ... */ } }); //   this.a = 123;

ここで䜕が起こっおいるのか理解しおいたすか 最初のハンドラヌはaを文字列に倉換a 、最埌の2぀のハンドラヌはa文字列かどうかを匷制的にチェックaたす。コンバヌタヌハンドラヌはすべおのハンドラヌ自身を含むを再び開始するからです。 beforechange:%% event beforechange:%%ような解決策を求めおbeforechange:%% 、フレヌムワヌクに新しい抂念「䞭間䜓」を導入するこずが決定されたした。

メディ゚ヌタヌたたはメディ゚ヌタヌは、このプロパティヌの倉曎に関連するむベントがトリガヌされる前に、プロパティヌの倀を倉曎したす。

MK#setMediatorの構文は単玔です。最初の匕数はメディ゚ヌタヌを蚭定するキヌ、2番目の匕数はプロパティの新しい倀を返す関数です。 代替構文クラスで耇数のメディ゚ヌタヌを䞀床にハングアップする堎合、メディ゚ヌタヌキヌオブゞェクトがケヌスのメ゜ッドに枡されたす。

たずえば、プロパティaは垞に文字列で、プロパティbは垞に敎数たたはNaN でなければなりたせん
 this.setMediator( 'a', function( value ) { return String( value ); }); this.setMediator( 'b', function( value ) { return parseInt( value ); });

そしお、JavaScriptをよく知っおいる人のために
 this.setMediator( 'a', String ); this.setMediator( 'b', parseInt );

メディ゚ヌタヌは、そのような単玔な可胜性に限定されたせん。 蚈算の実行を犁止するものはありたせんが、アプリケヌションのパフォヌマンスを損なわないように泚意しおください。

この方法は、サヌバヌが特定のタむプの倀を受け入れる堎合を含め、非垞に䟿利でクヌルです。 メディ゚ヌタヌは1぀だけです。 同じプロパティでの次のMK#setMediatorは、叀いピックをブロックしたす。 「䞭間」を削陀するために、関数の代わりにnullを枡すこずができたす。

䟋のあるペヌゞから実際の䟋を芋おみたしょう 。
 mk.setMediator({ percentageValue: function( v ) { return v > 100 ? 100 : v < 0 ? 0 : v; }, stringValue: String, integerValue: parseInt });

3぀のプロパティにピックを蚭定したした。 1぀目はパヌセントプロパティですプロパティの倀は0から100たでで、この範囲の境界を超えるものは自動的に有効な倀に倉換されたす0未満の堎合、倀は0になり、100を超える堎合、倀は100になりたす。 2番目の倀は文字列です。プロパティは垞に文字列でなければなりたせん。 3番目は垞に敎数たたはNaN でなければなりたせん。 アむデアを開発するには、垞に真たたは停のプロパティを䜜成し、垞に䜕らかのクラスのむンスタンスになるプロパティを䜜成したす...

MK.Arrayメ゜ッドsetItemMediator


別の皮類のメディ゚ヌタヌがありたす配列芁玠のメディ゚ヌタヌです。 このようなメディ゚ヌタヌをむンストヌルするず、远加された各芁玠が垌望どおりに倉換されたす。 ドキュメントの䟋をご芧ください。
 var mkArray = new MK.Array( 1, 2, 3, 4, 5 ); mkArray.setItemMediator( function( value ) { return String( value ); }); mkArray.push( 6, 7 ); mkArray.unshift( true, {} ); 

 console.log( mkArray.toJSON() ); // [ "true", "[object Object]", "1", "2", "3", "4", "5", "6", "7" ]

これにより、型付き配列、぀たり文字列の配列が䜜成されたす。 はい、もちろん、そのような型付き配列は、組み蟌み型付き配列ずパフォヌマンスがさらに異なりたす。 しかし、デヌタを怜蚌および倉換する機胜には限界がありたせん。

配列芁玠のメディ゚ヌタヌがクラス党䜓で唯䞀のものであるこずを忘れないでください。 たた、メディ゚ヌタをnull蚭定するこずで削陀できnull 。
 mkArray.setItemMediator( null );

ずころで、䞊蚘の䟋は䞊玚プログラマ向けに修正できたす。
 mkArray.setItemMediator( String );

かっこいい

「倚数のアプリケヌションによる」


蚘事の最初のシリヌズの発行埌、habrayuzersはマトリョヌシカのいく぀かの機胜を批刀したした。 批刀は十分に根拠があり、物議を醞す問題を怜蚎しお修正するこずが決定されたした。 それらのいく぀かを次に瀺したす。

1. MK.ArraypopおよびMK.Arrayshiftは、「self」ではなく、削陀されたアむテムを返したす。 Starfall  蚘事ぞのコメント 、 winbackgo  蚘事ぞのコメント
2. input[type="text"]および'keyup'デフォルトのバむンダヌは、 'keyup'だけでなく'paste'むベントをリッスンするようになりたした。 safron  蚘事ぞのコメント
3. input[type="checkbox"]およびinput[type="radio"]のデフォルトのバむンダヌは、 'keyup'むベントをリッスンするようになりたした。 これは、これらの芁玠にデヌタをバむンドするずきにキヌボヌドからこれらの芁玠を操䜜できるこずを意味したす同じコメント。

Balalaika

バララむカ


さらに、 jQueryぞの匷い䟝存関係を削陀するこずが決定されたした。 私の意芋では、 jQueryは玠晎らしいラむブラリですが、新しいブラりザヌでは関連性を倱いたす。 珟圚、ペヌゞにjQueryない堎合、「Balalaika」ず呌ばれるミニラむブラリに眮き換えられたす泚そうでない堎合のみjQuery接続されおいる堎合、 jQueryは匕き続き䜿甚されたす。

balalaikaはArray.prototype継承するため、開発者は配列に含たれるすべおのメ゜ッドに加えお、クラス addClass 、 removeClass 、 hasClass 、むベント on 、 off 、HTML解析 parseHTML などをparseHTML jQuery互換メ゜ッドを䜿甚できたす。

Balalaikaを盎接䜿甚するには、グロヌバル倉数$ bが䜿甚されたす。
 $b( 'div' ).forEach( function(){ /* ... */ } ); $b( '.blah-blah', context ).is( 'div' ); $b( 'input[type="text"]' ).on( 'keydown', handler );


バララむカに関する別の投皿を曞く予定です

banzalik  願いを蟌めおコメントする
jMas  別のコメント

その他の革新


MK遞択方法


thisバむンドされたセレクタヌ内のセレクタヌに䞀臎する最初の芁玠を遞択しthis キヌ"__this__" 、以前の蚘事を参照。 このメ゜ッドは、芁玠のコレクションではなく、個々の芁玠での䜜業を簡玠化するために䜜成されたした。
 this.select( '.blah-blah' );


MKselectAllメ゜ッド


thisぞのバむンド内でセレクタヌに䞀臎するすべおの芁玠を遞択したす。 $ ドル蚘号メ゜ッドず同じです。 MK#selectAll 、メ゜ッドのセットを完了するためMK#selectAll䜜成されたした。「select」メ゜ッド MK#select がある堎合、「select all」メ゜ッドが必芁です。
 this.selectAll( '.blah-blah' ); //   ,   this.$( '.blah-blah' );


MK.Arraypullメ゜ッド


指定されたむンデックスを持぀アむテムを削陀しお返したす。
 var x = this.pull( 3 );

これは、 splice䞊の構文糖です。
 var x = this.splice( 3, 1 )[ 0 ];


プロパティisMK 、 isMKArrayおよびisMKObject


察応するクラスのむンスタンスで垞にtrueであるプロパティ。
 var mkObject = new MK.Object(); alert( mkObject.isMK && mkObject.isMKObject ); // true


修正


さらに、いく぀かのバグが修正されたした。 修正のリストは次のずおりです。


名前が倉曎されたメ゜ッドずプロパティ


semver.orgの掚奚事項に埓っお、廃止されたメ゜ッドずプロパティはリリヌス1.0たで削陀されたせんが、譊告ず新しいメ゜ッドを䜿甚する芁求はコン゜ヌルに衚瀺されたす。


スマヌトアレむ


MK.ArrayプラグむンはMK.Arrayで蚀及されおMK.DOMArray 、 MK.Arrayに関する蚘事で蚀及されおいMK.Array 。 ぀たり、「泚目を集める」GIFが反映する機胜は、そのたたで機胜しおいたした。 MK.DOMArrayプラグむンは、配列が倉曎远加、削陀、䞊べ替えなどするず自動的にDOMを倉曎するこずを思い出させおください。

マトリョヌシカのりェブサむトの䟋をご芧ください 。 スマヌトアレむの詳现な説明は、少し埌で蚈画されたす。

ロヌドマップ


  • 眮換可胜なModelプロパティを実装したすこれはBackboneのmodel䌌おいたす。 この機胜は、配列芁玠のメディ゚ヌタヌ䞊の構文糖衣です。
  • 遅延初期化。 珟圚、継承するずきは、垞にinitMKメ゜ッドを呌び出す必芁がありたす。 コヌシャではありたせん。
  • むベント゚ンゞンを曞き換えたす。 おそらく、DOM EventTargetむンタヌフェヌスがEventTargetずなるでしょう。
  • MK#addDependenceを曎新しお、他のクラスむンスタンスぞの䟝存関係を䜜成したす䞊蚘を参照。
  • ミニファむダのコヌドを最適化したす。
  • サむト䞊の正しいテキスト。 ご芧のずおり、サむトは英語であり、テキストに誀りがありたす。 ゚ラヌがあるテキストを遞択した埌、Ctrl + Enterの組み合わせを䜿甚しお、゚ラヌを修正するこずができたす芁求プヌルを䜜成しないように。 ずおも感謝したす。


バヌゞョン1.0玄1幎埌に予定では、最初に廃止されたメ゜ッドを削陀し、次に8番目のドンキヌのサポヌトを削陀する予定です。 IE8をサポヌトする人がいなければ、すべおのむンタヌネットの子猫は幞せになりたす。

結論ずしお


プロゞェクトの呚りの明らかな沈黙にもかかわらず、マトリョヌシカは開発䞭です。 すべおの機胜は培底的にテストされおいるだけでなく、ラむブアプリケヌションでも動䜜したす。

Matryoshkaのもう1぀の目暙は、フレヌムワヌクを䜿甚する開発者を「デヌタの神」にし、むンタヌフェむスを気にせずに、モデルで䜕が起こっおいるかを完党に制埡するこずです。 たずえば、オブゞェクトず配列のツリヌにデヌタ倉曎むベントのポップアップむベントを実装する予定で、これは非垞にクヌルです。 さらに-もっず...

アクセサゲッタヌずセッタヌに基づいたMatryoshkaコアによっお提䟛されるスペヌスは、プログラマヌの創造性のための最も広い分野を提䟛したす。 同意し、仲介者ず䟝存関係のアむデアは衚面にありたす。 入力では、 valueプロパティは垞に文字列であるため、そこに配眮しないように、 valueAsNumberプロパティvalueAsNumber垞に文字列倀に䟝存する数倀です...

投皿を最埌たで読んだたたはスクロヌルしおくれおありがずう。 すべおの善の光線。

Source: https://habr.com/ru/post/J217241/

More articles:


All Articles