![](https://img-blog.csdnimg.cn/f1a4be8e813b48cdb864ab63ca376a1a.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
文章平均质量分 55
前端
天天向上的鹿茸
成功只有两步,一步开始,一步坚持!
展开
-
学习react-router-v6 : useSearchParams、Outlet、Navigate
学习react-router-v6 : useSearchParams、Outlet、useOutletContext、Navigate、useNavigate。原创 2023-05-31 18:50:29 · 822 阅读 · 0 评论 -
如何解决react hook的闭包陷阱以及避开闭包陷阱做优化
如何解决react hook的闭包陷阱以及避开闭包陷阱做优化原创 2022-12-08 20:49:37 · 2080 阅读 · 0 评论 -
【JavaScript闭包】JavaScript何为闭包,浅谈闭包的形成和意义
红宝石书:闭包指的是那些引用了另一个函数作用域中变量的函数。mdn : 闭包(closure)是一个函数以及其捆绑的周边环境状态的引用的组合。闭包就是指有权访问另一个函数作用域中的变量的函数原创 2022-11-30 19:54:55 · 946 阅读 · 0 评论 -
【前端必会手写】call和apply方法
call和apply都是Function原型prototype上的方法。用于改变this指向。两者不同点在于传参。call需要传递散参,而apply需要传递一个参数数组。这两个方法相比bind有一个区别,在于这两个方法是直接调用的,而bind方法是返回一个函数,而这个函数的this指向是明确的。...原创 2022-08-24 12:26:45 · 464 阅读 · 0 评论 -
【Promise.allSettled】手写Promise.allSettled方法
Promise.allSettled是Promise对象的一个静态方法参数是一个可迭代对象,一般是一个Promise数组该Promise.allSettled()方法返回一个Promise对象,当所有给定的 promise对象都已经fulfilled或rejected后,返回的Promise对象能拿到一个对象数组,每个对象表示对应的 promise 结果数据以及状态。...原创 2022-08-04 21:55:13 · 1055 阅读 · 0 评论 -
【前端三栏布局总结】常见的前端三栏布局有哪些
【前端三栏布局总结】常见的前端三栏布局有哪些原创 2022-07-29 22:40:31 · 368 阅读 · 0 评论 -
【react ahooks 源码】useSetState、useMount、useUnmount
ahooks是一个封装了大量实用性高的自定义hook的库。学习这个库的一些源码,相信我们对react hook的使用会更加熟悉。原创 2022-07-24 19:12:24 · 3561 阅读 · 1 评论 -
antd的工具函数getPrefixCls,获取公共前缀
学习antd里面获取管理类名公共前缀的一个方法原创 2022-07-08 18:14:00 · 1935 阅读 · 0 评论 -
前端工具方法:前端如何获取图片的尺寸
前端图片尺寸获取原创 2022-07-05 21:39:55 · 1060 阅读 · 0 评论 -
手写Promise的finally方法
Promise的原型链上有一个finally方法了解一下这个方法Promise.resolve(1).finally(function () { console.log("无论已决状态如何,必定执行")}).then(data => { console.log(data); // 2})Promise.reject(2).finally(function () { console.log("无论已决状态如何,必定执行")}).catch(reason => {原创 2022-03-17 21:43:40 · 1416 阅读 · 0 评论 -
两栏布局,左侧固定,右侧自适应的几种方法
两栏布局,左侧固定,右侧自适应我总结了以下几种方法左侧固定 + 右侧margin左侧固定 + 父级padding左侧浮动 + 右侧BFC左侧浮动 + 右侧margin先两个在一行 + 右侧calc弹性布局DOM结构<div class="container"> <div class="left"></div> <div class="right"></div></div>初始样式<st原创 2022-03-17 21:23:36 · 1593 阅读 · 0 评论 -
手写instanceof
现在有一些面试题会让你手写这个instanceof首先要了解一下instanceof是什么它是一个运算符a instanceof B : a对象的原型链上有没有B构造函数的原型原型链又是一个什么样的情况呢?有这样一段代码,它的原型链情况是这样的function A() { }const a = new A();// a.__proto__ === A.prototype// A.prototype.__proto__ === Object.prototype// Object.prot原创 2022-03-17 18:04:02 · 1502 阅读 · 0 评论 -
JS中数组去重的几种方法
这道题面试题是经常考到的使用set进行去重function unique(arr) { // return [...new Set(arr)]; return Array.from(new Set(arr))}因为有几种方式道理都一样的 一样的情况我就在打在注释上了利用对象或Map进行去重function unique(arr) { // 利用对象或Map去重 const obj = {}; const result = []; arr.原创 2022-03-09 16:59:35 · 749 阅读 · 0 评论 -
浏览器存储(cookie、localStorage、sessionStorage)
浏览器存储(cookie、localStorage、sessionStorage)原创 2022-03-04 22:49:30 · 1926 阅读 · 0 评论 -
关于vue内置transition组件的动画类添加失效
今天在用vue的内置组件transition时出现了一丢丢的小BUG,出现动画类没有加上的问题。不过我看了控制台的DOM结构后就发现,加了appear时其实一开始是有动画类加到DOM上的。但为什么后来没有呢?先不着急,我们先来看一下。这个结构应该可以看的很明白。就是一个按钮和一个transition组件。我们都知道transition动画类的加上移除是通过监听根节点DOM的出现和消失实现的。那么清楚这一点就可以很明显地找到问题的解答方向一开始DOM不存在而是直接创建,又因为有appear所以动画原创 2022-01-27 10:29:04 · 2477 阅读 · 0 评论 -
理解JS高阶函数,动手写一个高阶函数
如果你正在学习 JavaScript,那么你应该见过高阶函数这个术语。 它虽然听起来很复杂,但其实并不难。使 JavaScript 适合函数式编程的原因是它接受高阶函数。高阶函数在 JavaScript 中广泛使用。 如果你已经用 JavaScript 编程了一段时间,你可能已经在不知不觉中用过它们了。高阶函数误区:高阶函数不是指参数有函数参数,然后返回值是函数的函数。我的理解:高阶函数指形参带有函数参数,并且这个高阶函数使用到了函数参数做一些事情,包括处理一些逻辑或者将其封装成另外一个函数返回。原创 2022-01-17 23:03:06 · 494 阅读 · 0 评论 -
webpack的require.context 【详解,快乐前端攻城狮】
webpack的require.context清楚了这点之后,我们来看一下,这个方法到底有什么用?其实这个方法就是用来实现自动化导入导出的。先看它的调用参数require.context(directory, useSubdirectories, regExp) 1. directory: 要查找的文件路径 2. useSubdirectories: 是否查找子目录 3. regExp: 要匹配文件的正则先来看一段代码const requireApi = require.con原创 2021-11-06 11:49:57 · 2295 阅读 · 4 评论 -
H5 canvas 画圆 画圆角
canvas是H5的一大重点我们来学一下如何用canvas画圆画圆arc(x,y,r,起始弧度,结束弧度,顺逆时针)x,y就是这个圆的圆心坐标r是圆的半径弧度单位用Math.PI顺逆时针用0(顺时针) 1(逆时针)const cas = document.getElementsByTagName('canvas')[0];const ctx = cas.getContext("2d");ctx.arc(250,250,100,0,Math.PI / 2,1);ctx.stroke原创 2021-10-23 17:53:22 · 1457 阅读 · 0 评论 -
H5纯原生播放器 【学习video】
这是一个纯原生的H5播放器,尽管网上有很多第三方库,但是基础打的牢固,一定会帮你走的更远。大厂也非常重视基础,再说了那些第三方库也是基础一点点搭起来的,所以有兴趣学习的同学可以下载来学习。代码中的细节我都写了注释了。也非常欢迎大家进行拓展,有兴趣拓展功能,可以另起一个分支,最好写个文档,说明一下添加了哪些功能。这是用H5的video标签做的视频播放器只是学习用的,所以已有的功能可能存在问题,当然功能肯定是不完备的。但作为学习H5的video,应该是可以的。index.html是我一开始写播放原创 2021-10-23 17:41:20 · 1884 阅读 · 0 评论 -
深入探究CSS3 transform-style:preserve-3d
这些都是我参照文档以及自己试出来的理解。至于对不对嘛,还要实践才知道。来看嘛,打都打开,也许会有意想不到的收获呢!默认值flat没什么好说的。preserve-3d:指定子元素定位在三维空间内。上效果解释,说服力满满滴!<style> body { perspective: 800px; perspective-origin: 250px 300px; } .wrapper { position: relati原创 2021-10-17 20:12:41 · 3600 阅读 · 0 评论 -
深入理解CSS3动画 rotate
我这个解释可能会比较全,如果有兴趣深入了解CSS3动画的朋友,往下看,也许会有意想不到的收获。本来想找张浏览器空间坐标轴的图的。结果没有找到。那就听我说,你们想象一下。x轴水平朝右,y轴垂直于x轴垂直向下,z轴垂直于x轴,y轴所成的平面,从屏幕指向我们。现在脑子里构思一下这么个坐标系。然后继续发挥想象。ok,我可没偷懒,只不过我的笔记记得会比较好看。所以我直接征用了。rotate这个函数请区分于rotateX,rotateY,rotateZ理解,下面三个都是基于3D的变化,而这个是基于2原创 2021-10-17 18:14:48 · 949 阅读 · 1 评论 -
在react项目中配置alias-[webpack配置]
alias是webpack中用来配置路径别名的,在路径嵌套特别深的项目中,对于路径的导入非常友好。webpack中的aliascreate-react-app搭建的react项目中配置alias先运行脚本eject npm run eject | yarn run eject找到项目中paths.js文件module.exports = { dotenv: resolveApp('.env'), appPath: resolveApp('.'), appBuild: resol.原创 2021-07-31 17:43:11 · 1420 阅读 · 0 评论 -
关于事件对象中的stopImmediatePropagation
关于e.stopPropagation(),大家应该知道这个方法是用来阻止事件冒泡的。那么e.stopImmediatePropagation()可能比较少见。stopImmediatePropagation用来阻止在同一DOM对象上同一事件类型的其它事件函数的执行并且与事件先后注册的顺序有关感觉晦涩难懂?我举个简单的例子我在document身上注册同类型click的两个事件document.addEventListener("click",e=>{ console.lo原创 2021-07-21 11:35:28 · 770 阅读 · 1 评论