2

我有一些处理用户操作的模块——它们是控制模块。有 6 个，现在有 5 个，因为我将 2 个非常相似的合并到一个名为 Control 的模块中

我注意到的是，当我整合类似的代码时......它变得有点效率低下。例如，在 Control 中，我现在有一个额外的逻辑语句来确定程序流程。

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

这个简单的行允许我将 ControlSignIn 和 ControlSignUp 结合起来，因为唯一的区别是检查 Sign Up 中没有 Sign In 的名称。

我可以以这种方式继续，我得到更复杂的代码，但我的代码占用空间更小。

在（复杂性和运行时间）与（代码足迹）之间存在权衡。

我猜这没关系，但我只是想确定一下。

作为一个例子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
 */

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. 过早的优化 === 邪恶

现在，DRY 原则指出——在合理的情况下——你应该将相似的代码组合成可重用的模块。这里的关键字是相似的代码，因为有时即使冒着重复代码的风险，拥有多个单独的模块也是有意义的。原因是您还必须考虑代码的维护和可读性，当您开始以 DRY 的名义整合不同的模块时，它可能成为可读性的噩梦。

我还提到过早优化，因为您提出了占用空间小而不是代码复杂性的想法。我建议您忘记这一点，并将代码足迹留给压缩/gzipping。

为了最终回答您的问题，我会亲自组合这些模块。但是，这最终应该是您的决定，因为您是必须维护该代码的人。请记住正确评论和记录所有内容，这样当您在几个月后重新访问时不会迷失在黑暗中。

于 2012-04-13T22:24:54.187 回答
1

代码应该产生你想要的结果，可读，可测试，并且无论语言如何都具有所需的性能。

您试图在主观的“可读”和不必要的“绝对最快”之间找到权衡。我想说 - 任何对你来说可读的东西都是好的，除非你在满足所需性能方面遇到问题（必须首先有测量/目标......）。

于 2012-04-13T22:22:51.790 回答
1

答案是继承。取出公共部分并将它们放在父类中，然后继承它们。为不同的调用放入一堆 if 语句有点像继承黑客。一旦我学会了如何在 JS 中执行此操作，我将发布代码。

于 2012-04-14T00:34:35.383 回答