重構和評估

Question

我使用javascript來切換一些對象的顯示狀態，基於一天的時間。代碼示例如下。我想知道是否有人可以提供一個關於如何在重構此代碼的同時改進邏輯的建議。

switch(tcode) {    
      case 'eur'  : eur.setAttribute('style', 'display:block; opacity:0.5'); 
          us.style.display = 'none'; 
          asia.style.display = 'none'; 
          us_inactive.style.display = 'block'; 
          asia_inactive.style.display = 'block'; 
      break; 

      case 'us'  : us.style.display = 'block'; 
          eur.style.display = 'none'; 
          asia.style.display = 'none'; 
          eur_inactive.style.display = 'block'; 
          asia_inactive.style.display = 'block'; 

      break; 

      case 'asia' : asia.setAttribute('style', 'display:block; opacity:0.5'); 
          us.style.display = 'none'; 
          eur.style.display = 'none'; 
          eur_inactive.style.display = 'block'; 
          us_inactive.style.display = 'block'; 

Answer 1

如果您只是切換顯示某些元素（沒有花哨的動畫），您可以使用CSS來簡化JavaScript代碼。

我承擔HTML結構是這樣的：

<div id="wrapper"> 
    ... 
    <div id="eur">...</div> 
    <div id="us">...</div> 
    <div id="asia">...</div> 

    <div id="eur_inactive">...</div> 
    <div id="us_inactive">...</div> 
    <div id="asia_inactive">...</div> 
    ... 
</div> 

據我瞭解，有三個viewstates，即eurusasia這是在switch語句進行處理的時刻。

在此基礎上，可以定義樣式表中的不同viewstates這樣的：

/* eur */ 
.viewstate-eur { 
} 

    .viewstate-eur #eur { display:block; opacity:0.5; } 

    .viewstate-eur #us, 
    .viewstate-eur #asia { display:none; } 

    .viewstate-eur #us_inactive, 
    .viewstate-eur #asia_inactive { display:block; } 

/* us */ 
.viewstate-us { 
} 

    .viewstate-us #us { display:block; } 

    .viewstate-us #eur, 
    .viewstate-us #asia { display:none; } 

    .viewstate-us #eur_inactive, 
    .viewstate-us #asia_inactive { display:block; } 

/* asia */ 
.viewstate-asia { 
} 

    .viewstate-asia #asia { display:block; opacity:0.5; } 

    .viewstate-asia #us, 
    .viewstate-asia #eur { display:none; } 

    .viewstate-asia #us_inactive, 
    .viewstate-asia #eur_inactive { display:block; } 

而JavaScript代碼歸結爲通過的div#wrapper的className屬性設置正確的視圖狀態。

// assuming tcode is one of eur, us, asia 
document.getElementById('wrapper').className = 'viewstate-' + tcode; 

我總是喜歡在樣式表中定義的CSS樣式和使用class或id屬性而不是如果可能的話，直接將它們設置通過JavaScript將它們分配。使JavaScript代碼更清晰並將CSS放在它所在的位置（樣式表中）。不確定您的樣式表是否因爲opacity屬性而被驗證。