"Instagram-Story分页“冗余JS逻辑的重构

Question

我在一个使用fullpage.js的网站上工作，它有一个有几张幻灯片的部分。幻灯片每10秒自动切换一次。

我想创建像Instagram这样的条子，慢慢地填满它们。当一个栏被填充时，视图端口将更改到下一个页面，下一个栏将开始自己填充。当用户手动切换滑梯时，相应的栏应该开始动画。

我没有在网上找到任何东西，所以我从零开始构建它，经过几次尝试，我让它按我的意愿工作。但代码太可怕了。

我百分之百肯定它是有可能降低到几行，但因为我没有足够的技能来重构它的方式。如何才能以更好的方式，用更少的代码来解决这个函数？任何帮助都会帮助我在这里学到很多东西。

下面是我编写的相关代码(它不能正常工作，因为它是基于URL的，但我相信您将了解它如何使用正确的URL)

​

function locationHashChanged() {
  if (location.hash === '#page2') {
   document.getElementById("Loadingbar-2-1").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
   document.getElementById("Loadingbar-2-2").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-3").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-4").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-5").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-6").setAttribute("style","width:0%");
  } else if (location.hash === '#page2/1') {
   document.getElementById("Loadingbar-2-1").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-2").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
   document.getElementById("Loadingbar-2-3").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-4").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-5").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-6").setAttribute("style","width:0%");
  } else if (location.hash === '#page2/2') {
   document.getElementById("Loadingbar-2-1").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-2").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-3").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
   document.getElementById("Loadingbar-2-4").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-5").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-6").setAttribute("style","width:0%");
  } else if (location.hash === '#page2/3') {
   document.getElementById("Loadingbar-2-1").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-2").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-3").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-4").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
   document.getElementById("Loadingbar-2-5").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-6").setAttribute("style","width:0%");
  } else if (location.hash === '#page2/4') {
   document.getElementById("Loadingbar-2-1").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-2").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-3").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-4").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-5").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
   document.getElementById("Loadingbar-2-6").setAttribute("style","width:0%");
  } else if (location.hash === '#page2/5') {
   document.getElementById("Loadingbar-2-1").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-2").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-3").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-4").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-5").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-6").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
  }
}  

window.onload = locationHashChanged;
window.onhashchange = locationHashChanged;

.loading-bars-container {
    position: absolute;
    left: 48px;
    right: 48px;
    bottom: 0.5em;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.storyindicator {
    position: relative;
    z-index: 1000;
    overflow: hidden;
    width: 20%;
    height: 4px;
    margin-right: 0.25em;
    margin-left: 0.25em;
    border-radius: 4px;
    background-color: #000;
}

.loadingbar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: grey;
}

<div class="loading-bars-container">
   <div class="storyindicator">
      <div id="Loadingbar-2-1" class="loadingbar-fill" style="width:100%"></div>
   </div>
   <div class="storyindicator">
      <div id="Loadingbar-2-2" class="loadingbar-fill" style="width:100%"></div>      </div>
   <div class="storyindicator">
      <div id="Loadingbar-2-3" class="loadingbar-fill" style="width:100%"></div>      </div>
   <div class="storyindicator">
      <div id="Loadingbar-2-4" class="loadingbar-fill" style="animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;"></div>      </div>
   <div class="storyindicator">
      <div id="Loadingbar-2-5" class="loadingbar-fill" style="width:0%"></div>        </div>
   <div class="storyindicator">
      <div id="Loadingbar-2-6" class="loadingbar-fill" style="width:0%"></div>        </div>
</div>

​

Answer 1

如果您希望代码更短(有时代码冗长是完全可以的)，我建议如下：

const animationStr = "animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;";
const barsCnt = 6;

function locationHashChanged() {
  const num = location.hash.match(/^#page2(?:\/(\d))?$/)[1] || 0;
  
  for (let i = 0; i < barsCnt; i++) {
    const style = i < num
      ? "width:100%"
      : i > num
      ? "width:0%"
      : animationStr;
    
    document.getElementById("Loadingbar-2-" + (i + 1)).setAttribute("style", style);
  }
}

window.onload = locationHashChanged;
window.onhashchange = locationHashChanged;

我测试过了，但可能还有一些缺陷，请检查一下。