- 博客(33)
- 收藏
- 关注
RSS订阅原创 React - 实现一个支持TypeScript类型推导的 useRequest
当我们使用useState和请求时，有这样的场景： 需要在页面挂载的时候请求，并且支持loading状态和错误信息捕获。这个函数本身是没什么难度的，主要是需要支持TypeScript的类型推导，就当做一次TypeScript类型的练习吧
2023-12-14 16:39:36
412
原创 事件循环 - nextTick与微任务 - 在 NodeJS的ESM模式和CJS模式下，nextTick与.then执行顺序不一致的问题
今天想来分享一下nodejs的type: "module"对事件循环的影响。当面试时遇到了事件循环问题，如果遇到了nextTick，把CommonJS和ESM的区别说清楚，相信会给你带来额外加分
2023-11-21 17:28:09
287
原创 React实现一个拖拽排序组件 - 支持多行多列、支持TypeScript、支持Flip动画、可自定义拖拽区域
React实现一个拖拽排序组件 - 支持多行多列、支持TypeScript、支持Flip动画、可自定义拖拽区域
2023-11-05 15:56:15
1811
原创 Promise的并发控制 - 从普通并发池到动态并发池
给你一个有200个URL的数组，通过这些URL来发送请求，要求并发请求数不能超过五个。 这是一道很常考的面试题，接下来让我们来学习一下Promise并发控制 主要思路就是，判断当前队列是否满，满则等待，有空闲则补齐。 利用 Promise.race 方法，可以判断一个Promise数组中 “谁最先完成” ，从而让等待中的函数开始运行。
2023-11-04 00:42:34
714
原创 解决 React forwardRef 与 TypeScript 泛型组件冲突的问题
forwardRef是一个可以将组件内的ref对外暴露的高阶组件，当你的组件需要对外暴露元素的Ref，或者想对外暴露某些内部方法，就可以使用这个 （对应vue3的 expose 方法） 但是当forwardRef与TypeScript泛型组件结合时，会出现泛型丢失的问题 （传入泛型无效） 对这个问题，网上有许多解决方法，比如 定义 global.d.ts 等，但是感觉都不够高效，现在给大家带来我的解决方法 主要思路就是创建一个高阶组件，继承原
2023-11-03 22:42:55
1515
原创 性能优化之懒加载 - 基于观察者模式和单例模式的实现
在前端性能优化中，关于图片/视频等内容的懒加载一直都是优化利器。当用户看到对应的视图模块时，才去请求加载对应的图像。 原理也很简单，通过浏览器提供的IntersectionObserver - Web API 接口参考 | MDN (mozilla.org)，观察“哪个元素和视口交叉”，从而进行懒加载。 这个API具有很好的性能，因为它的监听是异步的，不会影响JS的主线程，所以比传统的“监听页面滚动”更佳。关于API的使用，这里就不做过多说明了，主要操作如下：
2023-11-03 22:23:42
1445
原创 实现分片上传、断点续传、秒传 （JS+NodeJS）（TypeScript）
上传文件是一个很常见的操作，但是当文件很大时，上传花费的时间会非常长，上传的操作就会具有不确定性，如果不小心连接断开，那么文件就需要重新上传，导致浪费时间和网络资源。 所以，当涉及到大文件上传时，分片上传和断点续传就显得很有必要。把文件分成多个分片，一片片上传，最终服务端再进行合并操作。主要思路：计算唯一标识 --> 若上传过，则秒传 --> 分片 --> 若上传过部分，则断点续传 --> 正常分片上传 --> 完整性校验 --> 合并请求
2023-10-28 14:20:46
2908
原创 ThreeJS - 封装一个GLB模型展示组件（TypeScript）
最近基于Three.JS，使用class封装了一个GLB模型展示，支持TypeScript、支持不同框架使用，具有多种功能。最主要的操作，其实就是下面这两步，做完就显示模型出来了，其它就是可视化的配置了。const modelShow = new GLBModel(node) //创建实例//加载模型。
2023-10-02 23:07:16
2607
原创 使用Class二次封装sequelize （nodejs、next、nuxt操作数据库）
最近是在做NextJS全栈，避免不了去操作数据库。sequelize 是一个NodeJS操作数据的ORM框架，可以有效避免原生SQL语句导致的SQL注入漏洞。 但是原生的sequelize写起来比较繁琐，且对详细的ts支持并不是很好，所以我二次封装了一个，简化了一些操作 而且一个项目肯定不止链接一个数据库，所以使用class来封装，才能达到代码复用的效果 只需要定义好数据库的ts接口，就可以获得良好的代码提示
2023-09-23 15:08:33
462
2
原创 React 实现一个瀑布流组件（TypeScript） 支持宽度响应式，支持任意列数，支持触底加载，良好的TS类型支持
瀑布流是很常见的布局，移动端、PC端均可使用，主要特点是每个元素等宽，但是不等高。（比如我们逛淘宝，商品的展示就是瀑布流）瀑布流只使用css的话，效果非常不好，且限制特别多，一般都是使用JS进行高度计算 注：本文的实现，需要提前知道图片的大致宽高比例，可以让后端返回（因为在Img加载出来后，前端才能获取到真实的宽高，不划算）本文代码示例效果：支持宽度响应式，支持任意列数，支持触底加载，良好的TS类型支持
2023-09-23 14:03:45
1997
13
原创 mini-vue - 快速Diff算法
虚拟节点vnode的children有两种类型，一种就是vnode数组（可以根据数组来patch递归产生子节点），一种就是string类型（就比如 文本 中，div是vnode，"文本"是children ）在进行更新的时候，children的变化有四种可能，其它三种就比较简单，而vnode[] -> vnode[]，这种情况就比较复杂了，出于性能考虑，我们不能把所有节点移除，然后再挂载，这时候就需要使用DIff算法，来判断哪些节点可以复用，哪些节点需要移除，哪些节点需要添加
2023-08-07 00:37:04
115
原创 Nuxt3 - useState全局状态管理与localStorage本地存储持久化
这是Nuxt3为我们准备的全局状态管理，且支持响应式，可以无需使用pinia等，直接在项目中使用。官网文档：useState · Nuxt Composables、State Management · Get Started with Nuxt注意事项：· 由于会把State存储为JSON，所以请不要存储不能被JSON化的数据，比如类、函数、Symbol等· 为了让我们的状态管理能在任何地方使用（不止在setup中），最好统一使用函数的写法，见下第一个参数是全局唯一的键值（就比
2023-07-14 01:28:06
4503
1
原创 Element-plus 虚拟表格 绑定单元行的双击事件、单击事件 （Vue3、Nuxt3）
由于做的内容需要渲染大量数据，用原本的表格渲染会十分卡顿，所以选择使用虚拟化表格，官方文档：Virtualized Table 虚拟化表格 | Element Plus (element-plus.org) 但是由于这个表格还是beta版，所以提供的事件也非常少。我做的项目需要实现表格的单击、双击单元行，来进行操作这一行的数据，但是翻阅文档并没有找到这个事件，那么只能自己实现了。想获取点击/双击的单元行的数据，那么我们可以通过获取这个单元行的索引，进而获取数据。那么怎么获得索引呢？我这边是
2023-07-10 17:31:52
3618
3
原创 在Vue3中使用 tsx / jsx + 插槽 （element-plus中的tsx写法与插槽）
在Vue3中使用 tsx / jsx + 插槽 （element-plus中的tsx写法与插槽）今天在学习使用element-plus的虚拟化表格时，遇到了一个问题，就是需要在表格项中自定义渲染内容（比如渲染一个Tag标签，渲染一个下拉框组件等） 可见官网示例：Virtualized Table 虚拟化表格 | Element Plus (element-plus.org)。在组件标签中有个v-slots属性，给里面传入一个对象，键是插槽名，值是render函数。
2023-07-10 15:08:41
5212
3
原创 JS：自制播放器接入操作系统接口 - Media Session API （可以实现浏览器控制上下首、耳机触控上下首歌曲等）
当我们自制播放器时，和其它大型播放器网站对比就会发现，他们的播放器，可以用操作系统级的控件来操控上下首，而我们做的只能让用户在网页中点击上下首按钮来切歌，如下： 操作系统媒体控件：笔记本电脑的键盘上自带声音控件按钮，点击键盘上的按钮将会在屏幕上显示声音控件。有耳机的还可以用耳机上的触控按钮来切换上下首、手机版的浏览器下拉通知栏也能看到浏览器的音乐控件。这是操作系统级别的操作。下方以戴尔笔记本的声音操作控件为例，对比查看大型播放器和我们的区别。大家也可以用手机浏览器或者耳机尝试。
2023-07-09 14:57:40
433
1
原创 Vue3+ts （nuxt3）使用ref获取dom元素（单个、多个）
直接用字符串的形式即可，不管是多个还是单个，多个会自动放到一个数组里面，而且还能被watch监视。注意需要在挂载后才能拿到这些数据。
2023-07-08 12:29:44
1881
原创 Nuxt3 - 设置网站的图标和标题等
Nuxt3的更新变化特别大，请对准版本和时间再进行参考他人文章。我的nuxt版本：3.0.0，当前时间为2023.7.7官网文档：SEO and Meta · Get Started with Nuxt在任意一个页面中，使用useHead:其它方法：使用nuxt.config.ts，不推荐，因为无法动态更改，如何配置可以查阅官方文档。Nuxt3的更新变化特别大，请对准版本和时间再进行参考他人文章。我的nuxt版本：3.0.0，当前时间为2023.7.7。
2023-07-07 11:22:40
1911
1
原创 Nuxt3踩坑记 - 使用keep-alive
Nuxt3的变化太频繁了，很多其他人写的文章都已经失效了。本文章写于2023.7.7，nuxt版本为3.0.0。比如我想让/search是KeepAlive的，那么就是 在/pages/search.vue中，加上这句代码。现在想要让某个页面是keep-alive的，只需要在那个页面中加一句这个代码就行
2023-07-07 11:15:48
1915
5
原创 在服务器部署Next.js、Node.js项目，并实现自动部署（伪CI\CD）超详细
最近Vercel服务不稳定，经常被墙，还是得整一个自己的服务器呀😭😭😭习惯了vercel的自动部署，那么自己的服务器也得安排上，走起。nuxt项目部署、NextJS项目部署、本文使用Webhook来进行自动部署。本文将带你从0到1进行服务器的配置与项目部署。（next项目部署、nuxt项目部署、node项目部署）超详细
2023-05-06 22:49:26
7419
3
原创 微信小程序判断小程序进入场景值 （含全部场景值的判断代码）
对于小程序，可以在App的onLaunch和onShow，或wx.getLaunchOptionsSync中获取上述场景值。下方给出示例函数全部场景值都适配了！
2023-04-18 18:00:57
4521
3
原创 JS把二叉树展示在页面上，二叉树转DOM
支持空节点，且可以连线。在连线的同时，把null的值也展示出来了，这样节点之间的关系也很清晰。为了方便获取真正的二叉树，下面会给出 从层序数组构造二叉树，然后再从树生成展示在页面上的DOM树 的代码。这里的代码比较分散，如果想直接复制代码查看示例的，可以往下滑动到第三点查看。 原理：把二叉树转为层序数组，然后挂载在页面上，使用css的flex布局达成效果，然后再计算节点与其父节点的中心坐标，根据勾股定理算出角度，创建出盒子，利用css3的旋转达成斜线效果
2023-04-15 23:18:27
362
原创 JS层序构造二叉树、JS层序遍历二叉树、JS力扣的二叉树层序数组构建
将层序数组构造为一颗二叉树、将二叉树层序遍历后返回一个层序数组，js和ts代码均有。在力扣刷算法时，给出的二叉树示例都是数组形式，如果想在自己的编译器上编写代码，就需要把数组转换为一颗真正的二叉树，这样才能作为输入示例。TypeScript三、层序遍历二叉树 迭代法关于二叉树节点类 TreeNode 的定义，在上面的代码中有TypeScript
2023-04-12 16:26:58
425
原创 实现Lodash.set 、根据antd的Form.Item组件中的NamePath给对象目标位置赋值
传递NamePath，根据NamePath给对象的目标位置赋值，且不会影响对象中其它属性。antd组件库中的Form.Item属性，可以输入NamePath，会自动填充至对象的目标位置比如一个对象 obj , 想给对象目标位置赋值，如果你知道这个路径是固定的，那当然可以直接通过点语法 obj.a.b 一步步赋值，但是时候，就不能通过点语法了，需要根据用户传入的路径来进行动态赋值，比如一会想给 obj.a.b赋值，一会想给 obj.c.d[2].e赋值。
2023-04-08 18:53:59
1630
原创 原生微信小程序使用u-charts（组件版）折线图示例
之前一直使用的都是 wx-charts，链接：xiaolin3303/wx-charts: 微信小程序图表charts组件 ，但是这个库已经五六年没有维护了。今天来介绍以下 u-charts 的组件版的基本使用。这篇文章只讲述了折线图的基本使用方法，更多配置项建议阅读官方文档 （链接在文章开头）本文的第四点 进阶用法，是我的踩坑记录：1. 为什么设置了允许滚动，滑动页面没有效果？2.到底怎么获取索引号？为什么官网都是uniapp的演示。
2023-03-10 20:32:23
6009
1
原创 基于movable-view的微信小程序拖拽排序（含源码）
最近在做一个账本，里面有个功能需要“拖拽排序”，网上的代码我也看不太懂，打算自己写一个。微信小程序官方给了一个可移动的盒子movable-view ，基于这个我们来实现一个简单的拖拽排序功能。可以自定义一行展示多少个图标，下面演示一行五个的情况。由于这是我花三个小时写出来的，肯定存在很多不足，欢迎在评论区里不吝赐教！
2023-03-05 16:02:47
3860
8
原创 微信小程序计算器（含源码）、含js精确运算代码
最近在做一个记账本小程序，其中需要用到计算器，但是在网上找的代码，用起来不是不符合我的想法，就是看着非常难受，于是还是自己写了一个。js精确计算、微信小程序计算器、含有源码
2023-03-03 20:10:41
7763
15
原创 js 时间差转年月日时分秒
使用时间戳的差值来计算时间。下面的函数返回两组数据，第一组是转为的 日 - 时 - 分 - 秒 第二组是 转为的 年 - 月 - 日。使用时间戳的差值来计算时间。含含有源代码。含有源代码。含有源代码。含有源代码。
2023-02-08 15:45:36
612
原创 企业微信推送天气、课表、纪念日、每日一句等（含源码和详细步骤）
含源码，稍加配置即可直接使用，没学过编程也没关系。支持推送课表的节次周次位置等信息，纪念日、彩虹屁、天气。使用阿里云函数免费推送
2023-01-25 16:04:01
3089
26
原创 VSCode实用快捷键：复制粘贴内容不改变剪切板等
VSCode里面有很多快捷键，接下来我讲一些我认为最实用的，可以帮助萌新提高代码编写速度。
2023-01-13 17:53:40
11641
原创 超详细 企业微信推送（所有东西都可推送）
最近在研究推送每日课表，一开始是使用 微信公众号接口测试号 来推送的，但是现在公众号消息展示改了，不会显示在消息列表，而是隐藏在“订阅号消息”里面，不仔细看都看不到，很容易被忽略，如下图：所以就一直在找其他方法，想到了企业微信 - 可以显示在微信消息主页，且提醒很明显，如下图。下面讲两种方法进行推送。效果示例。
2023-01-03 16:58:03
21448
15
原创 微信小程序安卓真机下wx.previewImage黑屏
这个问题困扰我很久了，开发者工具和苹果手机正常，但是安卓机会黑屏。不管是http图片还是https图片，都经常遇到黑屏的问题。但是经过研究，我发现了如下规...
2023-01-02 12:35:31
912
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人