JavaScript重构-如何重构这段代码？

Question

<script type="text/javascript">
              var typeSort = document.getElementById('sortTypeUp').value;
              if(typeSort == '1'){
                 document.getElementById('bewertung').className='tab_subbox tab2 tabon';
                 document.getElementById('price').className='tab_subbox tab3';
                 document.getElementById('kategorie').className='tab_subbox tab4';
                 document.getElementById('distance').className='tab_subbox tab5';
                 document.getElementById('bypois').className='tab_subbox tab6';
                 document.getElementById('opodoTriangle').style.display='block';
                 document.getElementById('priceTriangle').style.display='none';
                 document.getElementById('reviewTriangle').style.display='none';
                 document.getElementById('distanceTriangle').style.display='none';
                 document.getElementById('bypoisTriangle').style.display='none';
              }
              else if(typeSort == '2'){
                 document.getElementById('bewertung').className='tab_subbox tab2';
                 document.getElementById('price').className='tab_subbox tab3 tabon';
                 document.getElementById('kategorie').className='tab_subbox tab4';
                 document.getElementById('distance').className='tab_subbox tab5';
                 document.getElementById('bypois').className='tab_subbox tab6';
                 document.getElementById('opodoTriangle').style.display='none';
                 document.getElementById('priceTriangle').style.display='block';
                 document.getElementById('reviewTriangle').style.display='none';   
                 document.getElementById('distanceTriangle').style.display='none';
                 document.getElementById('bypoisTriangle').style.display='none';
              } 
              else if(typeSort == '3'){
                 document.getElementById('bewertung').className='tab_subbox tab2';
                 document.getElementById('price').className='tab_subbox tab3';
                 document.getElementById('kategorie').className='tab_subbox tab4 tabon';
                 document.getElementById('distance').className='tab_subbox tab5';
                 document.getElementById('bypois').className='tab_subbox tab6';
                 document.getElementById('opodoTriangle').style.display='none';
                 document.getElementById('priceTriangle').style.display='none';
                 document.getElementById('reviewTriangle').style.display='block';      
                 document.getElementById('distanceTriangle').style.display='none';
                 document.getElementById('bypoisTriangle').style.display='none';      
              }
              else if(typeSort == '4'){
                 document.getElementById('bewertung').className='tab_subbox tab2';
                 document.getElementById('price').className='tab_subbox tab3';
                 document.getElementById('kategorie').className='tab_subbox tab4';
                 document.getElementById('distance').className='tab_subbox tab5 tabon';
                 document.getElementById('bypois').className='tab_subbox tab6';
                 document.getElementById('opodoTriangle').style.display='none';
                 document.getElementById('priceTriangle').style.display='none';
                 document.getElementById('reviewTriangle').style.display='none';      
                 document.getElementById('distanceTriangle').style.display='block';
                 document.getElementById('bypoisTriangle').style.display='none';      
              }
              else if(typeSort == '5'){
                 document.getElementById('bewertung').className='tab_subbox tab2';
                 document.getElementById('price').className='tab_subbox tab3';
                 document.getElementById('kategorie').className='tab_subbox tab4';
                 document.getElementById('distance').className='tab_subbox tab5';
                 document.getElementById('bypois').className='tab_subbox tab6 tabon';
                 document.getElementById('opodoTriangle').style.display='none';
                 document.getElementById('priceTriangle').style.display='none';
                 document.getElementById('reviewTriangle').style.display='none';      
                 document.getElementById('distanceTriangle').style.display='none';
                 document.getElementById('bypoisTriangle').style.display='block';      
              }
           </script>

Answer 1

在像JavaScript、Python和其他为核心数据结构提供literal notation的灵活语言中，我发现构建简单的数据结构来表示不同的部分，然后围绕结构构建逻辑是很方便的。

var tabs = [
  {id: 'bewertung', contentId: 'opodoTriangle'}
, {id: 'price', contentId: 'priceTriangle'}
, {id: 'kategorie', contentId: 'reviewTriangle'}
, {id: 'distance', contentId: 'distanceTriangle'}
, {id: 'bypois', contentId: 'bypoisTriangle'}
];

var activeIdx = parseInt(document.getElementById('sortTypeUp').value, 10) - 1;
for (var i = 0, l = tabs.length; i < l; i++) {
  var tab = tabs[i]
    , active = (i == activeIdx)
    , tabEl = document.getElementById(tab.id)
    , contentEl = document.getElementById(tab.contentId);
  if (active) {
    addClass(tabEl, 'tabon');
  } else {
    removeClass(tabEl, 'tabon');
  }
  contentEl.style.display = (active ? 'block' : 'none');
}

类管理实用程序方法(来自http://dean.edwards.name/IE7/caveats/ --只是抓取了我找到的第一个实现)：

function addClass(element, className) {
  if (!hasClass(element, className)) {
    if (element.className) element.className += ' ' + className;
    else element.className = className;
  }
};

function removeClass(element, className) {
  var regexp = new RegExp('(^|\\s)' + className + '(\\s|$)');
  element.className = element.className.replace(regexp, '$2');
};

function hasClass(element, className) {
  var regexp = new RegExp('(^|\\s)' + className + '(\\s|$)');
  return regexp.test(element.className);
};

额外好处：这是一个为了简洁而简短的版本，它使用类型强制、逗号运算符进行循环分析和退出逻辑，并将其用作第一类对象--仅限于！:)

var activeIdx = +document.getElementById('sortTypeUp').value - 1;
for (var i = 0, tab, active; active = (i == activeIdx), tab = tabs[i]; i++) {
  (active ? addClass : removeClass)(document.getElementById(tab.id), 'tabon');
  document.getElementById(tab.contentId).style.display =
      (active ? 'block' : 'none');
}

Answer 2

    <script type="text/javascript">

       var typeSort = document.getElementById('sortTypeUp').value;

       document.getElementById('bewertung').className = 'tab_subbox tab2' + ((typeSort=='1') ? ' tabon' : '');
       document.getElementById('price').className='tab_subbox tab3' + ((typeSort=='2') ? ' tabon' : '');
       document.getElementById('kategorie').className='tab_subbox tab4' + ((typeSort=='3') ? ' tabon' : '');
       document.getElementById('distance').className='tab_subbox tab5' + ((typeSort=='4') ? ' tabon' : '');
       document.getElementById('bypois').className='tab_subbox tab6' + ((typeSort=='5') ? ' tabon' : '');
       document.getElementById('opodoTriangle').style.display = ((typeSort=='1') ? 'block' : 'none');
       document.getElementById('priceTriangle').style.display=((typeSort=='2') ? 'block' : 'none');
       document.getElementById('reviewTriangle').style.display=((typeSort=='3') ? 'block' : 'none');
       document.getElementById('distanceTriangle').style.display=((typeSort=='4') ? 'block' : 'none');
       document.getElementById('bypoisTriangle').style.display=((typeSort=='5') ? 'block' : 'none');

    </script>

Answer 3

您可以将代码的公共部分放在函数中，如下所示：

function active(id, tab, typeSort, eq){
  document.getElementById(id).className='tab_subbox '+tab+(typeSort==eq?' tabon':'');
}

function show(id, typeSort, eq){
  document.getElementById(id).style.display=typeSort==eq?'block':'none';
}

var typeSort = parseInt(document.getElementById('sortTypeUp').value);

active('bewertung', 'tab2', typeSort, 1);
active('price', 'tab3', typeSort, 2);
active('kategorie', 'tab4', typeSort, 3);
active('distance', 'tab5', typeSort, 4);
active('bypois', 'tab6', typeSort, 5);

show('opodoTriangle', typeSort, 1);
show('priceTriangle', typeSort, 2);
show('reviewTriangle', typeSort, 3);      
show('distanceTriangle', typeSort, 4);
show('bypoisTriangle', typeSort, 5);