2

ユーザーアクションを処理する特定のモジュールがあります-それらはコントロールモジュールです。6つありましたが、コントロールと呼ばれるモジュールに非常によく似た2つを統合したので5つあります。

私が気付いたのは、同様のコードを統合すると、効率が少し低下することです。たとえば、Controlには、プログラムフローを決定するための追加の論理ステートメントがあります。

if( this.type === 'signup' && !this.text_object.checkPattern( 'name' ) )

この単純な行により、ControlSignInとControlSignUpを組み合わせることができました。唯一の違いは、サインアップでサインインにない名前をチェックすることでした。

この方法で続行でき、より複雑なコードを取得できますが、コードのフットプリントは小さくなります。

（複雑さと実行時間）と（コードフットプリント）の間にはトレードオフがあります。

それは問題ではないと思いますが、確認したかっただけです。

ControlTweet例として、私もフィットできるものを入れましたControl.

質問？

ControlTweetをControlと統合する必要がありますか？

一般的に、どこに線を引くのですか、それとも好みの問題ですか？

コントロール

/**
 *Control - receives incoming requests for client use
 */

var Control = ( function () 
{
    var Control = function ( type )
    {
        this.TIME = 4000;
        this.type = type;
        this.form_element = document.getElementById( type ), 
        this.response_element = document.getElementById( type + '_response' );

        this.text_object = new TextValidator( this.form_element ),
        this.message_object = new Message( this.response_element ),
        this.effects_object= new Effects( this.response_element );
    };
    Control.prototype.invoke = function( ) 
    {
        if( Global.validate_input_on === 1 )
        {
            if( !this.text_object.checkEmpty() ) 
            {
                this.message_object.display( 'empty' );
                this.effects_object.fade( 'down', this.TIME );
                return false;
            }
            if( this.type === 'signup' && !this.text_object.checkPattern( 'name' ) ) 
            {
                this.message_object.display( 'name' );
                this.effects_object.fade( 'down', this.TIME );
                return false;
            }
            if( !this.text_object.checkPattern( 'email' ) ) 
            {
                this.message_object.display( 'email' );
                this.effects_object.fade( 'down', this.TIME );
                return false;
            }
            if( !this.text_object.checkPattern( 'pass' ) ) 
            {
                this.message_object.display( 'pass' );
                this.effects_object.fade( 'down', this.TIME );
                return false;
           }
        }
        var response_element = this.response_element;
        new Ajax().invoke( serializeArray( this.form_element ) + '&ajax_type=' + this.type + '_control', function( server_response_text ) { ajaxType( server_response_text, response_element, 'respond' ); } );
    };
    Control.in = function()
    {
        new Control( 'signin' ).invoke();
    };
    Control.up = function()
    {
        new Control( 'signup' ).invoke();
    };
    Control.out = function()
    {
        new Ajax().invoke( '&ajax_type=ControlSignOut', function( server_response_text ) { ajaxType( server_response_text, 0, 'simple' ); } );
    };
    Control.try = function()
    {
        new Ajax().invoke( '&ajax_type=ControlTryIt', function( server_response_text ) { ajaxType( server_response_text, 0, 'simple' ); } );
    };
    return Control;
} () );

ControlTweet

/**
 *    ControlTweet
 */

function interfaceTweet()
{
    var fill_element = document.getElementById( 'tweet_fill' ),
        form_element = document.getElementById( 'tweet' ),
        response_element = document.getElementById( 'tweet_response' );

    var text_object = new TextValidator( form_element ),
        message_object = new Message( response_element ),
        effects_object = new Effects( response_element );

    if( Global.validate_input_on === 1 )
    {
        if( !text_object.checkEmpty() ) 
        {
            message_object.display( 'empty' );
            effects_object.fade( 'down', 4000 );
            return;
        }

        if( !text_object.checkPattern( 'tweet' ) ) 
        {
            message_object.display( 'tweet' );
            effects_object.fade( 'down', 4000 );
            return;
        }
    }
    new Ajax().invoke( serializeArray( form_element ) + '&ajax_type=ControlTweet_add', function( server_response_text ) { ajaxType( server_response_text, response_element, 'tweet', fill_element ); } );
}

私が使用することになったもの：

/**
 *Control - receives incoming requests for client use
 */

var Control = ( function () 
{
    var Control = function ( type )
    {
        this.TIME = 4000;
        this.type = type;

        this.form_element = document.getElementById( type ), 
        this.response_element = document.getElementById( type + '_response' );
        if( type === 'tweet' ) { this.fill_element = document.getElementById( type + '_fill' ); }

        this.text_object = new TextValidator( this.form_element ),
        this.message_object = new Message( this.response_element ),
        this.effects_object= new Effects( this.response_element );
    };
    Control.prototype.invoke = function( ) 
    {
        if( Global.validate_input_on === 1 )
        {
            if( !this.text_object.checkEmpty() ) 
            {
                this.message_object.display( 'empty' );
                this.effects_object.fade( 'down', this.TIME );
                return false;
            }
            switch( this.type )
            {
                case 'signin':
                    if( !this.text_object.checkPattern( 'email' ) ) 
                    {
                        this.message_object.display( 'email' );
                        this.effects_object.fade( 'down', this.TIME );
                        return false;
                    }
                    if( !this.text_object.checkPattern( 'pass' ) ) 
                    {
                        this.message_object.display( 'pass' );
                        this.effects_object.fade( 'down', this.TIME );
                        return false;
                    }
                    break;
                case 'signup':
                    if( !this.text_object.checkPattern( 'email' ) ) 
                    {
                        this.message_object.display( 'email' );
                        this.effects_object.fade( 'down', this.TIME );
                        return false;
                    }
                    if( !this.text_object.checkPattern( 'name' ) ) 
                    {
                        this.message_object.display( 'name' );
                        this.effects_object.fade( 'down', this.TIME );
                        return false;
                    }
                    if( !this.text_object.checkPattern( 'pass' ) ) 
                    {
                        this.message_object.display( 'pass' );
                        this.effects_object.fade( 'down', this.TIME );
                        return false;
                    }
                    break;
                case 'tweet':
                    if( !this.text_object.checkPattern( 'tweet' ) ) 
                    {
                        this.message_object.display( 'tweet' );
                        this.effects_object.fade( 'down', this.TIME );
                        return false;
                    }
                    break;
                default:
            }
        }
        var response_element = this.response_element;
        if( this.type === 'tweet' ) { var fill_element = this.fill_element; }
        new Ajax().invoke( serializeArray( this.form_element ) + '&ajax_type=' + this.type + '_control', function( server_response_text ) { ajaxType( server_response_text, response_element, 'respond', fill_element ); } );
    };
    Control.tweet = function()
    {
        new Control( 'tweet' ).invoke();
    }
    Control.in = function()
    {
        new Control( 'signin' ).invoke();
    };
    Control.up = function()
    {
        new Control( 'signup' ).invoke();
    };
    Control.out = function()
    {
        new Ajax().invoke( '&ajax_type=ControlSignOut', function( server_response_text ) { ajaxType( server_response_text, 0, 'simple' ); } );
    };
    Control.try = function()
    {
        new Ajax().invoke( '&ajax_type=ControlTryIt', function( server_response_text ) { ajaxType( server_response_text, 0, 'simple' ); } );
    };
    Control.bookmarkDelete = function( event_pull )
    {
        event_pull.preventDefault();
        domBookmarkDelete( this );
        new Ajax().invoke( encodeURIComponent( this.name ) + "=" + encodeURIComponent( this.innerHTML ) + '&ajax_type=ControlBookmark_delete', function( ) { } );
    }
    return Control;
} () );
4

3 に答える 3

2

これは、コードの統合に関しては誰もが自分の好みを持っているという意味でかなり主観的な質問です。また、プロジェクトごとに異なる可能性があるため、ローカライズされています。main()そうは言っても、すべてを処理し、次にいくつかを処理する1つの大規模な関数にすべてを統合したくないので、明らかに線を引く必要があります。

あなたを助けるべき2つの経験則があります：

  1. DRY（繰り返さないでください）
  2. 時期尚早の最適化===悪

現在、DRYの原則では、妥当な場合は、同様のコードを再利用可能なモジュールに組み合わせる必要があるとされています。ここでのキーワードは類似したコードです。コードを繰り返すリスクがある場合でも、複数の個別のモジュールを使用することが理にかなっている場合があるためです。その理由は、コードの保守と可読性も考慮する必要があり、DRYの名前で異なるモジュールを統合し始めると、可読性の悪夢になる可能性があるためです。

また、フットプリントが小さいのに対してコードが複雑であるという考えを提起したため、時期尚早の最適化についても触れました。それを忘れて、コードのフットプリントを圧縮/gzipに任せることをお勧めします。

最終的にあなたの質問に答えるために、私は個人的にモジュールを組み合わせます。ただし、そのコードを維持する必要があるのはあなたであるため、最終的にはそれを決定する必要があります。今月後に再訪するときに暗闇の中で迷子にならないように、すべてを適切にコメントして文書化することを忘れないでください。

于 2012-04-13T22:24:54.187 に答える
1

コードは、言語に関係なく、必要な結果を生成し、読み取り可能で、テスト可能であり、必要なパフォーマンスを備えている必要があります。

あなたは主観的な「読みやすい」と不必要な「絶対に速い」の間のトレードオフを見つけようとしています。必要なパフォーマンスの達成に問題がない限り、読みやすいものなら何でも構いません（最初に測定/目標を設定する必要があります...）。

于 2012-04-13T22:22:51.790 に答える
1

答えは継承です。共通の部分を取り、それらを親クラスに入れてから継承します。さまざまな呼び出しのifステートメントをたくさん入れることは、継承ハックのようなものです。JSでこれを行う方法を学んだら、コードを投稿します。

于 2012-04-14T00:34:35.383 に答える