- 博客(702)
- 资源 (8)
- 收藏
- 关注
RSS订阅
原创 记录-VUE中常用的4种高级方法
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助1. provide/injectprovide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术，它可以将数据注入到一个组件中，然后让它的所有子孙组件都可以访问到这个数据。通常情况下，我们在父组件中使用 provide 来提供数据，然后在子孙组件中使用 inject 来注入这个数据。使用 provide/i...
2023-05-06 17:57:00
1078
原创 uni-app开发经验分享十四：小程序超过2M限制的方法——分包加载
起初小程序上线时，微信限制了代码包不能超过1MB，后来功能变大变成了2M了，限制大小是出于对小程序启动速度的考虑，希望用户在使用任何一款小程序时，都能获得一种“秒开”体验。但是，2MB也限制了小程序功能的扩展，小程序业务的发展可能需要更大的体积。为了解决这个问题，微信推出了—分包加载。小程序分包加载对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解...
2020-12-08 20:11:00
704
2
原创 uni-app开发经验分享一： 多页面传值的三种解决方法
开发了一年的uni-app，在这里总结一些uni-app开发中的问题，提供几个解决方法，分享给大家：问题描述：一个主页面，需要联通一到两个子页面，子页面传值到主页面，主页面更新问题难点：首先我们需要一个逻辑模型(这里随便画了一个)通过这个模型，我们可以看到一个问题，子页面的内容怎么传回主页面，怎么让这个传回的方式更安全有效，这也是这个问题的难点，我总结了三种解决方法，在这里分...
2020-09-17 11:54:00
452
原创 网页添加 Live2D 看板娘
参考并转载于https://www.fghrsh.net/post/123.html个人网站添加Live2D 看板娘的方法：在页面中加入以下代码(已经全部处理完，可以根据需求适当修改)：<!DOCTYPE html><html><head> <title>Live2D 看板娘 测试dome</title>...
2020-09-11 09:46:00
2036
原创 Vue 中的 deep、v-deep 和 ＞＞＞ 有什么区别？什么时候该用？
Vue样式穿透指南：解决UI库样式覆盖问题 在Vue中使用scoped样式时，UI库组件（如Element Plus）的样式可能无法直接修改。原因在于scoped会添加唯一属性，而子组件内部元素不继承这些属性。Vue提供了三种穿透方案： >>>（已废弃）：Vue3不再支持，预处理器不兼容。 ::v-deep（过渡方案）：Vue2/3通用，但Vue3推荐改用:deep()。 :deep()（推荐）：Vue3标准语法，兼容预处理器，如： .my-form :deep(.el-input__in
2026-02-03 11:12:45
30
原创 拆解一个由 setTimeout 引发的“页面假死”悬案
摘要： 文章分析了前端开发中滥用setTimeout导致的常见问题，通过一个筛选浮层交互案例，指出用延时猜测执行顺序的弊端： 时序混乱：硬编码延时无法适配实际滚动耗时，可能引发冲突 副作用泄漏：未清除的定时器在组件销毁后仍会执行，导致页面滚动锁定 提出两种解决方案： 基础方案：使用useRef严格管理定时器，确保组件卸载时清理 优化方案：用Promise封装滚动逻辑，实现事件驱动的顺序控制 核心警示：异步逻辑应依赖事件回调而非时间猜测，全局状态操作需注意生命周期管理。 （149字）
2026-02-02 09:58:43
529
原创 为什么有些人边框不用border属性
CSS边框的替代方案与优化技巧 本文分析了CSS border属性的6个常见问题及优化方案： border会改变元素尺寸，可用box-shadow替代 高DPI设备上border易模糊，推荐transform:scale(0.5) border圆角渲染不一致，建议使用outline/box-shadow 多层边框用box-shadow更简单 与背景裁剪配合时易出bug 状态切换时会导致布局跳动 总结指出outline和box-shadow在兼容性和灵活性上优于border，能解决相邻元素边框变宽等问题。文章
2026-02-01 13:36:47
273
原创 手把手教你实现前端邮件预览功能
邮件预览上传组件开发总结 该组件基于Vue3+VantUI实现.EML邮件文件上传与预览功能，核心特点包括： 支持.EML格式文件上传及校验 完整解析邮件内容（发件人/收件人/正文/附件） 实现内嵌图片的Base64转换与展示 提供弹窗预览和附件下载功能 关键技术点： 使用emailjs-mime-codec解码MIME格式邮件 处理特殊编码的邮件主题 将Uint8Array格式的附件转为Base64 响应式布局适配移动端 组件具有良好的扩展性，可应用于邮件管理系统、工单系统等场景。
2026-01-31 18:00:07
285
原创 那个写 width: 33.33% 的前端，终于被 flex: 1 拯救了
CSS布局进化：从文档流到Flex弹性布局 传统HTML文档流存在块级元素独占行、行内元素无法设宽高的局限。早期使用inline-block布局需手动计算百分比（如33.33%），且易受空白节点干扰。CSS3的Flexbox通过display: flex和flex: 1等属性，实现了剩余空间的智能分配，无需精确计算即可自动适配容器宽度。Flex布局简化了代码，提升了灵活性，标志着从“手动计算”到“声明式规则”的思维转变，成为现代前端开发的优选方案。 （字数：150）
2026-01-30 11:02:58
366
原创 用 10 行代码就能当 “服务器老板”+“网络小偷”+“文件管家”？Node.js：别不信！
Node.js后端开发三板斧：http、https与fs模块实战指南 本文通过生动比喻和代码实例，系统介绍了Node.js三大核心模块的实战应用。http模块仅需10行代码即可搭建Web服务器，快速响应浏览器请求；https模块实现数据抓取，演示了从掘金API获取热门文章的过程；fs模块则展示了文件读写能力，包括读取文本内容和创建新文件。这三个模块分别对应服务搭建、网络请求和文件管理三大后端基础能力，掌握它们就获得了Node.js开发的入门钥匙。文章采用"工具链"比喻和即时反馈的代码演示
2026-01-29 10:58:44
256
原创 甲方嫌弃，项目首页加载太慢
文章摘要： 本文介绍如何优化后台管理项目性能，解决加载卡顿问题。 CDN优化：通过Webpack Bundle Analyzer分析依赖，将Element UI等大体积库替换为CDN引入，减小打包体积。 Nginx Gzip压缩：配置Nginx开启Gzip压缩，减少传输体积。 Vue Gzip压缩：使用compression-webpack-plugin提前生成压缩文件。 路由懒加载：动态导入路由组件，减少首屏加载资源。 Prefetch策略调整：按需预加载资源，避免不必要的请求。 通过以上优化，显著提升项
2026-01-28 15:08:26
862
原创 JS 里的 “变量租房记”：闭包是咋把变量 “扣” 下来的？
摘要： 本文用“租房”比喻生动讲解JavaScript中的作用域、作用域链和闭包。作用域是变量的“房间”，分为全局作用域（共享）、函数作用域（私有）和块级作用域（let/const锁定）。作用域链是变量查找的“喊房东”规则，从内向外逐层搜索。闭包则是函数执行后仍保留内部变量的“储物箱”，即使外部函数销毁，内部函数仍能访问其变量。闭包虽能封装数据，但过度使用会导致内存泄漏。通过生活化比喻和代码示例，清晰揭示了JS变量管理的核心机制。
2026-01-27 10:51:43
655
原创 关于地图渲染加20w数据展示和地图动画怎么做
摘要： 本文分享了使用ECharts地图组件渲染12万+设备安装数据的性能优化方案。初始实现面临动画卡顿、内存增长等问题，通过分层策略（按缩放级别采用不同抽样率、精度和图标尺寸）和动态动画调度系统（帧率控制、批量处理、智能去重显示）实现优化。关键技术包括：根据缩放级别动态调整数据精度（2-4位小数）、抽样显示（10%-100%）、智能去重判断，最终在保证视觉效果的同时提升性能至60fps流畅动画。
2026-01-26 09:51:32
268
原创 微信朋友圈图片布局
本文介绍了朋友圈图片展示的多种布局方式及实现方法。根据图片数量不同，采用不同布局：单图按原尺寸显示，双图并行展示，四图两行两列，三图及以上采用一行三列。使用Naive UI的n-image-group组件实现，通过动态类名控制不同数量的图片布局样式。代码示例展示了如何根据图片数量切换CSS类，并提供了对应的网格布局样式设置。这种灵活布局方式可提升用户体验，适用于社交平台的图片展示场景。
2026-01-25 19:50:17
312
原创 async/await 到底要不要加 try catch？我来给你整明白！
摘要： 本文探讨了async/await异步编程中的错误处理方式，对比了三种常见写法： try-catch：错误捕获明确，流程中断，但代码略显冗长； .catch()链式调用：需手动检查返回值，流程继续执行； .catch()内reject：中断流程但可能引发控制台警告。 建议：优先使用try-catch，因其逻辑清晰、错误集中处理且符合同步代码直觉，虽增加代码行数，但提升了可读性和可维护性。对于统一封装请求的场景，可在基础库中集中处理错误。 （字数：150）
2026-01-24 10:47:24
272
原创 Uni-app 性能天坑：为什么 v-if 删不掉 DOM 节点
摘要： 微信小程序中，使用具名插槽时v-if无法真正销毁DOM节点，导致性能问题。原因是小程序预编译会静态生成所有插槽占位符，父组件已提前实例化内容。解决方案是改用作用域插槽： 子组件通过<slot :item="item">动态传递数据 父组件仅提供模板（不循环），渲染控制权交给子组件 本质区别在于：具名插槽是"预挖坑位"，作用域插槽是"按需建楼"。需避免父组件v-for填坑，确保真正的懒加载效果。
2026-01-23 20:57:44
660
原创 前端拖拽，看似简单，其实处处是坑
前端拖拽功能实现指南 拖拽功能看似简单，但实际开发中面临多设备兼容性、边界限制、iframe兼容、框架状态丢失等挑战。基本原理依赖鼠标/触摸事件，但需处理边界检测、事件穿透等问题。高级功能如网格对齐、边缘吸附需额外逻辑。推荐使用drag-kit库，提供跨平台支持、丰富功能（边界限制、持久化等）和框架兼容性，避免重复造轮子。核心建议：Demo可用原生实现，生产环境优先选择成熟库以提升效率和稳定性。
2026-01-22 10:05:58
886
原创 [特殊字符]ES6 这 8 个隐藏外挂，知道 3 个算我输！
摘要： 本文介绍了8个实用的ES6冷门API，能大幅简化代码逻辑： 数组拍平：flat()/flatMap()快速处理嵌套数组 对象转换：Object.entries()与fromEntries()实现对象过滤/排序 字符串补全：padStart()自动补零对齐格式 集合运算：Set快速去重+求交集/差集 嵌套解构：支持深层默认值，避免报错 私有属性：Symbol防止字段冲突 安全操作：Reflect统一对象方法调用 异步收尾：finally()确保loading关闭 这些原生API无需polyfill，可
2026-01-21 14:56:58
137
原创 用这 9 个 API，我把页面性能干到了 90+
现代浏览器高级API性能优化实战 本文分享了9个实测有效的浏览器API优化方案，涵盖资源加载、动画渲染、性能监控等场景： IntersectionObserver - 实现高效懒加载，减少首屏加载时间40% requestIdleCallback - 空闲时执行非关键任务（如埋点上报） requestAnimationFrame - 替代setTimeout实现流畅动画 ResizeObserver - 精准监听元素尺寸变化 performance.now() - 高精度性能测量工具 preload/pre
2026-01-20 16:40:04
741
原创 0.1加0.2为什么不等于0.3
JavaScript 浮点数精度问题解析与解决方案 在 JavaScript 中，0.1 + 0.2 不等于 0.3 是经典的浮点数精度问题。这是由于计算机使用二进制存储数字，而某些十进制小数（如0.1）在二进制中是无限循环的，存储时被截断导致精度丢失。解决方法包括： 容差比较：使用Math.abs(a - b) < Number.EPSILON 整数转换：先转整数计算再还原 四舍五入：使用toFixed()方法 专用库：如decimal.js处理高精度计算 面试时可解释为IEEE 754标准下二进制
2026-01-19 15:52:10
430
原创 用户 Token 到底该存哪？
摘要： 用户 token 存储方式有三种：localStorage、普通 Cookie 和 HttpOnly Cookie。localStorage 易受 XSS 攻击，普通 Cookie 同样存在 XSS 和 CSRF 风险。推荐使用 HttpOnly Cookie，它通过 httpOnly: true 防止 JavaScript 读取，结合 sameSite: lax 和 CSRF Token 防御 CSRF 攻击。迁移到 HttpOnly Cookie 需前后端配合修改登录、请求和登出逻辑。若暂时无法
2026-01-18 17:55:42
946
原创 这 10 个 Vue3 性能优化技巧很实用，但很多项目都没用上
Vue3性能优化10个实用技巧 本文分享10个提升Vue3应用性能的关键技巧： 使用shallowReactive减少深层响应式追踪 通过toRefs解构保持响应性 优先选择自动依赖分析的watchEffect 用<Suspense>处理异步组件加载状态 通过<Teleport>解决模态框层级问题 自定义指令封装高频操作（如复制） 用Pinia插件扩展全局store功能 v-memo优化大型列表渲染性能 虚拟滚动技术处理海量数据渲染 路由懒加载+图片优化策略 核心原则：避免不必要的响
2026-01-17 13:09:04
722
原创 前端 HTML 转 PDF
前端HTML转PDF工具函数摘要 该工具函数通过html2canvas和jspdf库实现网页指定区域（如表格、报表）的PDF导出功能。核心流程： 定位元素：通过ID获取目标DOM，并重置滚动条确保完整截取； 可选水印：支持添加文字水印（需取消注释代码）； HTML转Canvas：配置缩放比例（提升清晰度）、跨域支持及动态高度适配； PDF生成：自动分页处理A4尺寸，支持多页内容，最终触发下载（文件名可自定义）。 依赖安装： npm install html2canvas jspdf 使用示例：调用htmlT
2026-01-16 17:47:18
605
原创 面试官：说说看，用户登录后拿到的 Token，你应该怎么存？存哪里？
摘要： 本文探讨了前端存储用户登录Token的几种方案及其安全性考量。常见方法包括： Web Storage：简单但易受XSS攻击，不推荐敏感场景使用。 Cookie：通过HttpOnly和Secure属性提升安全性，但需防范CSRF攻击。 内存存储：安全性高但体验差，适合高安全需求场景。 最佳实践建议结合Access Token（内存存储）与Refresh Token（HttpOnly Cookie），实现安全与用户体验的平衡，并配套CSRF防护措施。每种方案需根据应用场景权衡安全性与便利性。
2026-01-14 09:47:45
846
原创 拒绝 rem 计算！Vue3 大屏适配，我是这样做的
摘要： 本文介绍了一个轻量级Vue 3大屏适配解决方案vfit，通过3分钟快速配置即可实现1920x1080设计稿的完美适配。该方案突破传统rem/vw换算的繁琐，支持直接使用设计稿px坐标定位，并提供了智能缩放的FitContainer组件，可自动处理不同屏幕尺寸下的元素位置与比例。文章分享了实际应用案例、避坑技巧（如必须引入样式文件、z-index层级控制等），特别强调了right定位的特殊逻辑优势。该方案显著提升了开发效率，让开发者更专注于数据可视化内容而非布局适配。
2026-01-13 10:11:01
929
原创 Vue开发三年，我才发现依赖注入的TypeScript正确打开方式
在Vue项目里，为了跨组件传递数据，你用provide和inject写了一套祖孙通信逻辑。代码跑起来没问题，但TypeScript编辑器总给你画红线，要么是“类型any警告”，要么就是“属性不存在”的错误提示。
2026-01-12 09:50:57
538
原创 彻底弄懂KeepAlive
开发过Vue应用的同学对KeepAlive功能应该都不陌生了，但是大家对它的理解是只停留在知道怎么用的阶段还是说清晰的知道它内部的实现细节呢，在项目中因KeepAlive导致的的Bug能第一时间分析出来原因并且找到解决方法呢。这篇文章的目的就是想结合Vue渲染的核心细节来重新认识一下KeepAlive这个功能。
2026-01-11 13:23:22
566
原创 Electron 的西天取经
我本身是做 Web 开发的，最近需要写个小工具，调用一些系统 API，就选择了比较成熟的 Electron。结果业务代码写了三小时，环境配置、镜像、文件引用、打包路径、体积过大、文件被锁定……各种问题却折腾了将近三天。写下这篇笔记，记录这一路的坎坷。
2026-01-10 16:49:16
941
原创 12个JS核心，搞懂这些直接起飞！
JavaScript核心概念精要 本文总结了12个2024年高频考点：1️⃣ 变量作用域：let/const的块级作用域解决var变量提升问题；2️⃣ 闭包机制：函数保留词法作用域访问权，需警惕内存泄漏；3️⃣ 原型继承：通过原型链实现对象继承，ES6类语法简化操作；4️⃣ 异步演进：从回调地狱→Promise链→async/await的优化路径；5️⃣ 事件循环：微任务优先于宏任务的执行顺序；6️⃣ ES6+特性：解构、可选链、空值合并等实用语法。掌握这些核心概念可显著提升代码质量与面试通过率。 （字数：
2026-01-09 19:11:55
239
原创 【Vue3】我用 Vue 封装了个 ECharts Hooks
📌 ECharts 封装 Hooks 实战 封装 useEchart Hooks 解决重复初始化、事件管理等问题，支持： ✅ 多类型容器（Ref/DOM/选择器） ✅ 自动销毁与响应式更新 ✅ 内置事件绑定/解绑 ✅ ResizeObserver 自适应 核心通过 initChart 初始化，watch 监听配置变化，ResizeObserver 替代传统 resize 事件，并暴露 update/onChartEvent 等 API。大幅简化 ECharts 使用流程，提升开发效率。 （摘要字数：150
2026-01-08 20:54:44
1096
原创 前端技巧：检测到省略号文本自动显示 Tooltip
文章摘要： 本文介绍了一个前端解决方案，用于检测文本内容是否被省略（单行或多行），并在需要时自动显示Tooltip提示完整内容。通过自定义Hook useEllipsis 监测元素的宽度/高度与内容实际尺寸的差异，动态判断是否添加Tooltip。组件 EllipsisTooltip 封装了该逻辑，支持Tailwind样式，仅在文本被截断时显示Tooltip。代码示例展示了如何通过限制宽度触发Tooltip，而未截断的文本则正常显示。该方案提升了长文本场景下的用户体验。 （字数：150字）
2026-01-07 10:27:43
340
原创 说一下 localhost 和127.0.0.1 的区别
摘要： 本文详细解析了localhost与127.0.0.1的核心区别：localhost是应用层的主机名，需通过DNS解析为IP（默认127.0.0.1或IPv6的::1），而127.0.0.1是网络层直接可用的IPv4回环地址。关键差异包括协议支持（localhost兼容IPv4/IPv6）、解析流程（localhost依赖hosts文件或DNS）、性能（127.0.0.1跳过解析略快）及服务监听配置（0.0.0.0允许外部访问）。实际开发中建议优先使用localhost以确保兼容性，仅在需强制IPv4
2026-01-06 12:25:13
960
原创 前端开发 8 个非常实用小技巧：高效解决日常开发痛点
本文分享了8个前端开发实用技巧，覆盖JavaScript、CSS和业务场景三大类： JS技巧：快速判断数组元素、对象默认值处理、变量交换； CSS优化：垂直居中方案、CSS渐变替代图片、iOS输入框问题修复； 业务场景：表单防抖提交、点击空白处关闭弹窗。每个技巧均提供可直接复用的代码示例，帮助开发者提升效率，优化代码质量。
2026-01-05 11:19:23
258
原创 在 Web 前端实现流式 TTS 播放
摘要： 本文介绍了前端实现流式TTS（文本转语音）播放的优化方案。初始方案使用AudioBufferSourceNode解码MP3片段，但存在卡顿、杂音和延迟问题。改进后采用MediaSource + SourceBuffer技术，通过流式拼接MP3数据块实现低延迟、无杂音的播放。文中提供了封装类StreamingTTSPlayer的核心代码，支持接收Base64 MP3数据并实时播放，适用于Web端语音合成场景，兼容主流浏览器。 关键词： 流式TTS、前端播放、MediaSource、低延迟、音频拼接
2026-01-01 19:27:32
323
原创 vue对接海康摄像头-H5player
H5视频监控系统开发摘要 本文介绍了基于Vue的H5视频监控系统核心功能实现：1）通过public目录引入JS资源；2）响应式视口布局，使用媒体查询适配不同屏幕；3) 树形监控点列表展示，通过海康API获取区域/摄像头数据并构建树结构；4) 视频流获取逻辑，支持主/子码流切换；5) 球机云台控制功能实现，包括方向指令发送。关键代码包含窗口resize监听、API请求封装及双次点击触发视频加载等交互设计，附件提供播放器性能说明文档。
2025-12-31 18:42:36
567
原创 图片标签用 img 还是 picture？很多人彻底弄混了！
摘要： 本文深入解析HTML中<img>和<picture>标签的核心区别与应用场景。<img>通过srcset和sizes实现高效响应式图片加载，适合大多数分辨率适配需求；而<picture>专注于艺术指导（不同设备显示不同裁剪）和现代格式降级（如AVIF/WebP兼容）。关键误区包括误以为<picture>更现代或必须用于响应式设计。最佳实践建议：优先使用简洁的<img>方案，仅在需要复杂条件组合时采用<picture>
2025-12-29 21:57:21
440
原创 总结 Next.js 中的 Server Actions
摘要： Next.js 的 Server Actions 允许直接在服务端执行异步数据库操作，无需创建 API 端点。与传统 API 相比，它简化代码结构、减少网络请求并提升安全性，但复用性和测试难度较高。适用于小型项目或简单数据交互，而传统 API 更适合复杂场景。示例展示了通过 Server Actions 增删改数据库数据，结合 revalidatePath 更新缓存。两者各有优劣，需根据项目需求选择。 （字数：150）
2025-12-27 21:54:35
783
原创 使用自定义API接入OpenAI CodeX配置教程
摘要：本教程介绍如何通过第三方API接入OpenAI Codex服务。首先安装Codex CLI（支持npm和Homebrew），然后配置config.toml文件指定API供应商和模型，并设置环境变量V_API_KEY为中转平台的API密钥。提供Windows/Mac/Linux的环境变量配置方法，最后演示CLI使用和VSCode插件配置。还包含非交互模式、模型上下文协议等高级用法，适合开发者提升编码效率。详细配置参考官方文档。
2025-12-26 20:33:50
1263
原创 VUE3大屏自适应布局
本文介绍了基于视口单位(vw/vh)的响应式布局方案，通过SCSS自定义函数实现设计稿尺寸到视口单位的自动转换。核心内容包括：1) 定义vw()和vh()函数进行像素转换；2) 配置Vite实现SCSS全局注入；3) 结合Flex布局、ECharts图表自适应和全屏切换功能；4) 注意事项如极端屏幕比例处理。该方案特别适合数据可视化大屏项目，能有效实现多分辨率自适应，同时提供了栅格系统、缩放控制等辅助功能。
2025-12-25 20:34:07
612
原创 uni-app 无法实现全局 Toast？这个方法做到了！
摘要： 本文介绍了在uni-app中实现全局Toast组件的完整解决方案，通过wd-toast组件、Layout插件和Pinia状态管理，解决了传统方案功能受限、无法跨组件调用等问题。核心方案包括：1）基于provide/inject的函数式调用；2）统一布局管理实现全局组件插入；3）状态管理确保Toast正确显示。支持多种提示类型，兼容支付宝小程序，适用于网络请求拦截等场景。 （字数：150）
2025-11-17 14:48:36
632
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人