优雅地使用加载(推荐)

　　

　　

不知道从什么时候开始有了写博客的想法,奈何自己的知识储备还很薄弱,迟迟无法下笔。这是我的第一篇博客,算是记录一下自己学习前端以来的一些知识吧。如有错漏,恳请指出,您的批评和指正是我前进路上的一大动力!

　　

在平时的开发过程中,我们需要异步等待数据,常常会利用加载图来加强用户的体验,让用户知道我们有在加载,那么如何在开发过程中更为优雅地使用加载呢?开发小程序的时候我们只需要一句wx.showLoading()就完事儿了,而在网络开发中也有相应的UI框架来帮我们完成这件事情。那究竟是怎么实现的呢,让我们来一起看一下。

　　


　　

　　 　　 　　& lt; div类="容器"比; 　　& lt; div类="加载"祝辞& lt;/div> 　　& lt;/div> 　　.container { 　　位置:绝对的; 　　左:50%; 　　上图:50%; 　　变换:翻译(-50%,-50%); 　　} 　　 　　.loading { 　　宽度:100 px; 　　身高:100 px; 　　这个特性:100%; 　　边界:5 px # ffffff固体; 　　border-right-color: # 87 ceeb; 　　动画:加载1 s线性无限; 　　} 　　 　　@keyframes加载{ 　　0% { 　　变换:旋转(0度); 　　} 　　100% { 　　变换:旋转(360度); 　　} 　　} 　　 　　之前 　　 　　

这样我们就实现了一个比较简单的转圈圈加载图、下面我将分别叙述在vue和反应中如何优雅地使用这个装载。

　　

　　

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

　　

优雅地使用加载(推荐)

　　

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

　　 　　 　　& lt; script> 　　出口默认{ 　　名称:“加载”, 　　数据(){ 　　返回{ 　　显示:假 　　} 　　} 　　} 　　& lt;/script> 　　 　　

index.js 　　 　　//先引入加载组件 　　从“进口LoadingComponent。/加载” 　　const加载={} 　　装载。安装=function (Vue) {//生成一个Vue的子类同时这个子类也就是组件 　　const ToastConstructor=Vue.extend (LoadingComponent)//生成一个该子类的实例 　　const实例=new ToastConstructor ()//将这个实例挂载在我创建的div上//并将此div加入全局挂载点内部 　　实例。山美元(document.createElement (div)) 　　document.body.appendChild(实例。el美元)//注入vue的原型链 　　Vue.prototype。$加载={ 　　显示(){ 　　实例。显示=true 　　}, 　　close () { 　　实例。显示=false 　　} 　　} 　　} 　　出口默认加载 　　 　　 　　之前 　　 　　

这里我们生成个一个Vue的子类,然后将它的实例挂载到全局。将一些方法注入到Vue的原型链中,这样就可以在任何组件中通过类似于这个。美元loading.show()的方法来控制加载图的显示和隐藏。最后我们导出加载对象,然后在main.js中引入加载插件,并调用Vue.use()方法来注册插件

　　

优雅地使用加载(推荐)

　　

最后,让我们来测试一下吧。测试代码如下,用setTimeout来模拟异步请求。

　　 　　 　　& lt; script> 　　出口默认{ 　　名称:“HelloWorld”, 　　数据(){ 　　返回{ 　　味精:“ 　　} 　　}, 　　安装(){ 　　loading.show美元。() 　　setTimeout(()=祝辞{ 　　loading.close美元。() 　　这一点。味精='加载完辽!” 　　},3000) 　　} 　　} 　　& lt;/script> 　　 　　之前 　　 　　

优雅地使用加载(推荐)

　　

奶思!测试成功!

　　

　　

在此之前,我先介绍一下中反应的高阶组件(HOC)

　　

　　

在反应中,多个不同的组件中如果需要用到相同的功能,这个解决方法,通常有Mixin和高阶组件。但是由于Mixin过多会使使得组件难以维护,在反应ES6中混合不再被支持。高阶组件是一个接替Mixin实现抽象组件公共功能的好方法。高阶组件其实是一个函数,接收一个组件作为参数,返回一个包装组件作为返回值、类似于高阶函数。

　　

　　

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

　　

, 优雅地使用加载(推荐)

优雅地使用加载(推荐)