第34题实现一下hash路由

基础的html代码：

    <html>
      <style>
        html, body {
          margin: 0;
          height: 100%;
        }
        ul {
          list-style: none;
          margin: 0;
          padding: 0;
          display: flex;
          justify-content: center;
        }
        .box {
          width: 100%;
          height: 100%;
          background-color: red;
        }
      </style>
      <body>
      <ul>
        <li>
          <a href="#red">红色</a>
        </li>
        <li>
          <a href="#green">绿色</a>
        </li>
        <li>
          <a href="#purple">紫色</a>
        </li>
      </ul>
      </body>
    </html>

简单实现：

    <script>
      const box = document.getElementsByClassName('box')[0];
      const hash = location.hash
      window.onhashchange = function (e) {
        const color = hash.slice(1)
        box.style.background = color
      }
    </script>

封装成一个class:

    <script>
      const box = document.getElementsByClassName('box')[0];
      const hash = location.hash
      class HashRouter {
        constructor (hashStr, cb) {
          this.hashStr = hashStr
          this.cb = cb
          this.watchHash()
          this.watch = this.watchHash.bind(this)
          window.addEventListener('hashchange', this.watch)
        }
        watchHash () {
          let hash = window.location.hash.slice(1)
          this.hashStr = hash
          this.cb(hash)
        }
      }
      new HashRouter('red', (color) => {
        box.style.background = color
      })
    </script>

第34题 实现一下hash路由

详情

第34题实现一下hash路由