- 博客(45)
- 收藏
- 关注
RSS订阅原创 学习react-router-v6 : useSearchParams、Outlet、Navigate
学习react-router-v6 : useSearchParams、Outlet、useOutletContext、Navigate、useNavigate。
2023-05-31 18:50:29
679
原创 单页面应用访问服务，在本地也可以正确访问路由
这个express服务可以让我们访问路由的时候还是会返回html文件。你可以直接将你打包生成的项目放到根路径下，比如你打包后的文件夹是dist,那么可以放到这个项目的根路径进行访问。
2023-05-25 11:19:42
200
原创 react类组件的事件为什么需要绑定this？
这个问题其实在一年多以前吧，我就搞清楚了，结果已经很久没用react的类组件了，结果现在用了，发现自己忘了为什么要绑定，所以写一下这篇文章做笔记。在进行props传值的时候，你相当于就是把值赋给了那个props，上面的代码与下面的代码一样。每天进步一点点，过了一段时间，你就会发现你比之前提高了很多。也就说react执行函数的时候，就是执行函数。那么官方就提供了以下几种写法。每次组件重渲染时都会重新调用。，非严格模式指向全局对象。
2023-04-28 17:45:57
210
原创 前端从零开始写一个简单的响应式
写一个简单的响应式。不是vue的源码更多的是一个理解。首先需要遍历对象，为对象的每个属性设置setter和getter。function observer(obj) { const vm = {}; for (const prop in obj) { if (Object.hasOwnProperty.call(obj, prop)) { const dep = new Dep(); Object.defineProper
2023-04-04 15:32:56
442
原创 【JavaScript闭包】JavaScript何为闭包，浅谈闭包的形成和意义
红宝石书：闭包指的是那些引用了另一个函数作用域中变量的函数。mdn : 闭包（closure）是一个函数以及其捆绑的周边环境状态的引用的组合。闭包就是指有权访问另一个函数作用域中的变量的函数
2022-11-30 19:54:55
895
原创 Vue3中router-view，keepAlive，transition嵌套使用
Vue3中router-view，keepAlive，transition嵌套使用
2022-09-22 08:59:25
1287
原创 【前端必会手写】call和apply方法
call和apply都是Function原型prototype上的方法。用于改变this指向。两者不同点在于传参。call需要传递散参，而apply需要传递一个参数数组。这两个方法相比bind有一个区别，在于这两个方法是直接调用的，而bind方法是返回一个函数，而这个函数的this指向是明确的。...
2022-08-24 12:26:45
453
原创 【Promise.allSettled】手写Promise.allSettled方法
Promise.allSettled是Promise对象的一个静态方法参数是一个可迭代对象，一般是一个Promise数组该Promise.allSettled()方法返回一个Promise对象，当所有给定的 promise对象都已经fulfilled或rejected后，返回的Promise对象能拿到一个对象数组，每个对象表示对应的 promise 结果数据以及状态。...
2022-08-04 21:55:13
1015
原创 【react ahooks 源码】useSetState、useMount、useUnmount
ahooks是一个封装了大量实用性高的自定义hook的库。学习这个库的一些源码，相信我们对react hook的使用会更加熟悉。
2022-07-24 19:12:24
3471
1
原创 Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return
Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
2022-07-07 19:19:45
5873
原创 手写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
1379
原创 两栏布局，左侧固定，右侧自适应的几种方法
两栏布局，左侧固定，右侧自适应我总结了以下几种方法左侧固定 + 右侧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
1574
原创 手写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
1498
原创 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
739
原创 数组排序之归并排序
将给定的数组一份为二对两部分数组再使用归并排序使其有序最后再将两部分数组合并// 归并排序的思想// 分而治之，直到两个数组有序，接着对两个有序数组进行合并function merge(arr, start, mid, end) { // 问题就变成对两个有序数组进行合并 let curIndex = start, // 当前归并项的索引 i = start, j = mid + 1; const tmpArr = arr.slic.
2022-03-07 17:41:38
678
原创 304状态码与浏览器缓存(强缓存与协商缓存)
浏览器缓存可以有效释放服务器的压力，还可以提高用户体验，提高Web应用的性能。浏览器缓存分为强制缓存和协商缓存。一般这两种都是一起使用的。
2022-03-05 09:53:43
1424
1
原创 浏览器存储(cookie、localStorage、sessionStorage)
浏览器存储(cookie、localStorage、sessionStorage)
2022-03-04 22:49:30
1899
原创 关于vue内置transition组件的动画类添加失效
今天在用vue的内置组件transition时出现了一丢丢的小BUG，出现动画类没有加上的问题。不过我看了控制台的DOM结构后就发现，加了appear时其实一开始是有动画类加到DOM上的。但为什么后来没有呢？先不着急，我们先来看一下。这个结构应该可以看的很明白。就是一个按钮和一个transition组件。我们都知道transition动画类的加上移除是通过监听根节点DOM的出现和消失实现的。那么清楚这一点就可以很明显地找到问题的解答方向一开始DOM不存在而是直接创建，又因为有appear所以动画
2022-01-27 10:29:04
2455
原创 vue2中单文件组件引入外部css，scoped失效导致样式全局污染
如果你在学习vue，相信一定对style标签的scoped属性很熟悉。使用scoped属性可以防止单文件组件的样式全局化造成样式污染。但有一个坑，外部引入的css,less,scss文件可能会出现scoped失效。我去看了一下，最终生成的样式文件并没有生成data-v-xxxxx来预防全局样式污染。解决方法通过style的src引入外部样式文件...
2022-01-22 10:45:15
1585
原创 Could not find “store“ in the context of “Connect(homePage)
如果你是在使用umi搭建的项目出的这个问题，因为umi很多东西都是配置式的，所以model文件夹你可能拼错了，我去看了一下，发现少了s。
2022-01-19 11:40:40
921
1
原创 理解JS高阶函数，动手写一个高阶函数
如果你正在学习 JavaScript，那么你应该见过高阶函数这个术语。 它虽然听起来很复杂，但其实并不难。使 JavaScript 适合函数式编程的原因是它接受高阶函数。高阶函数在 JavaScript 中广泛使用。 如果你已经用 JavaScript 编程了一段时间，你可能已经在不知不觉中用过它们了。高阶函数误区：高阶函数不是指参数有函数参数，然后返回值是函数的函数。我的理解：高阶函数指形参带有函数参数，并且这个高阶函数使用到了函数参数做一些事情，包括处理一些逻辑或者将其封装成另外一个函数返回。
2022-01-17 23:03:06
485
原创 [element ui 小坑]this.$refs.formDom.validate 的回调不执行
【时间宝贵可以看最后一句话】其实也不算小坑，今天就是用到了饿了么ui里form，然后进行表单校验validate 的时候就是回调不执行，我也试过promise，然后看了看文档，发现，艹。相信很多小伙伴都很多时候都会改饿了么ui的样式，然后呢，我就很不喜欢他那个表单的红色提示，于是我改了，但是表单验证还是用了但是呢，也仅仅是用来触发校验而已。所以validator第三个回调参数参数我压根没写，当然因为这个组件是我之前写的，所以改的时候总是忽略一些小问题。可能啊，我是说可能啊，有没有可能是你的valida
2022-01-11 11:20:46
902
1
原创 Critical dependency: require function is used in a way in which dependencies
这个错误呢？去看一下我写的webpack的require.context 【详解，快乐前端攻城狮】
2021-11-06 11:51:27
2121
原创 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
2254
4
原创 CopyPlugin Invalid Options options should be array ValidationError: CopyPlugin Invalid Options
这个错误是使用webpack的一个plugin出现的错误。这个plugin是copy-webpack-plugin我把文档的例子复制，然后就报了这个错误。文档的例子const CopyPlugin = require("copy-webpack-plugin");module.exports = { plugins: [ new CopyPlugin({ patterns: [ { from: "source", to: "dest" },
2021-10-31 19:35:15
3662
原创 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
1436
原创 H5纯原生播放器 【学习video】
这是一个纯原生的H5播放器，尽管网上有很多第三方库，但是基础打的牢固，一定会帮你走的更远。大厂也非常重视基础，再说了那些第三方库也是基础一点点搭起来的，所以有兴趣学习的同学可以下载来学习。代码中的细节我都写了注释了。也非常欢迎大家进行拓展，有兴趣拓展功能，可以另起一个分支，最好写个文档，说明一下添加了哪些功能。这是用H5的video标签做的视频播放器只是学习用的，所以已有的功能可能存在问题，当然功能肯定是不完备的。但作为学习H5的video，应该是可以的。index.html是我一开始写播放
2021-10-23 17:41:20
1828
原创 深入探究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
3507
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人