- 博客(30)
- 收藏
- 关注
RSS订阅原创 ⚙️ Vue3 多任务轮询 Hook：优雅控制多接口定时刷新
摘要：本文介绍了一个Vue3 Hook——useMultiPolling，用于统一管理多个轮询任务。该Hook支持多任务独立启停、异步任务执行、自动清理定时器、动态扩展任务等功能。实现方案采用setTimeout+递归方式避免执行延迟，通过Map存储任务提高效率，并自动在组件卸载时清理。使用示例展示了如何配置和启动多个轮询任务，还提供了单独控制任务和动态添加任务的进阶用法。作者建议对耗时任务可结合防抖节流或WebWorker优化，也可与状态管理工具配合使用。该Hook能有效减少重复代码，提升多接口轮询场景的
2025-11-10 15:56:25
403
原创 [特殊字符] Vue3 + WebView 双端通信桥：用 TypeScript 构建高可维护的 JSBridge 与 JSSDK
优化点说明强类型映射通过保证调用与回调参数类型一致Promise 化接口异步调用结构更清晰，易用性更强iOS/Android 自动检测自动区分 WebView 环境初始化多订阅 + 一次性事件同时支持ononce监听安全防护调用前，防止未初始化调用单例模式保证全局唯一的通信实例，避免重复注册这套桥接方案结合了TypeScript 类型安全 + Promise 异步接口 + Vue3 生命周期管理能够在保持灵活性的同时，确保跨端通信的稳定与可维护性。
2025-11-07 11:26:06
593
原创 [特殊字符] TypeScript 版本 Beacon 信号滤波与室内定位引擎
本文介绍了一个基于iBeacon蓝牙信号的室内定位系统解决方案。针对RSSI信号波动大导致定位跳变的问题，提出了一套完整的信号处理流程：首先通过动态窗口平均和众数容差滤波对信号进行平滑处理，然后利用对数路径损耗模型计算距离，再采用Levenberg-Marquardt算法进行多边定位，最后通过速度限制滤波防止位置突变。系统采用TypeScript实现，提供了信号状态分级、异常过滤等功能，能够输出稳定的设备坐标(x,y)。该方案在WebView/Vue应用中具有实用价值，平衡了精度、鲁棒性和性能，为室内导航提
2025-11-07 11:25:54
1409
原创 [特殊字符] Vue3 项目最佳实践：组件命名、目录结构与类型规范指南
《Vue3+TypeScript企业级项目架构规范》从组件命名、变量定义到目录结构，提出一套标准化开发方案：1.采用PascalCase命名组件文件，区分页面级与通用组件；2.规范变量（camelCase）、常量（UPPER_SNAKE_CASE）及组合函数（use前缀）命名；3.独立存放枚举与类型定义；4.推荐模块化目录结构，分离配置、服务、组件等层级；5.强调API统一导出、组合式逻辑封装等优化建议。该规范通过一致性命名和清晰架构，显著提升大型项目可维护性，建议配合ESLint+Prettier确保落地
2025-11-06 11:31:37
476
原创 [特殊字符] Vue3 高性能循环滚动 Hook（支持平滑模式与逐项滚动模式）
本文介绍了一个纯Vue3+原生JS实现的高性能useScroll Hook，用于实现循环滚动效果。支持两种滚动模式（逐项滚动和平滑滚动）、水平和垂直方向，并采用多项优化措施：使用requestAnimationFrame驱动动画、DOM尺寸缓存、will-change提示优化、自动清理资源等，确保流畅性能和无缝循环。提供了完整的实现代码和使用示例，适用于新闻公告、排行榜等需要循环滚动的场景，具有轻量、高效、易用的特点。
2025-11-06 11:19:47
227
原创 热血前端勇闯自动化测试 Playwright + TypeScript 如何debug以及如何使用Cookie
问：前端做好好的为什么要来卷测试呢？答：因为所有主线流程测试可能不会完全兼顾得到，所以为了能更（yu）好（kuai）的工（mo）作（yu），所以内心就产生了一个邪恶的想法😈假如我提测前把所有的主流程跑一边呢？so 请看下文（默认已经安装和了解Playwright了）提示：以下是本篇文章正文内容，系好安全带 准备发车！
2023-12-22 10:50:36
1718
原创 热血前端勇闯自动化测试 Playwright + TypeScript入门安装运行
问：前端做好好的为什么要来卷测试呢？答：因为所有主线流程测试可能不会完全兼顾得到，所以为了能更（yu）好（kuai）的工（mo）作（yu），所以内心就产生了一个邪恶的想法😈假如我提测前把所有的主流程跑一边呢？so 请看下文提示：以下是本篇文章正文内容，系好安全带 准备发车！
2023-12-21 16:49:40
2201
原创 前端判断void0是什么鬼？
今天读element plus 的源码的时候发现判断input.value的条件为 void == 0 其实就是undefined。因为underfined不是关键字，它是window的一个只读属性，你设置成underfined还要去window取。
2023-11-02 21:12:58
331
1
原创 前端项目开发杂记
setup 语法糖 无法使用 beforeRouteEnter see：https://forum.vuejs.org/t/vue3-2-beforerouteenter/124311， https://github.com/vuejs/rfcs/discussions/302#discussioncomment-1629410。背景：有个项目使用到了 webSocket 所以有个socket 列表需要等到上一个socket结束后发起下一个 所以用Promise 封装了一下socket请求。
2023-07-22 10:48:29
156
原创 vue props +computed 子组件改变emit通知父组件 useVModel 简化版
vue props +computed 子组件改变emit通知父组件 useVModel 简化版
2023-07-11 17:48:58
702
1
原创 vue3 hooks 上拉加载 下拉刷新 vant-list 拆分
项目中使用了大量的 vant ui 中的 上拉加载 下拉刷新，每次都要重新定义变量不利于项目开发故此拆分 hooks 便于后续开发，该hooks 中包含了上拉加载方法 下拉刷新方法 及数据请求相关变量。
2022-09-15 20:45:26
1609
原创 react 防抖节流函数
// 防抖函数export function deBounce(func, wait) { let timeOut = null return function (...args) { clearTimeout(timeOut) // 一定要清除定时器 timeOut = setTimeout(() => { func(...args) }, wait) }}// 节流函数 method：方法 delay：对应多少秒触发最后一次 duration
2021-11-19 14:39:23
1314
原创 react 从剪切板里粘贴图片并使用WEditor富文本展示
具体实现思路： 使用原生粘贴方法获取到粘贴版的内容然后调用富文本根据光标插入内容的方法使用到的知识点以及api：1、调用wangeditor富文本根据光标插入内容的api：this.editorExample.current.editor.cmd.do(‘insertHTML’, <img src=${res.imageUrl} />)相关链接2、event.clipboardData || event.originalEvent.clipboardData相关链接 阮大大 yyd
2021-11-08 19:10:13
1294
原创 react create-react-app 使用@引入模块简化 简化相对路径写法
1、查看项目中是否含有config文件夹2、如果项目中没有config文件夹，则执行 npm run eject命令输入 y 然后回车就可以看到config文件夹了3、打开 config 下的 webpack.config.js文件找到resolve中的alias增加别名符号和对应的路径地址5、重启项目...
2021-11-08 17:50:41
1240
原创 vue 3 深入符 警告 不生效 ＞＞＞ and /deep/ combinators have been deprecated. Use :deep() instead.
vue3 深入符 警告 不生效
2021-08-26 11:23:54
3431
原创 使用css3中的var()实现改变scss的变量值
简单使用js控制scss(react同理)文章目录简单使用js控制scss(react同理)前言前言相信大家在开发的过程中肯定也遇见不少根据逻辑来控制页面样式问题的需求，又比如我页面很多相同的样式值要修改那么又懒得去找js部分的类名 那这时候就需要根据js设置css了，故此写下笔记以防忘记。提示：以下是本篇文章正文内容，下面案例可供参考简单来说 setProperty方法接受三个值 第一个是你要修改的属性 (必填) 第二个值是你要替换或者更改的新值 (选填) 第三个值是权重值 (选填
2021-08-23 15:28:45
5187
原创 QRCode react 二维码复制功能以及图片复制功能
文章目录前言一、QRCode react 二维码复制功能二、图片复制功能总结前言提示：以下是本篇文章正文内容，下面案例可供参考一、QRCode react 二维码复制功能代码如下（示例）： <QRCode id={`${"qrCode" + index}`} value={record.qrcodeLink} //value参数为生成二维码的链接 size={90} //二维码的宽高尺寸 fgColor="#000000" //二维码的颜色 />
2021-08-20 17:38:43
2886
原创 原生js调起摄像头
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生调
2021-06-01 18:25:23
1272
2
原创 vue 首屏优化，拆分包以及压缩代码
下载 compression-webpack-plugin压缩插件const CompressionPlugin = require(‘compression-webpack-plugin’) // 如果版本过高不支持压缩 当前版本6.1.1const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’)vue.config.jsmodule.exports = { configureWebpack: (config) => { // 生
2021-03-30 16:07:38
2087
原创 vue slot作用域插槽 slotProps 传值
子组件<template> <td v-for="column in columns" :key="`${column.key}_${index}`"> <slot v-if="column.slot" :name="column.key" v-bind:record="item" :index="index" ></slot> </td></template>
2021-03-25 11:31:47
4875
3
原创 vue-waterfall2 实现瀑布流 出现上拉加载的bug 以及时而出现一列的问题
vue-waterfall2 实现瀑布流，及总结的问题最近项目要用到一个瀑布流可以无限上拉刷新的列表，偶然看到网上有一个开源的瀑布流插件叫做vue-waterfall2，便做了一个代码的搬运工。汗，前端技术小白伤不起。遇到了一个无法触发下拉刷新的bug，原因是因为在app.js里写入了公共样式height:100%;的样式冲突无法获取到页面导航条的高度所导致的，看到网上也没有解决的办法，各种扒资...
2020-04-25 23:31:46
4940
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人