写回退选择器的更好方法是什么？

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

我们称之为“渐进增强”：

我们先从最小，并继续，直到我们达到规模由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(); 
}); 

or @Glufu's回答

Answer 2

其他的方式的@pwolaq的版本，用纯JS：

// 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等等。