寫回退選擇器的更好方法是什麼？

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