生活を楽にする2つの小さな機能

Backbone.jsKnockout.jsについて知っています

たまに、もっと少ないものが欲しい場合があります。



1.はじめに。 私たちは何について話しているのか、主題分野は何ですか。 何が問題なのでしょう。



私たちが話しているのは、JavaScriptがあり、「球形で、空中に」あるということです。

サブジェクト領域:オブジェクトとそのプロパティ。以下に示すメソッドによって設定されます。



var obj = new Object(); var obj = {};
      
      







それぞれのプロパティは次のとおりです。



 obj.prop = 111; obj = { "prop1" : "value1" "prop2" : 2 }
      
      







問題は何ですか:



1.ここにはそのようなオブジェクトがあり、それらはまさにプロパティを持っています。

2.プロパティがいつ変更されたかを知りたい(MVVMパターンの一部)

3.それに応じて、この変更にサブスクライブします。



UPD 1-私の意見では、 以下の非常に重要なコメントをありがとう。







2.具体的には、どのようなタスクを解決する必要があるか。



実際、これはプロパティの変更をサブスクライブし、この新しいプロパティ値で何かを実行できる関数を呼び出すタスクです。 最も「基本的な」レベルでみましょう。 単純なプロパティ(数値、文字列、ブール値)の変更を追跡するだけで十分です。 つまり、ネストされた配列、オブジェクト、および関数を持つプロパティさえ必要ない場合があります。



このような単純なプロパティに対する単純な「コールバックを使用したサインアップ」でさえ、開発時間を大幅に短縮できます。 たとえば、トリガーをハングアップしてソケットから新しいデータを受信したり、ページに視覚的に表示されるモデルのプロパティの変更をサブスクライブしたりできます。



3.アナログ。 問題に対する既存のソリューション、その長所と短所



Backgone.jsとKnockout.jsは重いものに十分なので、あまり探していませんでした。



したがって、これは決してそれらに類似したものではないため、基本操作のスタブ、または単にこれらのライブラリがコードに「関与しない」場合です。



4.問題の解決策の説明。



ひざまずいて、私はそれぞれ同じような問題を解決するためにそれぞれの長所と短所を使用して、それぞれ異なる方法で2つの機能を再構築しました:



ワープ(obj、prop、setcallback、interval)



観察(値、setcallback)



さらに観察():

-短い構文

-タイムアウト、ゲッターなどはありません

-elementaryとして初等、JSがあるところはどこでも動作します

Minus observe():単なるプロパティの代わりに関数があり、これは覚えておく必要があります。



プラスワープ():実際にプロパティをサブスクライブします。 オブジェクト内のプロパティに新しい値を単純に割り当てることができます。

反りの短所():

-膨大な構文。

-ブラウザが「古い」場合、ゲッターとセッターがない場合、変更追跡間隔は、欠落している「間隔」で大きくロードします。

-理論上、プロパティが削除されたときに間隔がリセットされるかどうかをチェックしませんでした-すべきです。



5.結論。 なぜそれを使用する価値があるのか​​、いつ、そうでないのか。



これは、「概念」を必要としない単純なことをする必要がある場合に使用できます。



すべてが非常に気取らないです:



warp-コールバックが設定されたプロパティにサブスクライブします。



observe-プロパティをコールバックから設定する関数に置き換えます。



このコードブロックの下の簡単な説明。



空のHTMLファイルに挿入するには、例で十分です。



 <textarea id = "context" cols = "70" rows = "15"></textarea>
      
      







 try{ var info = function(str){ var x = document.getElementById('context'); if(str !== undefined){ x.value += str + '\n'; } else{ x.value = ' '; } try{ x.scrollTop = x.scrollHeight;; }catch(e){ } } var warp = function( obj, prop, setcallback, interval ){ try{ var val = obj[prop]; if( !obj ){ obj = window; } if(Object.defineProperty){ Object.defineProperty( obj, prop, { get : function () { try{ return obj[prop]; }catch(e){ return; } } , set : function ( value ) { try{ val = value; if(setcallback){ if(interval) { window.setTimeout( function(){ setcallback( value, prop, obj ); }, interval); }else{ setcallback( value, prop, obj ); } } return val; }catch(e){ return; } } }); }else{ if(!interval){ interval = 1000; } var intvl = window.setInterval( function(){ if(obj[prop] !== undefined){ if( val != obj[prop] ){ val = obj[ prop ]; if( setcallback ){ setcallback( val, prop, obj ); } } }else{ window.clearInterval( intvl ); } }, interval); } }catch(e){ return; } } var observe = function( value , setcallback ){ return function( val ){ try{ if( val !== undefined ){ if( val != value ){ value = val; if( setcallback ){ setcallback( value ); } } }else{ return value; } }catch(er){ alert(er); } }; } var obj = { prop : 111, observe : observe ( 222, function( val ){ info( 'observe : ' + val ); } ) }; warp( obj, 'prop', function( val ){ info( 'callback for prop : ' + val ) }, 100 ); var count1 = 0; window.setInterval( function(){ count1++; obj.prop = count1; }, 5000 ); var count2 = 0; window.setInterval( function(){ count2++; obj.observe( count2 ); }, 1000 ); window.setInterval( function(){ info( 'observer lookup : ' + obj.observe() ); } , 2000 ); }catch(e){ alert(e); }
      
      







UPD 0はクイックリファレンスです。



私はそれをどのように使用するかを段階的に説明しようとします。

1.ある種のオブジェクトを作りましょう。

2.何らかの種類のプロパティ、文字列、数値、またはブール値があります。

3.いつ変更されるかを知り、新しい値を受け入れるコールバックでこの変更をサブスクライブします。



これには、warp(obj、prop、setcallback、interval)を使用します



ここで:

objは同じオブジェクトです

propはそのプロパティです

setcallback-変更された値を受け取る同じコールバック。

interval-コールバックを遅延させて動作させたい場合。



これがワープのすべてです。



観察に関しては、状況は似ていますが、プロパティを実際に聞くのではなく、機能に置き換えるだけで十分です。

次に:

1.オブジェクトがあります

2.プロパティがあります

3.その機能を次のように置き換えます

観察(値、setcallback)



その後、新しい値の設定は次のようになります

obj.my_property( '新しい値');

obj.my_property()と同じ値を読み取ります。



ゲッターとセッターに関する読みやすい種類:

http://robertnyman.com/javascript/javascript-getters-setters.html#regular-getters-and-setters



https://developer.mozilla.org/en/JavaScript/Reference/Operators/get



https://developer.mozilla.org/en/JavaScript/Guide/Working_with_Objects#Defining_Getters_and_Setters



ただし、これらの機能がなくてもすべて機能するはずです。



All Articles