将 DRY 原则应用到 JavaScript 中，帮我优化这段代码吗？

Question

在寻找优化代码质量的方法时，我最终遇到了 DRY（不要重复自己）的概念。我尽力遵循这一点，但有时我不得不编写两个几乎相同的函数，除了 2 或 3 行代码之外，我在尝试找出最佳方法时耗尽了时间。组织它。

这就是我的“问题”。我在下面添加了几周前写的两个函数，除了最后的 3 行之外，它们基本上是相同的，并且一个通过加法制作动画，另一个通过减法制作动画。我很想从其他开发人员那里获得一些意见，了解他们如何优化下面的代码或者有解决类似问题的不相关代码的示例。

/**
 * 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);
    }
}