应用DRY原则到JavaScript，帮助我优化这段代码

Applying DRY principles to JavaScript, help me optimize this code?

本文关键字：段代码 代码 优化 原则 DRY JavaScript 帮助 应用      更新时间：2023-09-26

在寻找优化代码质量的方法时，我最终遇到了DRY(不要重复自己)的概念。我尽我所能地遵循这一点，但有时我不得不写两个几乎相同的函数，保存2或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);
    }
}

使用一个基本的标志，你几乎可以把它们都剪掉。我相信我错过了你为什么没有这样做的一个很好的理由，尽管我从来没有对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);
    }
}
相关文章：