Question

在寻找优化代码质量的方法时，我最终遇到了DRY的概念（不要重复自己）。我尝试尽可能地遵循这一点，但有时我会进入我必须编写两个几乎完全相同的函数的位置，除了2或3行代码，并且我在试图找出最佳方法时耗尽时间组织它。

所以这是我的“问题”。我已经包含了几个星期前我写的两个函数，除了最后的3行之外基本相同，还有一个通过加法动画，另一个通过减法动画。我很乐意从其他开发人员那里得到一些关于他们如何优化下面代码的信息 OR 有不相关代码的例子，你解决了类似的问题。

/**
 * Go to the previous notification
 *
 * @private
 * @param {object} cl Click event details (ex. {id: 'linkId', ss: '_', index: '1', e: event})
 * @memberOf APP.devices
 */
function slideNext (cl) {
    var button = $('#' + cl.id + cl.ss + cl.index),
        index = cl.index - 1,
        slider = devices[index].container.find('.slideContainer'),
        // In order to get the value of the 'right' position we must take the (container width - slider width - left position - right-margin)
        slidePos = (slider.parent().width() - slider.width()) + (slider.position().left * -1) + (parseFloat(slider.css('margin-right')) * -1);
    if (button.hasClass('disabled')) {
        return false;
    }
    slider.find('.active').removeClass('active').prev().addClass('active');
    disableButtons(index);
    slider.animate({'right': slidePos + notificationOffset}, 200, function () {
        determineButtonState(index);
    });
    updatePositionContext(index);
}


/**
 * Advance to the next notification
 *
 * @private
 * @param {object} cl Click event details
 * @memberOf APP.devices
 */
function slidePrev (cl) {
    var button = $('#' + cl.id + cl.ss + cl.index),
        index = cl.index - 1,
        slider = devices[index].container.find('.slideContainer');
        // In order to get the value of the 'right' position we must take the (container width - slider width - left position - right-margin)
        slidePos = (slider.parent().width() - slider.width()) + (slider.position().left * -1) + (parseFloat(slider.css('margin-right')) * -1);
    if (button.hasClass('disabled')) {
        return false;
    }
    slider.find('.active').removeClass('active').next().addClass('active');
    disableButtons(index);
    slider.animate({'right': slidePos - notificationOffset}, 200, function () {
        determineButtonState(index);
    });
    updatePositionContext(index);
    // Load more notifications once user get's close to the end of the current set of notifications
    if (slider.find('.active').nextAll().length == 3) {
        getMoreNotifications(index);
    }
}

Answer 1

使用基本标志你几乎可以完全消除它。我确信我错过了一个很好的理由，因为你为什么没有这样做，我从来没有在DRY上超级大。随意赐教：）

/**
 * Move to another notification
 *
 * @private
 * @param {object} cl Click event details (ex. {id: 'linkId', ss: '_', index: '1', e: event})
 * @param fw Whether to go forwards or backwards. Defaults to true (forwards)
 * @memberOf APP.devices
 */
function slideNext (cl, fw) {
    var button = $('#' + cl.id + cl.ss + cl.index),
        index = cl.index - 1,
        slider = devices[index].container.find('.slideContainer'),
        // In order to get the value of the 'right' position we must take the (container width - slider width - left position - right-margin)
        slidePos = (slider.parent().width() - slider.width()) + (slider.position().left * -1) + (parseFloat(slider.css('margin-right')) * -1);
        var distance = ((fw) ? slidePos + notificationOffset : slidePos - notificationOffset;
    if (button.hasClass('disabled')) {
        return false;
    }
    if (fw)
        slider.find('.active').removeClass('active').prev().addClass('active');
    else
        slider.find('.active').removeClass('active').next().addClass('active');
    disableButtons(index);
    slider.animate({'right': distance}, 200, function () {
        determineButtonState(index);
    });
    updatePositionContext(index);
    // Load more notifications once user get's close to the end of the current set of notifications
    if (!fw && slider.find('.active').nextAll().length == 3) {
        getMoreNotifications(index);
    }
}

将DRY原则应用于JavaScript，帮助我优化此代码？

1 个答案: