优雅地使用loading

前言

      不知道从何时开始有了写博客的想法，奈何本身的知识储备还很薄弱，迟迟没法下笔。这是个人第一篇博客，算是记录一下本身学习前端以来的一些知识吧。若有错漏，恳请指出，您的批评和指正是我前进路上的一大动力！

      在平时的开发过程当中，咱们须要异步等待数据，经常会利用loading图来增强用户的体验，让用户知道咱们有在加载，那么如何在开发过程当中更为优雅地使用loading呢？开发小程序的时候咱们只须要一句wx.showLoading()就完事儿了，而在web开发中也有相应的UI框架来帮咱们完成这件事情。那到底是怎么实现的呢，让咱们来一块儿看一下。

先实现一个简单的loading

      代码以下

<div class="container">
  <div class="loading"></div>
</div>
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.loading {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 5px #ffffff solid;
  border-right-color: #87CEEB;
  animation: loading 1s linear infinite;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}复制代码

     这样咱们就实现了一个比较简单的转圈圈loading图，下面我将分别叙述在vue和react中如何优雅地使用这个loading。

Vue部分

     首先先用vue init webpack生成一个vue脚手架，插件的目录以下图所示

     

     loading.vue里写进了咱们上面实现的简单loading的代码，加上一点点逻辑

<script>
  export default {
    name: "loading",
    data() {
      return {
        show: false
      }
    }
  }
</script>复制代码

   index.js

//先引入loading组件
import LoadingComponent from './loading'
const Loading = {}
Loading.install = function (Vue) {
// 生成一个Vue的子类 同时这个子类也就是组件
const LoadingConstructor = Vue.extend(LoadingComponent)
// 生成一个该子类的实例
const instance = new LoadingConstructor()
// 将这个实例挂载在我建立的div上
// 并将此div加入全局挂载点内部
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el)
//注入vue的原型链
Vue.prototype.$loading = {
    show() {
        instance.show = true
    },
    close(){  
        instance.show = false
        }
    }
}
export default Loading

复制代码

这里咱们生成个一个Vue的子类，而后将它的实例挂载到全局。将一些方法注入到Vue的原型链中，这样就能够在任何组件中经过相似于this.$loading.show()的方法来控制loading图的显示和隐藏。最后咱们导出Loading对象。而后在main.js中引入Loading插件，并调用Vue.use()方法来注册插件

最后，让咱们来测试一下吧。测试代码以下，用setTimeout来模拟异步请求。

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: ''
      }
    },
    mounted() {
      this.$loading.show()
      setTimeout(()=>{
        this.$loading.close()
        this.msg = '加载完辽！'
      },3000)
    }
  }
</script>复制代码

奶思！测试成功！

React部分

在此以前，我先介绍一下react中的高阶组件(HOC)

高阶组件

在React中，多个不一样的组件中若是须要用到相同的功能，这个解决方法，一般有Mixin和高阶组件。可是因为Mixin过多会使使得组件难以维护，在React ES6中Mixin再也不被支持。高阶组件是一个接替Mixin实现抽象组件公共功能的好方法。高阶组件实际上是一个函数，接收一个组件做为参数，返回一个包装组件做为返回值，相似于高阶函数。

具体实现

先用create-react-app 生成一个测试脚手架，高阶组件目录以下图所示

index.css主要是loading的样式，index.js的代码以下

import React from 'react';
import './index.css'

function hoc(ComponentClass) {
    return class HOC extends ComponentClass {
        render() {
            if (!this.state.loading) {
                console.log(this.state.loading)
                return super.render()
            }
            else {
                return (<div>
                    <div className="container">
                        <div className="loading"></div>
                    </div>
                </div>)
            }
        }
    }
}

export default hoc复制代码

咱们定义了一个hoc函数，接受一个组件做为参数。经过this.state来操做组件的state属性，经过super.render()来渲染组件。最后导出hoc函数。而后在组件中引入，以下

import hoc from '../hoc/loading/index'

class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: '还没加载好',
            loading: true
        }
    }

    render() {
        return (
            <div>
                {this.state.msg}
            </div>
        );
    }

    componentDidMount() {
        let loading = this.state.loading
        setTimeout(() => {
            this.setState({
                loading: !loading,
                msg: '加载完辽!'
            })
        }, 3000)
    }
}

export default hoc(Home)复制代码

一样是采用setTimeout来模拟异步请求，测试结果也是成功的。react部分并无用装饰器来使用高阶组件，还不够优雅。。。（在create-react-app中把网上的处理方法都试了一遍，仍是报错。。）

最后

     至此，在Vue和React中如何优雅地使用loading就到此结束辽。这是一个超简易版的demo，但仍是但愿能分享给你们。写完才真正体会到了那句老话，纸上得来终觉浅，绝知此事要躬行。