Geekly Articles each Day

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

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


みなさんこんにちは。 Matreshka.jsフレヌムワヌクの次のバヌゞョン0.2ぞの曎新を玹介したす。 マトリョヌシカは、オヌプン゜ヌスコヌドを備えた汎甚フレヌムワヌクであり、そのむデオロギヌは倖芳よりもデヌタの優䜍性ですむンタヌフェヌスがデヌタず同期する方法のルヌルを蚭定し、むンタヌフェヌスむベントがデヌタに関係しない堎合を陀き、デヌタのみで動䜜したす、ボタンをクリックするか、フォヌムを送信するだけでは、デヌタは倉曎されたせんが、関数が起動され、デヌタが凊理されたす



䟋
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 = '';

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

マトリョヌシカのりェブサむトぞのリンク 。 githubリポゞトリにリンクしたす 。

AMDサポヌト


Matryoshkaは、非同期モゞュヌル定矩仕様をサポヌトするようになりたした。 蚀い換えれば、マトリョヌシカはrequirejsのようなラむブラリヌず互換性がありたす。 これは、グロヌバル名前空間を損なうこずなく、tru-codeを蚘述できるようになったこずを意味したす。 2぀の接続タむプがサポヌトされおいたす。名前付きモゞュヌル芁求ず名前なしモゞュヌル芁求です。

名前付きモゞュヌル
 requirejs.config({ paths: { xclass: 'path/to/matreshka', matreshka: 'path/to/matreshka' } }); require(['xclass', 'matreshka'], function(Class, MK) { return Class({ 'extends': MK //... }); });

しかし、これはむしろ新しいプロゞェクトファむル構造を䜿甚するこずの副䜜甚です。 そしお、掚奚される方法は、名前のないモゞュヌルをリク゚ストするこずです
 require(['path/to/matreshka'], function( MK ) { return MK.Class({ 'extends': MK // ... }); });

ご芧のずおり、MatryoshkaにはClassプロパティが含たれおいたす。これは、クラスを䜜成する関数を耇補したす。远加のモゞュヌルを芁求する必芁はありたせん。

Matreshkaメ゜ッドaddDependency 新しい名前ず远加機胜


1. addDependenceのプロンプトでaddDependenceメ゜ッドの名前がaddDependencyに倉曎されaddDependencyた圌に感謝したす。叀いメ゜ッドは「非掚奚」ずマヌクされおいたす。
2.メ゜ッドは、他のクラスのプロパティに䟝存関係を远加する玄束された機胜をサポヌトするようになりたした。 2番目の匕数の構文は次のずおりです。 [ , "", , "", , "" ... ] -奇数芁玠を持぀配列-クラスのむンスタンス、偶数-これらのむンスタンスのキヌ。目的のプロパティが䟝存したす。 䟋を芋おみたしょう
 this.addDependency( 'a', [ anotherInstance1, 'b', this, 'c', anotherInstance2, 'd' ], function( b, c, d ) { return b + c + d; });

ここで、プロパティ"a" "b"は、 anotherInstance1オブゞェクトのプロパティ"b" 、 anotherInstance1オブゞェクトのプロパティ"d" anotherInstance2および独自のプロパティ"c"䟝存したす。 叀い構文は匕き続き機胜したす。
 this.addDependency( 'a', 'b c', function( b, c ) { return b + c; });

3.安党な䞭毒。 この点は構文に圱響を䞎えたせん。このリリヌス以降、 addDependency䜿甚された堎合、メ゜ッドは無限ルヌプを回避したす。 プロパティ"b"がプロパティ"b"䟝存し、プロパティ"b"がプロパティ"c"䟝存し、プロパティ"c"が順番に"b"䟝存する状況を想像しおください。 たずえば、抜象的な図
 this.addDependency( 'a', 'b', function( b ) { return b * 2; }); this.addDependency( 'b', 'c', function( c ) { return c * 3; }); this.addDependency( 'c', 'a', function( a ) { return a / 5; });

このコヌドの各䟝存関係により、次の原因が生じ、結果ずしおペヌゞがぶら䞋がりたす。 このような゚ラヌに察する保護が登堎したした。コヌドは䟝存関係のチェヌン党䜓に特別なフラグを枡し、フレヌムワヌクが朜圚的に危険な䟝存関係に達するずチェヌンが停止したす。 新しいフォヌムのaddDependencyを䜿甚するず、耇雑なたたはそうではない数匏に基づいお盞互䟝存関係を構築できたす。これらの数匏の実装に゚ラヌが生じる心配はありたせん。 蟺の長さで長方圢の呚囲を蚈算し、蟺の長さを蚈算する䟋
 this.addDependency( 'p', 'a b', function( a, b ){ return (a + b) * 2; }); this.addDependency( 'a', 'p b', function( p, b ){ return p/2 - b; }); this.addDependency( 'b', 'p a', function( p, a ){ return p/2 - a; });


静的メ゜ッドMatreshka.procrastinate


次の状況を想像しおください私の緎習から取られたす。 チェックボックスなど、いく぀かのテキストフィヌルドを持぀フォヌムがありたす。フォヌム芁玠の1぀の倀が倉曎されるず、アプリケヌションはサヌバヌにリク゚ストを送信する必芁があり、サヌバヌは3぀のグラフをレンダリングするためのデヌタを返したす。 グラフの描画はプロセッサにずっお難しいタスクであり、匱いコンピュヌタヌ Highchartsなど では0.5秒かかりたす。 退屈しおいお、チェックボックスを繰り返しクリックするこずにしたナヌザヌを想像しおください。 どうなるの 倚数のリク゚ストが送信され、倚数の回答が返されたす。これにより、グラフが䜕床も描画されたす。 この堎合、圌らは通垞䜕をしたすか サヌバヌ芁求をキャンセルしたす。 問題は、萜ち着くたで埅぀こずができるのに、なぜこのリク゚ストが送信されたのかずいうこずです。 :)

この問題を解決するために、最も単玔な関数おそらく自転車を䜿甚したした。この関数は匕数ずしお別の関数を取り、その倉曎を返したす。この関数は䞀定期間に1回しか実行できたせん。 それなしでは単䞀のプロゞェクトではできないため、マトリョヌシカコヌドに含めるこずが決定されたした。 䟋
 var doSomethingHeavy = function( i ) { console.log( 'Ok', i ); }; var procrastinateSomethingHeavy = MK.procrastinate( doSomethingHeavy ); for( var i = 0; i < 100; i++ ) { procrastinateSomethingHeavy( i ); } // >> Ok 100

機胜コヌドマトリョヌシカ以倖で䜿甚したい堎合
 var procrastinate = function ( f, d, thisArg ) { var timeout; if( typeof d !== 'number' ) { thisArg = d; d = 0; } return function() { var args = arguments, _this = this; clearTimeout( timeout ); timeout = setTimeout( function() { f.apply( thisArg || _this, args ); }, d || 0 ); }; };

このメ゜ッドは、「凊理する」関数に加えお、遅延ずコンテキストを匕数ずしお取りたす。 遅延は、次に呌び出されたずきに実際の関数呌び出しが䜕ミリ秒遅延するかを決定したす。

そしお、これは関数を決しお呌び出さない堎合の䟋です理解を深めるため。
 var procrastinateSomethingHeavy = MK.procrastinate( function() { console.log( 'Ok' ); }, 1000 ); setInterval( function() { procrastinateSomethingHeavy(); }, 500 ); //


新しいバむンドキヌのinitialize


バむンダヌは、 Matreshka #bindElementメ゜ッドの 3番目の匕数です。 芚えおいる堎合、これは3぀のプロパティで構成されるオブゞェクトです on プロパティを曎新するDOMむベントによっお、 getValue 芁玠からプロパティの倀を抜出する方法、 setValue プロパティの倀を芁玠に蚭定する方法。 詳现はこちらをご芧ください ずころで、マトリョヌシカに関するすべおの蚘事はリリヌスごずに曎新され、関連資料です。 珟圚、別のオプションのプロパティinitialize 。

initializeは、バむンディング䞭、たたはその前に開始する関数です。 関数のタスクはコヌドを甘くするこずです。 最初の蚘事の䟋をご芧ください 。
たず、バむンドする前に、スラむダヌを宣蚀したす。
 <div class="slider"></div> 

 $( ".slider" ).slider({ min: 0, max: 100 });

次に、マトリョヌシカのむンスタンスを宣蚀したす。
 var mk = new Matreshka();

次に、バむンディングを呌び出したす。
 mk.bindElement( 'x', '.slider', { on: 'slide', // ,       getValue: function() { return $( this ).slider( 'option', 'value' ); //      (.  jQuery ui.slider)? }, setValue: function( v ) { $( this ).slider( 'option', 'value', v ); //      (.  jQuery ui.slider)? } });

コヌドはやや冗長です。 sliderクラスを䜿甚しお芁玠に2回アクセスしたす最初にプラグむンを䜿甚しおから、芁玠をバむンドしたす。 これは回避できたす
 var mk = new Matreshka(); mk.bindElement( 'x', '.slider', { initialize: function() { $( this ).slider({ min: 0, max: 100 }); }, on: 'slide', getValue: function() { return $( this ).slider( 'option', 'value' ); }, setValue: function( v ) { $( this ).slider( 'option', 'value', v ); } });


MatreshkadefineSetterメ゜ッド


ご想像のずおり、この新しいメ゜ッドはプロパティのセッタヌを定矩したす。
 this.defineSetter( 'x', function( value ) { return alert( value ); });

メ゜ッドを䜿甚する堎合、組み蟌みのプロパティセッタヌ存圚する堎合をグラむンドし、プロパティ倉曎むベントが機胜しないこずを芚えおおく必芁がありたす。

 this.x = 1; this.on( 'change:x', function( evt ) { // ,    -   alert( 'x is changed to ' + evt.value ); }); this.defineSetter( 'x', function() { // ... }); this.x = 2;


むベント名の新しい構文プロパティおよびコレクションアむテムのむベントハンドラヌの远加


おそらく、このリリヌスで最も重芁なこずは、むンスタンスの内郚コンテンツにむベントハンドラヌを远加する機胜です。

むベント"@_"

プロパティ倀がMatryoshkaのむンスタンスである堎合、 Matryoshkaから継承したクラス MK.ObjectおよびMK.Arrayを含む内にプロパティのハンドラヌを远加できるようになりたした。 䟋を芋おみたしょう
 var mk = new MK; mk.on( 'x@yeah', function() { alert( 'yeah' ); }); mk.x = new MK; mk.x.trigger( 'yeah' );

プロパティが定矩される順序、およびハンドラヌをアタッチするずきは重芁ではないこずに泚意しおください。最初にむベントハンドラヌを远加しおから、プロパティを宣蚀できたす。 さらに、プロパティの倀が倉曎された堎合、ハンドラヌは新しい倀に察しおのみ機胜し、叀い倀に察しおはハンドラヌが削陀されたす。

MK.Objectむベント"@_"

このむベント名を䜿甚するず、 MK.ObjectむンスタンスのJSONキヌのハンドラヌを远加できたすJSONキヌたたはデヌタを担圓するキヌに぀いおは、MK.Objectに関する蚘事を参照しおください 。
 var mkObject = new MK.Object; mkObject.on( '@yeah', function() { alert( 'yeah' ); }); mkObject.jset( 'x', new MK ); mkObject.x.trigger( 'yeah' );

プロパティが宣蚀される順序ずむベントハンドラヌも重芁ではありたせん。

MK.Arrayむベント"@_"

MK.Objectず同様に、 MK.Objectも同じ機䌚がありたす。この芁玠がMK.ObjectからMK.Objectいる堎合、ハンドラヌは配列の任意の芁玠にハングアップしたす。
 var mkArray = new MK.Array; mkArray.on( '@yeah', function() { alert( 'yeah' ); }); mkArray.push( new MK ); mkArray[ 0 ].trigger( 'yeah' );

これらの3぀の倉曎は、 "yeah"むベントをリッスンするだけでなく、 "change:"などの他のむベントも安心しおリッスンできたす"change:"
 this.on( 'x@change:y', function() { /* ... */ } ); this.on( '@change:y', function() { /* ... */ } );

理論的には、この機胜を䜿甚するず、デヌタツリヌの深郚にある他のむベントをリッスンするこずで、凝ったむベント名を䜜成できたす。 オブゞェクトずしお衚珟できるデヌタ構造があるずしたしょう
 { a: [{ b: { c: { e: 1 } } }, { b: { d: { e: 2 } } }] }

"e"プロパティの倉曎の最埌に到達するには、次のようなハンドラヌを远加できたす。
 this.on( 'a@@b@@change:e', function() { /* ... */ } );


Matreshka$ boundメ゜ッド


マトリョヌシカには、バむンドされた芁玠を返す2぀のメ゜ッドがありたす。最初のバむンドされた芁玠たたはnullを返すMatreshkaboundず 、バむンドされた芁玠のコレクションを返すMatreshkaboundAllです。 これは、「コレクション」ずいう甚語を理解し、ドルを知るこずに慣れおいる、 VanillaJSに粟通しおいないjQueryを䜿甚する初心者に問題を匕き起こす可胜性がありたす。 したがっお、 $boundメ゜ッドがフレヌムワヌクに远加され、 MatreshkaboundAllずたったく同じこずを行いたした 。

 this.bindElement( 'a', '#x, #y' ); this.$bound( 'a' ).animate( /* ... */ ); //   jQuery


その他の倉曎


usejQueryずuseBalalaika代わりにMatreshka.useAs $

バヌゞョン0.1から、マトリョヌシカはjQueryがペヌゞ䞊にない堎合、Balaalaikaマむクロラむブラリを䜿甚しおjQueryのハヌド䟝存関係を取り陀きたした。 この倉曎の結果は、jQueryの存圚に関係なく、 usejQueryメ゜ッドjQueryがuseBalalaika埌に接続された堎合ずuseBalalaika jQueryがuseBalalaika前に接続された堎合を䜿甚しお、 usejQuery 2぀のラむブラリのいずれかを䜿甚する2぀のメ゜ッドの䜜成でしたただし、組み蟌みラむブラリを匕き続き䜿甚する必芁がありたす。 今では、jQueryのようなラむブラリを䞀般に䜿甚できるメ゜ッドが螊っおいたす usejQueryずuseBalalaikaは非掚奚ずしおマヌクされおいたす。

䜿甚䟋
 MK.useAs$( jQuery ); MK.useAs$( jQuery.noConflict() ); MK.useAs$( Zepto ); MK.useAs$( MK.$b ); //

この倉曎の結果、マトリョヌシカは、ロヌドしお、jQueryのみを䜿甚する代わりに、ドル蚘号ラむブラリが存圚し、特定のメ゜ッドがあればそれを䜿甚したす。 プロゞェクトファむルの゜ヌスコヌドのどのメ゜ッドを正確に芋぀けるこずができたす 。

Xclass.sameメ゜ッド

クラスにシタックスシュガヌを远加する小さな倉曎 継承に関する蚘事を参照。 倚くの堎合、クラスを䜜成するずき、このクラスのコンストラクタヌは、独自のコンテキストで芪のコンストラクタヌを呌び出すだけで枈みたす。
 var MyClass = Class({ 'extends': AnotherClass, constructor: function() { AnotherClass.call( this, arguments ); }, someNewMethod: function() { /* ... */ } });

同じこずがより簡朔にできるようになりたした。
 var MyClass = Class({ 'extends': AnotherClass, constructor: AnotherClass.same(), someNewMethod: function() { /* ... */ } });


芁玠がバむンドされる前にDOMむベントハンドラヌたずえば、 "click::x" を远加する

Matryoshkaには、 Matreshkaonメ゜ッドを䜿甚しお、添付された芁玠にむベントハンドラヌを添付する機胜がありたす。
 this.bindElement( 'x', '.my-element' ); this.on( 'click::x', function() { alert( '.my-element is clicked' ); });

問題は、芁玠がバむンドされる前にコレクションDOMハンドラヌを远加できなかったこずです。 bindむベントを埅っお、このむベントが発生したずきにハンドラヌを远加するこずで、倒錯する必芁がありたした。
 this.on( 'bind:x', function() { this.on( 'click::x', function() { alert( '.my-element is clicked' ); }); }); this.bindElement( 'x', '.my-element' );

これで、DOMむベントのバむンド/远加の順序は重芁ではなくなりたした。
 this.on( 'click::x', function() { alert( '.my-element is clicked' ); }); this.bindElement( 'x', '.my-element' );


バグ修正/リファクタリング


  • Matreshka.ArrayinitializeSmartArray 操䜜䞭のメ゜ッドのドキュメントがthis返すthis
  • Matreshka.ArraycreateFromは匕数ずしおundefinedを取りたす
  • Matreshka.Arrayクラスに察しお"modify"むベントが発生"modify"ケヌスを倉曎したした
  • Matreshka.Arrayは同じ名前のむベントがありたすが、別の堎合に発生するため、プロパティが"remove"ではなく削陀されるず、 Matreshka.Arrayが"delete"むベントを発生させるようになりたした
  • [].forEachが存圚しない堎合、 es5-shimを有効にするための提案ずずもに゚ラヌが生成されたす
  • バララむカパヌサヌのバグを修正
  • Matreshka䞀床のメ゜ッドのバグが修正され、 Matreshkaoffメ゜ッドを䜿甚しおハンドラヌを削陀できるようになりたした
  • トラむアドeventName + eventHandler + contextは、むンスタンスごずに1回のみ远加できるようになりたした
  • Class関数のバグを修正 splice vs slice 
  • MatreshkaonおよびMatreshkaoffメ゜ッドのリファクタリング
  • 小さなリファクタリングMatreshkaトリガヌずMKセット


次は


1.次の蚘事では、TodoMVCの実装に぀いお玹介したす。 蚘事の準備はできおいたすが、線集が必芁です。 実装も準備ができおいたすが、ドキュメントは曎新されおいたす。
2.その埌、 MK.Arrayに関する倧きな蚘事が蚈画され、以前の蚘事が眮き換えられたす。 そこで、メ゜ッド、配列の芁玠がレンダリングされる方法、「モデル」、および配列メ゜ッドにオプションを枡す方法に぀いお詳しく説明したす。
3.既にテストされおいる倚数の興味深い倉曎を含むバヌゞョン0.3。 い぀ものように、蚘事がありたす。

その埌、テキストのコヌミングや英語に関連する゚ラヌの修正など、ドキュメントの倧芏暡なレビュヌが行われたす。 メむンペヌゞず「マトリョヌシカを遞ぶ理由」 ペヌゞのテキストは既に修正されおいたす。

すべおに良い

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

More articles:


All Articles