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

Question

我正在开发一个网站，该网站使用 fullpage.js 并且有一个包含几张幻灯片的部分。幻灯片每 10 秒自动切换一次。

我想创建像 Instagram 那样的酒吧，慢慢填满。当一个栏被填满时，视口将更改为下一页，并且下一个栏开始自行填充。当用户手动切换幻灯片时，相应的栏应该开始动画。

我没有在网上找到任何东西，所以我从头开始构建它，经过一些尝试，我让它按我想要的方式工作。但是代码太可怕了。

我 100% 确信可以将其缩减为几行，但由于我不够熟练，无法以这种方式重构它。如何用更少的代码以更好的方式解决这个功能？任何帮助都会帮助我在这里学习很多东西。

这是我编写的相关代码（它不能正常工作，因为它是基于 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;

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