0

これはベストプラクティスのように思われるため、PHP で依存性注入を使用します (タグ付けされた bc は比較として使用されます)。PHP には OO プログラミングのためのより多くの構成要素がありますが、JavaScript で DI を使用してコードを分離することも同様に実行可能のようです。

私の例では、少し複雑です。私のオブジェクトには、それぞれ独自の依存関係を持つオブジェクト プロパティ (関数オブジェクト) が含まれています。

最上位オブジェクト内に作成した 3 つの依存関係を持つ問題のコードを次に示しますが、注入を検討しています。

単一のオブジェクト MC.MATweet のさまざまな関数オブジェクトで使用されているため、正確にはどこに注入しますか?

3 つのオブジェクトは、SText、SMessage、および SUniversal です。

/**
 **  MATweet - Text, Universal, Message - Inject?
 */

MC.MATweet = { 
    init: function() {
        var tweet_button = document.getElementById( 'po_but' ),
            tweet_input = document.getElementById( 'po_in' );
        tweet_button.addEventListener( "click", function() {
            MC.Controller( MC.o_p( 'MATweet' ) ); 
        }, false ); 
        tweet_input.addEventListener( "keypress", function( event ) {
            if( event.keyCode === 13 ) {
                MC.Controller( MC.o_p( 'MATweet' ) );  
                event.preventDefault();
            }
        }, false );
        sStyle( [ "po_in","po_lab" ] );
    },
    pre : function( o_p ) {
        var form_elements = document.getElementById( 'fo_po' ).elements,
            text_object = new SText( form_elements ),
            universal_object = new SUniversals();
        if( universal_object.get('load') === '1' )
        {
            if( !text_object.checkEmpty() ) {
                return MC.MATweet.message( 'empty', o_p );
            }
            if( !text_object.checkPattern( 'tweet' ) ) {
                return MC.MATweet.message( 'tweet', o_p );
            }
        }
        o_p.args.hash = localStorage.hash;
        o_p.page = text_object.getArray();
        return o_p;
    },
    post : function( o_p ) {
       if( o_p.server.result === 'true' ) {
            MC.C.resetView( 'po_in' ); 
            vTPane( o_p.server.tweets ); 
        }
    },
    message: function( type, o_p )
    {
        var response_element = document.getElementById( 'i_box_rr' ),
            pane_element = document.getElementById( 'i_box_r_post' ),
            message_object = new SMessage( response_element ),
            cover_element = document.getElementById( 'po_but_cov' );

        o_p.result = 'complete';
        message_object.display( type );
        cover_element.style.display = 'inline';
        MC.MATweet.movePane( pane_element, 30, 'down' );
        return o_p;
    },
    movePane: function( pane_element, pos, dir ) {
        if( ( dir === 'down' ) && ( pos < 70 ) ) {
            pos += 1;
            pane_element.style.top = ( pos ) + 'px';
            setTimeout( function( ){ MC.MATweet.movePane( pane_element, pos, dir ); }, 1 );
        }
        else if( ( dir === 'down' ) && pos === 70 ) { 
            dir = 'up';
            setTimeout( function( ){ MC.MATweet.movePane( pane_element, pos, dir ); }, 2000 );
        }
        else if( ( dir === 'up' ) && ( pos > 30 ) ) {
            pos -= 1;
            pane_element.style.top = ( pos ) + 'px';
            setTimeout( function( ){ MC.MATweet.movePane( pane_element, pos, dir ); }, 1 );
        }
        else if( ( dir === 'up' ) && ( pos === 30 ) ) {
            document.getElementById( 'po_but_cov' ).style.display='none';
        }
    },
};
4

2 に答える 2

2

おっしゃるとおり、サンプル コードは脆く、システムの他の多くの部分に依存しています。

しかし、このクラスは、依存性注入を追加しても単純にはなりません。読み取りと変更が難しくなるだけです。問題は、呼び出す外部機能に名前を付けていることではなく、そもそも非常に多くの外部コードを呼び出していることです。

現在、このコードは、ユーザー入力ツイート、サーバーに送信されるツイート、および表示されるツイートのすべてのコーディングと相互作用を処理します。毛玉であってもおかしくありません。これらを個別のクラスに分割し、それぞれが 1 つのことだけを担当し、互いに呼び出すのではなく、イベントによって通信します。

そのため、ツイート入力ビュー クラスは、ツイート テキストと共に単一の文字列を含む「new_tweet」メッセージを発行することのみを担当します。

ツイート表示ペイン クラスは、ツイートのリストへの変更をリッスンし、それ自体を再描画します。

ツイート入力ビューを作成するコントローラー コードは、「new_tweet」イベントのリスナーもアタッチし、それらの新しいツイートを送信してサーバーに投稿します。

このようにして、コードの絡み合いが最小限になり、理解、再利用性、および美しさがもたらされます。

于 2012-08-02T13:33:18.830 に答える
1

私たちは、古典的な意味での依存性注入が JavaScript で役立つことを発見しました。これは、そのトピックに関する私の以前の回答です。それぞれにいくつかの素晴らしいサンプルコードがあります。

于 2012-08-02T13:39:01.617 に答える