javascript - 何时组合通用功能？ - 带初始化的公共(public)静态对象

Question

这是我编写代码时经常发生的事情...我看到一些看起来有点相似的代码..我知道在我的代码中包含冗余功能显然不好。

但是，这是绝对的吗？ 0冗余？我在下面有两个功能，它们看起来有点相似。 ViewH.bookmark 和 ViewH.tweet。

我正在尝试决定是否应该将通用功能提取到名为 ViewH.mark() 的函数中。

编辑

var ViewH = {
    MARK: 
    {
        FIELD:      '|',
        ROW:        '||',
        PASS:       '<xx_p>',
        FAIL:       '<xx_f>'
    },
    return_string:  '',
    mark: function(passed_function, embeddedAml)
    {
        var return_string,
            first_split, 
            element_count, 
            second_split;

        return_string = '';
        first_split = embeddedAml.split( ViewH.MARK.ROW );
        for( element_count=0; element_count < first_split.length; element_count++)
        {
            second_split = first_split[element_count].split( ViewH.MARK.FIELD );
            passed_function(second_split);
        }
        return ViewH.return_string;
    },
    bookmark: function ( embeddedAml ) 
    {
        ViewH.return_string='';
        return ViewH.mark(ViewH.bookmark_inner, embeddedAml);
    },
    tweet: function ( embeddedAml ) 
    {
        ViewH.return_string='';
        return ViewH.mark(ViewH.tweet_inner, embeddedAml);
    },
    portfolio: function ( embeddedAml ) 
    {
        ViewH.return_string='';
        return ViewH.mark(ViewH.portfolio_inner, embeddedAml);
    },
    bookmark_inner: function ( second_split )
    {
        ViewH.return_string = ViewH.return_string 
        + '<img name="bo_im" class="c" src="'
        + 'http://www.google.com/s2/favicons?domain=' 
        + second_split[0] 
        + '" onerror="Arc.BookmarkError(this)"><a target="_blank" name="bookmark_link" class="b" href = "' 
        + second_split[1] 
        + '">' 
        + second_split[2] 
        + '</a>';
    },
    tweet_inner: function ( second_split )
    {
        ViewH.return_string = ViewH.return_string 
        + '<div class="Bb2b"><img class="a" src="' 
        + Constant.PICTURES + second_split[ 0 ] 
        + '.jpg" alt=""/><a class="a" href="javascript:void(0)\">' 
        + second_split[ 1 ]  
        + ' posted ' 
        + ViewH.pretty( second_split[ 2 ],second_split[ 3 ] ) 
        + '</a><br/><p class="c">' 
        + second_split[ 4 ] 
        + '</p></div>';
    },
    portfolio_inner: function ( second_split )
    {
        if( ( second_split[ 1 ] === 'docx' ) || ( second_split[ 1 ] === 'xlsx' ) )
        {   
            ViewH.return_string = ViewH.return_string 
            + '<img name="bo_im" class="c" src="' 
            + Constant.IMAGES + second_split[1] 
            + '.ico"><a target="_blank" name="bookmark_link" class="b" href = "/' 
            + Constant.ROOT 
            + second_split[1] 
            + '/' 
            + second_split[0] 
            + '.' 
            + second_split[1] 
            + '">' 
            + second_split[0] 
            + '.' 
            + second_split[1] 
            + '</a>';
        }
        else
        {
            ViewH.return_string=ViewH.return_string 
            + '<simg name="bo_im" class="c" src="' 
            + Constant.IMAGES 
            + 'generic' 
            + '.ico"><a target="_blank" name="bookmark_link" class="b" href = "' 
            + Constant.TEXT 
            + second_split[0] 
            + '.txt">' 
            + second_split[0] 
            + '.' 
            + second_split[1] 
            + '</a>';
        }
    },

Answer 1

这是一个很好的问题，但没有适用于所有情况的答案。这真的取决于你的代码是什么样子的。冗余通常是要避免的，但有时过度设计您的代码并试图使其适合它实际上并不适合的盒子会更糟糕。

在您的情况下，您绝对可以从采用通用代码并将其拉入通用方法中受益。看起来您的方法之间的唯一区别是渲染部分，将渲染函数传递到您的“标记”方法会很简单。

您的“标记”方法看起来有点像这样:

mark: function(embeddedAml, renderer) {
    var return_string,
        first_split, 
        element_count, 
        second_split;

    return_string = '';
    first_split = embeddedAml.split( ViewH.MARK.ROW );

    for( element_count=0; element_count < first_split.length; element_count++)
    {
        second_split = first_split[element_count].split( ViewH.MARK.FIELD );
        return_string = return_string + renderer(second_split);
    }

    return return_string;
}

你会保留你的书签和推文方法，但它们也会改变:

bookmark: function (embeddedAml) {
    return this.mark(embeddedAml, function(data) {
        return '<img name="bo_im" class="c" src="' + 
        'http://www.google.com/s2/favicons?domain=' +
        data[0] + 
        '" onerror="Arc.BookmarkError(this)"><a target="_blank" name="bookmark_link" class="b" href = "' +
        data[1] + '">' + 
        data[2] + '</a>'
    });
}

现在您的渲染代码(唯一不同的代码)是独立控制的，但重叠的代码位于一个公共(public)位置，如果它发生变化，您只需在一个地方更新它。