- 博客(20)
- 收藏
- 关注
原创 面试题目(字节)——异步顺序处理数据
面试题目(字节)——异步顺序处理数据场景 一个问题自己过程中想了很长时间没有解决出来,特此记录一下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
282
原创 骨架图的模拟js实现
骨架图的模拟js实现场景 为了提升体验,我们这边在页面初始渲染时加入了骨架图来代替loading,在拿到数据后再渲染数据,更改组件的展示。感觉确实比loading要提升体验,开始没接触过,对这部分比较感兴趣,就尝试着用html+css+js实现了一个简略版的骨架图,其效果如下 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JJgeBzIe-1613973854534)(./骨架图.gif)] 骨架图本质上也是在数据未接收到时的页面初始展示,相比于loading体
2021-02-22 14:04:42
638
原创 前端常用方法——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
371
原创 前端常用方法——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
682
原创 前端常用方法——函数防抖节流(立即执行,非立即执行,时间节流,setTimeout节流 )
前端常用方法——函数防抖节流(立即执行,非立即执行,时间节流,setTimeout节流 )场景 函数防抖分为立即执行和非立即执行,立即执行是指开始立即执行一次,之后在指定时间后再执行才可以执行;非立即执行是指 执行过程中不执行,执行后过一段时间再执行 函数节流是指根据间隔时间执行 下面是其简易实现防抖// 非立即执行版function debounce(fn,time) { let timer = null return function() { clearTimeout
2021-01-12 17:18:15
2048
原创 前端常用方法——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
351
原创 useRef的另类使用
useRef的另类使用场景 接口调用可能会有很多情况,比如一个场景是 第一次进入时请求第一个接口,它之后操作会触发父元素的改变,而当父元素改变后,接下来就会请求另一个接口来触发子元素的改变。 这个场景的构思源于别人一段的代码操作,其模拟代码如下const Child = (props: any) => { let number = 0 useEffect(()=>{ // 模拟请求接口操作 setTimeout(() => { number+
2020-12-28 11:10:42
811
原创 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
136
原创 hover出现tips的bug处理
hover出现tips的bug处理场景 引用的组件,当宽度显示不全时有打点显示,比如我先展示 哈哈哈哈哈呼呼呼呼,但是宽度不够显示不全,会展示 哈哈哈… ,hover上去会显示完整的句子。 出现的bug : 在火狐浏览器没有展示完全,但是hover上去并没有出现tips,该问题在谷歌上并没有复现 猜测可能是引用组件的问题,发现引用组件中是运用scrollWidth,以及clientWidth来比较进行判断的。针对它所使用的判定方法进行了验证. 模拟样式如下:.expand-data-
2020-12-15 14:38:20
349
原创 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
272
2
原创 Tab页签的变化
Tab切换(初始版)场景 实现一个tab页签,当你点击时tab页签的内容才会加载,并且加载的数据第二次点击的时候数据已经缓存。分为动画切换以及非动画切换效果,效果如图所示 这个用的别人封装的基础组件,对这个比较感兴趣,就尝试实现了下.使用代码如下(模拟了之前基础组件的使用方式)const Index = () => { const [topBars,setTopBars] = useState(['aaa','bbb','ccc']) const [activeKey,set
2020-11-17 18:49:46
437
原创 子组件请求,父组件展示loading
子组件请求,父组件展示loading场景:子组件请求各自的数据,需要父亲组件loading,等最后一个组件请求完毕后再取消loading(为了让loading只显示一个,视觉上好看)解决:当时想当然了,一直采用一个变量控制展示不展示loading组件,因此没有找到合适的方案。后来一下子搞明白,可以让loading变成一个类似于蒙层的这种方式盖到上边,当最后一个子组件加载完毕后再将蒙层隐藏。代码如下const SetLoading = () :JSX.Element =>{ const [lo
2020-11-02 19:52:14
874
原创 基于简易树形组件初始版-数据处理的思考
基于树形组件-数据处理的思考 树组件给出的数据格式是这样的:const defaultData = { children:[ { "title":"组织1", "key": "0-1", "children":[ { "title":"部门1", "key":"0-1-1", "children": [ { title: '20
2020-10-16 15:05:19
114
原创 简易树形选择组件——初始版全部代码
简易树形选择组件——初始版全部代码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
260
原创 简易树形选择组件——初始版
简易树形选择组件——初始版场景 在业务开发中有树形选择组件可以实现选中,尝试锻炼自己实现该树组件,样式效果如下 数据如下const defaultData = { children:[ { "title":"组织1", "key": "0-1", "children":[ { "title":"部门1", "key":"0-1-1", "children": [
2020-10-14 14:43:43
354
原创 (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
1734
原创 (react实现拖拽)左右方向判断问题以及节流处理 —— 拖拽实现二
左右方向判断问题以及节流处理 —— 拖拽实现二左右方向的判断 在onDragEnd判断时,发现在拖拽左边或者右边会产生问题,需要根据此进行判断,如果是距离原始位置左侧时需要将在endIndex中+1,避免拖拽跨越两个的左侧,而在右侧时则不需要判断,当在最左侧或者最右侧时单独判断,主要代码如下 const handleDragEnd = (e: any,index: number) => { const {clientX,clientY} = e const {leftWidt
2020-09-22 15:57:00
988
原创 (react实现拖拽)自定义hook的练习以及react事件 —— 拖拽实现一
自定义hook的练习以及react事件 —— 拖拽实现一场景 对拖拽比较感兴趣,之前也没有接触过,就尝试着自己实现了拖拽的功能,样式效果如下自定义hook 在获取每个块距离屏幕的位置(用于之后的数据判断)的时候尝试采用了自定义hook来获取数据,代码如下const useDistanceArr = (dragArrRef: any) => { const [distanceArr,setDistanceArr] = useState<distanceState[]>([
2020-09-22 15:47:59
1142
原创 滚动条的样式处理
滚动条的样式处理场景 做需求时根据ui设计图处理的,滚动条在mac上显示正常,但是在windows本上显示不正常,就处理了滚动条的样式,代码如下: /* 滚动条的整体样式处理 */ .box::-webkit-scrollbar { /*高宽分别对应横竖滚动条的尺寸*/ width : 10px; height: 10px; } /* 滚动条中的小方块处理 */ .box::-webkit-scrollbar-thumb
2020-09-06 18:03:55
326
原创 input点击指定区域不失焦
input点击指定区域不失焦场景做需求时碰到了一个问题,就是input失去焦点会触发请求接口操作,而点击旁边的按钮不触发这个操作。这个问题困扰了挺长时间,通过查阅资料找到了解决方案,记录一下。1、在按钮点击操作时添加一个onmousedown方法,使用e.preventDefault操作,这样就阻止了input失焦点的触发,简易代码如下。<!DOCTYPE html><html lang="en"><head> <meta charset=.
2020-08-30 22:01:17
4587
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人