优雅地使用loading(推荐)


Posted in Javascript onApril 20, 2019

前言 

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

在平时的开发过程中,我们需要异步等待数据,常常会利用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(推荐)

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 ToastConstructor = Vue.extend(LoadingComponent)
// 生成一个该子类的实例
const instance = new ToastConstructor()
// 将这个实例挂载在我创建的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()方法来注册插件

优雅地使用loading(推荐)

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

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

优雅地使用loading(推荐)

奶思!测试成功!

React部分

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

高阶组件

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

具体实现

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

 优雅地使用loading(推荐)

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,但还是希望能分享给大家。写完才真正体会到了那句老话,纸上得来终觉浅,绝知此事要躬行。

以上所述是小编给大家介绍的loading使用解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js获取url参数的使用扩展实例
Dec 29 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
使用node.js搭建服务器
May 20 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
详解JavaScript的数据类型以及数据类型的转换
Apr 20 #Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 #Javascript
函数式编程入门实践(一)
Apr 20 #Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 #Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 #Javascript
详解vue使用$http服务端收不到参数
Apr 19 #Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 #Javascript
You might like
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
php加密解密实用类分享
2014/01/07 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python 中 Meta Classes详解
2016/02/13 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
django页面跳转问题及注意事项
2019/07/18 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
python二维图制作的实例代码
2020/12/03 Python
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
特教教师先进事迹
2014/05/21 职场文书
企业催款函范本
2015/06/24 职场文书
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis