摆脱冗余代码？答案

【问题标题】：get rid of redundant code?摆脱冗余代码？
【发布时间】：2016-09-29 08:14:44
【问题描述】：

由于代码气候问题，我需要清理我的代码。这个jquery太相似了。我该如何解决这个问题？

  var angle = 0;
  $('.rotate-receipt').on('click', function () {
      var index = $(this).data('button-index');
      angle = (angle + 90)%360;
      var className = 'rotate' + angle;
      $('#receipt-image-'+index).removeClass().addClass(className);
  });

  $('.zoom-in').on('click', function () {
      var index = $(this).data('button-index');
      var image = $('#receipt-image-'+index);
      image.width(image.width() + 100);
  });

  $('.zoom-out').on('click', function () {
      var index = $(this).data('button-index');
      var image = $('#receipt-image-'+index);
      image.width(image.width() - 100);
  });
});

【问题讨论】：

这里不是主题。也许更多关于codereview.stackexchange.com 的主题 - 可能与stackoverflow.com/questions/10511897/… 重复
@J.Doe，在“CodeReview”上留下您问题的链接，我会帮助您
HTML 样本也非常有用。
jsfiddle.net/rayon_1990/kvrh7ue4
@RomanPerekhrest 不能在那里发帖，因为已经在这里添加了这个问题:(我被阻止了。请帮忙。

标签： javascript jquery optimization

【解决方案1】：

放大和缩小你可以试试这个：

$('.zoom-in,.zoom-out').on('click', function() {
      var index = $(this).data('button-index');
      var image = $('#receipt-image-'+index);
      if ($(this).hasClass('zoom-out')) {
         image.width(image.width() - 100);
      }
      else {
         image.width(image.width() + 100);
      }
});

【讨论】：

【解决方案2】：

var angle = 0;
$('.rotate-receipt,.zoom-in,.zoom-out').on('click', function () {
  var index = $(this).data('button-index');
  var image = $('#receipt-image-'+index);

  if($(this).hasClass("rotate-receipt")) {
    angle = (angle + 90)%360;
    var className = 'rotate' + angle;
    $('#receipt-image-'+index).removeClass().addClass(className);
  }
  else if($(this).hasClass("zoom-in")) {
    image.width(image.width() + 100);
  }
  else if($(this).hasClass("zoom-out")) {
    image.width(image.width() - 100);
  }

});

希望对你有用:)

【讨论】：

【解决方案3】：

还不如投入我的 2 美分...

var angle = 0;
$('.rotate-receipt').on('click', function () {
  transform( this, 'rotate-receipt' );
});

$('.zoom-in').on('click', function () {
  transform( this, 'zoom-in' );
});

$('.zoom-out').on('click', function () {
  transform( this, 'zoom-out' );
});

function transform( el, type ) {

  var index = $(el).data('button-index');
  var image = $('#receipt-image-'+index);

  switch( type ) {

    case 'rotate-receipt':
      angle = (angle + 90)%360;
      var className = 'rotate' + angle;
      $('#receipt-image-'+index).removeClass().addClass(className);
      break;

    case 'zoom-in':
      image.width(image.width() + 100);
      break;

    case 'zoom-out':
      image.width(image.width() - 100);
      break;

  }

}

【讨论】：

【解决方案4】：

    $('.rotate-receipt, .zoom-in, .zoom-out').on('click' , function() {
        var index = $(this).data('button-index');
        if ($(this).hasClass('rotate-receipt')) {
            angle = (angle + 90)%360;
            var className = 'rotate' + angle;
            $('#receipt-image-'+index).removeClass().addClass(className);
        } else {
            var image = $('#receipt-image-'+index);
            var toAdd = $(this).hasClass('zoom-out') ? - 100 : 100;
            image.width(image.width() + toAdd);
        }
    })

【讨论】：

【解决方案5】：

您可以将放大和缩小的代码减少为一个功能。代码如下：

$('.zoom-in').on('click', zoom_in_out(100));
$('.zoom-out').on('click', zoom_in_out(-100));

function zoom_in_out(zoom_value) {
  var index = $(this).data('button-index');
  var image = $('#receipt-image-'+index);
  image.width(image.width() + zoom_value);
});

您应该尽量减少代码，不要重复自己。这是一种更好的方法，不仅因为它的代码更少，而且因为类似的功能被放置在一个位置。这样，如果您需要包含其他一些常见操作，您只需要在一个地方添加即可。它更多的是关于更好的编码实践，而不仅仅是减少代码行数。

【讨论】：