多页面的骨架屏插件实现

一、前言

上一篇文章介绍了单一路由下的骨架屏插件实现。但在真实的产品中，其他页面也是要有各自的骨架屏的。

二、多路由骨架屏的原理

从上篇文章《开发一个简单易懂的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;
复制代码

其实原理很简单，相信很多同学都可以明白。在这里我就不多说了。谢谢