Question

This is a common occurence when I code…I see some code that looks kind of alike..and I know that it is obviously not good to have redundant functionality in my code.

However , is this absolute? 0 Redundancy? I have two functions below, which look kind of alike. ViewH.bookmark and ViewH.tweet.

I’m trying to decide if I should pull out the common functionality into a function called ViewH.mark().

EDIT

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

This is a great question, but there is no answer that will apply to all cases. It really is going to depend on what your code looks like. Redundancy is generally to be avoided but it is sometimes worse to over-engineer your code and try to make it fit into a box that it does not really fit into.

In your case you could definitely benefit from taking common code and pulling it into a common method. It looks like the only difference between your methods is the rendering part and it would be simple to pass a rendering function into your “mark” method.

Your “mark” method would look a bit like this:

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;
}

You would keep your bookmark and tweet methods but they would change as well:

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>'
    });
}

Now your rendering code (the only code that was different) is controlled independently, but the code that overlapped is in a common place and if it changes you only have to update it in one place.