Question

我有一个有效的功能，但我想知道是否有更好的方法。

我有5种尺寸，我试图获得当前尺寸的缩放级别。问题是，当前大小是否指定了我想检查其他较小尺寸的尺寸，以查看是否有指定要使用的尺寸。

即如果没有指定XL缩放，检查是否有LG使用，如果没有，检查是否有MD大小等。

目前，我有一个很大的switch，其中包含一堆if / else个语句。任何更清洁的方法来做到这一点，我都错过了？

self.updateZoom = function () {
  var defaultZoomLevel = 8;

  switch(self.getSize()) {
  case 'xs':
    if (self.xsZoom) {
      self.zoom = self.xsZoom;
    } else {
      self.zoom = defaultZoomLevel;
    }
    break;
  case 'sm':
    if (self.smZoom) {
      self.zoom = self.smZoom;
    } else if (self.xsZoom) {
      self.zoom = self.xsZoom;
    } else {
      self.zoom = defaultZoomLevel;
    }
    break;
  case 'md':
    if (self.mdZoom) {
      self.zoom = self.mdZoom;
    } else if (self.smZoom) {
      self.zoom = self.smZoom;
    } else if (self.xsZoom) {
      self.zoom = self.xsZoom;
    } else {
      self.zoom = defaultZoomLevel;
    }
    break;
  case 'lg':
    if (self.lgZoom) {
      self.zoom = self.lgZoom;
    } else if (self.mdZoom) {
      self.zoom = self.mdZoom;
    } else if (self.smZoom) {
      self.zoom = self.smZoom;
    } else if (self.xsZoom) {
      self.zoom = self.xsZoom;
    } else {
      self.zoom = defaultZoomLevel;
    }
    break;
  case 'xl':
    if (self.xlZoom) {
      self.zoom = self.xlZoom;
    } else if (self.lgZoom) {
      self.zoom = self.lgZoom;
    } else if (self.mdZoom) {
      self.zoom = self.mdZoom;
    } else if (self.smZoom) {
      self.zoom = self.smZoom;
    } else if (self.xsZoom) {
      self.zoom = self.xsZoom;
    } else {
      self.zoom = defaultZoomLevel;
    }
    break;
  default:
    self.zoom = defaultZoomLevel;
  }

  self.zoom = parseInt(self.zoom);
}

Answer 1

让我们称之为＆＃34;渐进增强＆＃34;：

我们从最小的开始继续，直到我们达到self.getSize()

返回的尺寸

['xs', 'sm', 'md', 'lg', 'xl'].forEach(function(size){
    if(self[size + 'Zoom']){
        self.zoom = self[size + 'Zoom'];
    }

    if(size == self.getSize()){
        return false;
    }
});

编辑：因为没有办法打破内置的forEach你可以尝试ES6方式：

['xs', 'sm', 'md', 'lg', 'xl'].some(function(size){
    if(self[size + 'Zoom']){
        self.zoom = self[size + 'Zoom'];
    }

    return size == self.getSize();
});

或@Glufu的回答

Answer 2

使用纯JS的@pwolaq版本的另一种方式：

// init variables
var steps = ['xl', 'lg', 'md', 'sm', 'xs'];
var i = steps.indexOf(self.getSize());

// check borders
i = (i == -1) ? steps.length-1 : i;
// set default zoom
self.zoom = self.xsZoom;

// "search" best zoom
for(; i<steps.length; i++){
  if(self[steps[i] + 'Zoom']){
    self.zoom = self[steps[i]+'Zoom'];
    break;
  }
}

如果self.getSize()为'lg'，它将首先尝试self.lgZoom。如果不成功，则会尝试self.mdZoom然后self.smZoom，依此类推。

更好的方法来编写回退选择器？

2 个答案: