好好学前端-优快云博客

原创面试题目(字节)——异步顺序处理数据

面试题目(字节)——异步顺序处理数据场景一个问题自己过程中想了很长时间没有解决出来，特此记录一下let timeout = (ms) => { return new Promise(resolve => { setTimeout(resolve, ms) })}let ajax1 = () => timeout(2000).then(data => { console.log('1') return 1})let ajax2 = ()

2021-03-30 10:22:40 320

原创骨架图的模拟js实现

骨架图的模拟js实现场景为了提升体验，我们这边在页面初始渲染时加入了骨架图来代替loading，在拿到数据后再渲染数据，更改组件的展示。感觉确实比loading要提升体验，开始没接触过，对这部分比较感兴趣，就尝试着用html+css+js实现了一个简略版的骨架图，其效果如下 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JJgeBzIe-1613973854534)(./骨架图.gif)] 骨架图本质上也是在数据未接收到时的页面初始展示，相比于loading体

2021-02-22 14:04:42 686

原创前端常用方法——call、apply、bind的简易实现

前端常用方法——call、apply、bind的简易实现场景 call, apply,bind可以改变this的指向，利用es6的语法我们可以很简便的实现call，apply，bind用call时，第一个参数为想调用的对象，第二个以及以后为函数调用时的参数，实现如下Function.prototype.myCall = function(self,...args){ self = self || globalThis self.fn = this let result = self

2021-02-02 16:24:35 403

原创前端常用方法——compose和reduce

前端常用方法——compose和reduce场景之前学习的时候看到一个这样的方法const compose = (arr) => { return arr.reduce((a,b) => (...args) => a(b(...args)))}当时看的时候文章说他是不断嵌套调用方法,比如const a = (num) => {}const b = (num) => {}const c = (num) => {}const fn = co

2021-01-26 20:31:53 720

原创前端常用方法——函数防抖节流(立即执行，非立即执行，时间节流，setTimeout节流 )

前端常用方法——函数防抖节流(立即执行，非立即执行，时间节流，setTimeout节流 )场景函数防抖分为立即执行和非立即执行，立即执行是指开始立即执行一次，之后在指定时间后再执行才可以执行；非立即执行是指执行过程中不执行，执行后过一段时间再执行函数节流是指根据间隔时间执行下面是其简易实现防抖// 非立即执行版function debounce(fn,time) { let timer = null return function() { clearTimeout

2021-01-12 17:18:15 2131

原创前端常用方法——promise的简易实现(包含race, all,wrap以及promise的简易实现)

前端常用方法——promise的简易实现(包含race, all,wrap以及promise的简易实现)场景这几天看基础代码发现有好多自己之前实现的给忘记了，打算重拾记录下，以后有空的时间看下～Promise的class版本实现class MyPromise { constructor(fn) { this.status = 'pending' this.successArr = [] this.failArr = [] this.data = ''

2021-01-05 15:37:02 435

原创 useRef的另类使用

useRef的另类使用场景接口调用可能会有很多情况，比如一个场景是第一次进入时请求第一个接口，它之后操作会触发父元素的改变，而当父元素改变后，接下来就会请求另一个接口来触发子元素的改变。这个场景的构思源于别人一段的代码操作，其模拟代码如下const Child = (props: any) => { let number = 0 useEffect(()=>{ // 模拟请求接口操作 setTimeout(() => { number+

2020-12-28 11:10:42 835

原创 hover出现tips的bug处理-代码部分

hover出现tips的bug处理-代码部分Index.tsx部分import React from 'react'import MockToolTip from './mock-tooltips'import './index.scss'const ExpandDataTable = (props: any) => { const title = '111111dhiass' // title 为hover上展示的值，showTips为默认是否开启hover展示title

2020-12-15 14:39:09 165

原创 hover出现tips的bug处理

hover出现tips的bug处理场景引用的组件，当宽度显示不全时有打点显示，比如我先展示哈哈哈哈哈呼呼呼呼,但是宽度不够显示不全，会展示哈哈哈… ,hover上去会显示完整的句子。出现的bug : 在火狐浏览器没有展示完全，但是hover上去并没有出现tips，该问题在谷歌上并没有复现猜测可能是引用组件的问题，发现引用组件中是运用scrollWidth,以及clientWidth来比较进行判断的。针对它所使用的判定方法进行了验证. 模拟样式如下：.expand-data-

2020-12-15 14:38:20 389

原创 tab页签-代码部分

tab页签-代码部分childimport React,{useEffect, useState} from 'react'const Child = (props: any) => { const [loading,setLoading] = useState(true) useEffect(()=>{ setTimeout(()=>{ setLoading(false) },2000) },[]) return ( <d

2020-11-17 18:53:07 319 2

原创 Tab页签的变化

Tab切换(初始版)场景实现一个tab页签，当你点击时tab页签的内容才会加载，并且加载的数据第二次点击的时候数据已经缓存。分为动画切换以及非动画切换效果,效果如图所示这个用的别人封装的基础组件，对这个比较感兴趣，就尝试实现了下.使用代码如下(模拟了之前基础组件的使用方式)const Index = () => { const [topBars,setTopBars] = useState(['aaa','bbb','ccc']) const [activeKey,set

2020-11-17 18:49:46 503

原创子组件请求，父组件展示loading

子组件请求，父组件展示loading场景：子组件请求各自的数据，需要父亲组件loading，等最后一个组件请求完毕后再取消loading（为了让loading只显示一个，视觉上好看）解决：当时想当然了，一直采用一个变量控制展示不展示loading组件，因此没有找到合适的方案。后来一下子搞明白，可以让loading变成一个类似于蒙层的这种方式盖到上边，当最后一个子组件加载完毕后再将蒙层隐藏。代码如下const SetLoading = () :JSX.Element =>{ const [lo

2020-11-02 19:52:14 939

原创基于简易树形组件初始版-数据处理的思考

基于树形组件-数据处理的思考树组件给出的数据格式是这样的：const defaultData = { children:[ { "title":"组织1", "key": "0-1", "children":[ { "title":"部门1", "key":"0-1-1", "children": [ { title: '20

2020-10-16 15:05:19 140

原创简易树形选择组件——初始版全部代码

简易树形选择组件——初始版全部代码ArrowTreeinterface StoreValue { data: any; setArrowTreeData: (data: any) => void}const defaultData = { children:[ { "title":"组织1", "key": "0-1", "children":[ { "title":"部门1", "

2020-10-14 14:45:26 289

原创简易树形选择组件——初始版

简易树形选择组件——初始版场景在业务开发中有树形选择组件可以实现选中，尝试锻炼自己实现该树组件，样式效果如下数据如下const defaultData = { children:[ { "title":"组织1", "key": "0-1", "children":[ { "title":"部门1", "key":"0-1-1", "children": [

2020-10-14 14:43:43 388

原创 (react实现拖拽)拖拽的整体主要代码 ——拖拽完整代码

拖拽的整体主要代码 ——拖拽完整代码拖拽的整体主要代码实现本次拖拽的效果的主要代码如下import React,{useRef,useEffect,useState} from 'react'import './index.scss'const prefixCls = 'drag'interface distanceState { left: number, right: number, top: number, bottom: number, width: numbe

2020-09-22 16:05:35 1802

原创 (react实现拖拽)左右方向判断问题以及节流处理 —— 拖拽实现二

左右方向判断问题以及节流处理 —— 拖拽实现二左右方向的判断在onDragEnd判断时，发现在拖拽左边或者右边会产生问题，需要根据此进行判断，如果是距离原始位置左侧时需要将在endIndex中+1，避免拖拽跨越两个的左侧，而在右侧时则不需要判断，当在最左侧或者最右侧时单独判断，主要代码如下 const handleDragEnd = (e: any,index: number) => { const {clientX,clientY} = e const {leftWidt

2020-09-22 15:57:00 1040

原创 (react实现拖拽)自定义hook的练习以及react事件 —— 拖拽实现一

自定义hook的练习以及react事件 —— 拖拽实现一场景对拖拽比较感兴趣，之前也没有接触过，就尝试着自己实现了拖拽的功能，样式效果如下自定义hook 在获取每个块距离屏幕的位置（用于之后的数据判断）的时候尝试采用了自定义hook来获取数据，代码如下const useDistanceArr = (dragArrRef: any) => { const [distanceArr,setDistanceArr] = useState<distanceState[]>([

2020-09-22 15:47:59 1201

原创滚动条的样式处理

滚动条的样式处理场景做需求时根据ui设计图处理的，滚动条在mac上显示正常，但是在windows本上显示不正常，就处理了滚动条的样式,代码如下： /* 滚动条的整体样式处理 */ .box::-webkit-scrollbar { /*高宽分别对应横竖滚动条的尺寸*/ width : 10px; height: 10px; } /* 滚动条中的小方块处理 */ .box::-webkit-scrollbar-thumb

2020-09-06 18:03:55 356

原创 input点击指定区域不失焦

input点击指定区域不失焦场景做需求时碰到了一个问题，就是input失去焦点会触发请求接口操作，而点击旁边的按钮不触发这个操作。这个问题困扰了挺长时间，通过查阅资料找到了解决方案，记录一下。1、在按钮点击操作时添加一个onmousedown方法，使用e.preventDefault操作,这样就阻止了input失焦点的触发，简易代码如下。<!DOCTYPE html><html lang="en"><head> <meta charset=.

2020-08-30 22:01:17 4809

weixin_42192909的博客