多頁面的骨架屏插件實現

1、前言

上一篇文章介紹了單一路由下的骨架屏插件實現。但在真實的產品中，其餘頁面也是要有各自的骨架屏的。

2、多路由骨架屏的原理

從上篇文章《開發一個簡單易懂的webpack骨架屏插件》，能夠知道骨架屏其實就是在js沒有加載完成以前，在id爲root的div裏寫一些動畫代碼，讓用戶不要看到一篇空白。

那多路由的骨架屏是怎樣實現的呢？ 咱們都知道，css有個display屬性能夠用來顯示隱藏一些DOM節點。而javascript中window.location.pathname和window.location.hash能夠獲取到當前路由的名稱和hash值，既然咱們能夠知道當前的路由狀況，因此咱們能夠配合css的display屬性，實現不一樣路由之間的骨架屏切換。

（1）編寫不一樣路由的骨架屏代碼

如下是3個路由的骨架屏代碼，他們的display屬性一開始都爲none。

<div id="root">
    <div style="background-color:red;height:300px;display:none;" id="default" >
        我是默認的骨架屏
    </div>
    <div style="background-color:red;height:300px;display:none;" id="user" >
        我是user的骨架屏
    </div>
    <div style="background-color:red;height:300px;display:none;" id="login" >
        我是login的骨架屏
    </div>
</div>
複製代碼

（2）編寫js代碼，用來控制上面骨架屏的顯示隱藏

<script>
  //獲取到當前路由的名稱和hash值
  var hash = window.location.hash;
  var path = window.location.pathname;
  if (path === '/login' || hash.startsWith('#/login')) {
    //當前路由爲/login時，將上面的login骨架屏代碼顯示
    document.getElementById('login').style.display = 'block';
  } else if (path === '/user' || hash.startsWith('#/user')) {
      //當前路由爲/user，將上面的user骨架屏代碼顯示
    document.getElementById('user').style.display = 'block';
  } else {
      //當前路由爲/default時，將上面的default骨架屏代碼顯示
    document.getElementById('default').style.display = 'block';
  }
</script>
複製代碼

（3）結合上一篇文章的骨架屏插件代碼以下：

const HtmlWebpackPlugin = require('html-webpack-plugin');

class SkeletonPlugin {

  apply (compiler) {
    compiler.hooks.compilation.tap('SkeletonPlugin', (compilation) => {
      HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
        'SkeletonPlugin',
        (htmlData, cb) => {
          htmlData.html = htmlData.html.replace('<div id="root"></div>',`<div id="root">
          <div style="background-color:red;height:300px;display:none;" id="default" >
              我是默認的骨架屏
          </div>
          <div style="background-color:red;height:300px;display:none;" id="user" >
              我是user的骨架屏
          </div>
          <div style="background-color:red;height:300px;display:none;" id="login" >
              我是login的骨架屏
          </div>
        </div>
        <script>
              var hash = window.location.hash;
              var path = window.location.pathname;
              if (path === '/login' || hash.startsWith('#/login')) {
                document.getElementById('login').style.display = 'block';
              } else if (path === '/user' || hash.startsWith('#/user')) {
                document.getElementById('user').style.display = 'block';
              } else {
                document.getElementById('default').style.display = 'block';
              }
        </script>`);

        cb(null, htmlData)
      }
    )
  });
  }
}

module.exports = SkeletonPlugin;
複製代碼

其實原理很簡單，相信不少同窗均可以明白。在這裏我就很少說了。謝謝