- 博客(608)
- 资源 (8)
- 收藏
- 关注
RSS订阅原创 【前端】TS：简单使用TS遍历对象的所有键值对
在TypeScript中遍历对象键值对时，需要明确声明键的类型。示例展示了如何遍历对象obj的所有属性：使用Object.keys()获取键数组后，通过key as keyof typeof obj类型断言确保类型安全，从而正确访问对象属性值。这种方法解决了TS静态类型检查导致的类型不匹配问题，使代码既能通过编译又能正确运行。
2025-12-23 16:15:22
50
原创 【前端】sort：js按照固定顺序排序
本文展示了如何对语言数组进行自定义排序，使指定语言优先显示。通过使用sort()方法配合自定义比较函数，实现了让['es','pt','de','fr']四种语言优先排序的功能。代码中先判断元素是否在优先列表中，再根据索引值确定排序顺序，非优先语言则保持原顺序。这种排序方法适用于需要特定元素置顶的场景，且保持其他元素的相对位置不变。
2025-12-23 16:03:03
63
原创 【前端】Defer：存储Promise状态，多个异步事件都结束后处理一些逻辑
本文介绍了一个TypeScript的Defer类实现，用于管理多个异步事件的协同处理。该类的核心是通过Promise封装resolve和reject方法，使外部可以手动控制Promise的完成状态。典型应用场景是等待多个异步事件（如弹窗关闭和其他异步操作）全部完成后执行特定逻辑，通过Promise.all实现多事件同步等待。这种模式为不确定发生时间的异步事件提供了灵活的控制机制。
2025-12-23 15:57:27
100
原创 【前端】解决：点击一个button，发现不触发点击事件
摘要：在使用Svelte开发活动页时，发现视频容器按钮的点击事件失效。通过在CSS中添加z-index:0和position:relative样式解决了该问题。推测是视频内部元素覆盖了可点击区域，通过定位提升容器层级后恢复正常点击功能。该方案适用于类似视频覆盖导致点击失效的场景。
2025-12-23 15:49:17
55
原创 【前端】css隐藏video控件，仅显示视频
这段代码展示了如何完全隐藏HTML5视频元素的默认控制控件。通过CSS伪元素选择器，逐一隐藏了全屏按钮、播放按钮、进度条、时间显示、音量控制等所有默认控件。同时在HTML中设置controls={false}来确保默认控件不显示。这种方法适用于需要自定义视频播放器界面或实现无控件播放的场景，特别是在Svelte框架中使用时。代码还设置了playsinline属性，确保视频在移动设备上内联播放而非全屏。
2025-12-23 15:41:42
57
原创 【IOS webview】h5页面播放视频时，IOS系统显示设置的icon
这段HTML代码用于设置网站的图标(favicon)和苹果设备触摸图标。<link rel="icon">定义了浏览器标签页和收藏夹显示的标准网站图标，而<link rel="apple-touch-icon">则为苹果设备(如iPhone/iPad)提供了主屏幕快捷方式图标。两者通过href属性指定图标文件路径，确保网站在不同平台都能显示合适的图标。
2025-12-22 17:25:11
80
原创 【前端】iView表单校验失效：Input已填入时，报错为未填入
摘要 本文记录了iView框架中Form表单验证失效的问题，表现为已填写字段仍提示未填入错误。问题出现在FormItem组件中，虽然prop和v-model绑定正常，但验证状态无法更新。通过排查发现，是由于表单字段androidProductId未初始化导致的验证失效。解决方法是在表单初始化时补上相关字段的默认值即可。该问题与数值类型无关，不同于常见的select组件验证问题。
2025-12-08 16:15:52
192
原创 【前端】Flex布局实现瀑布流：随机生成数据、无限滚动、异步请求更多
本文介绍了使用Flex布局实现瀑布流效果的原理和实现方法。核心思路是维护三列数组及其当前高度，每次将新数据插入最短列中。通过计算各列高度总和，动态确定最短列位置。文章详细展示了数据生成、布局计算和渲染的代码实现，包括随机高度生成、最短列判断逻辑等。此外，还介绍了无限滚动和异步加载的实现方案，通过在列底部添加监听元素来判断是否触发加载更多数据。整体实现简洁高效，适用于需要动态加载内容的瀑布流场景。
2025-12-03 16:03:49
824
原创 【前端】SVGA报错：[SVGA Parser Error] this parser only support version@2 of SVGA.
摘要：在使用svga库解析SVGA文件时遇到版本不兼容报错，提示仅支持版本2。通过查看源码发现，该库通过检查文件头4个字节是否为特定值(80,75,3,4)来判断版本，不符合则为版本2。当前遇到的SVGA文件被识别为版本1导致报错。由于是官方库限制，建议更换SVGA文件链接而非修改代码解决。
2025-11-27 14:53:36
389
原创 【前端】原生实现倒计时
倒计时功能实现示例。本文介绍了使用Svelte框架实现活动页面倒计时功能的方法。通过setInterval定时器每秒更新倒计时显示，核心逻辑包含： 计算目标时间与当前时间的差值 将剩余时间转换为分钟和秒数 使用padStart方法格式化显示为两位数 当剩余时间≤0时清除定时器并处理结束逻辑 代码结构清晰，包含倒计时实例化、时间计算和格式化显示等完整流程，可直接应用于各类活动页面的倒计时需求。
2025-11-26 11:21:51
302
原创 【前端】IntersectionObserver实现无限滚动：高性能判断页面是否到底
摘要：本文介绍了使用IntersectionObserver API实现页面无限滚动的优化方案，相比传统滚动事件监听能显著提升性能。核心思路是通过观察最后一个元素是否完全进入视口来判断是否加载新数据。文章提供了关键代码实现，包括创建观察者、更新被观察对象以及模拟异步数据请求的逻辑，并展示了实际效果。该方法适用于瀑布流等需要动态加载内容的场景，通过API原生支持实现了高效的元素可见性检测。
2025-11-21 10:43:46
347
原创 【前端】Grid布局实现瀑布流：随机生成数据、动态计算每项高度、无限滚动、异步请求更多
本文介绍了使用CSS Grid布局实现瀑布流效果的方法。普通版通过设置grid-auto-rows:10px和动态计算gridRowEnd实现基础瀑布流布局。进阶版则通过随机生成颜色和高度数据，并实现无限滚动加载功能，模拟异步请求场景。核心思路是利用Grid布局的特性，动态计算每个项目在网格中的跨度，从而实现参差不齐的瀑布流排列效果。文中提供了完整的代码示例和实现原理说明。
2025-11-21 10:24:12
1077
原创 【前端】resetFields()失效：点击编辑后再点击新增，弹出的表单是编辑的数据
摘要： 表单回显数据后清空失效问题，是因为在表单打开前赋值导致被视为默认值。解决方法是在表单打开后使用nextTick异步操作：编辑时延迟赋值，新增时延迟调用resetFields()。核心要点是确保表单操作在DOM更新后执行，避免初始值被覆盖。编辑模式使用nextTick(() => { ...data })，新增模式使用nextTick(() => resetFields())。
2025-11-12 11:26:18
214
原创 【前端】渲染大量数据的方法-虚拟列表：监听滚动高度，渲染可视区域（固定每项高度）
本文介绍了虚拟列表的实现原理及代码实现。虚拟列表通过只渲染可视区域内的数据来优化性能，避免一次性加载大量数据。关键点包括：计算虚拟区总高度、确定可视区域显示项数、监听滚动事件动态计算显示范围、使用偏移量实现滚动效果。文章提供了Vue组件代码示例，包含虚拟区高度计算、可视数据切片、滚动事件处理等核心功能，有效解决了大数据量场景下的渲染性能问题。
2025-11-06 15:19:37
941
原创 【前端】动态插入并渲染大量数据的方法-时间分片：使用requestAnimationFrame+DocumentFragment
本文介绍使用时间分片技术高效渲染大量数据的方法。通过requestAnimationFrame控制渲染时机，结合DocumentFragment虚拟节点减少DOM操作，实现分批加载数据。代码示例展示了如何在Vue中分页渲染10,000条数据，每批处理20条，利用递归完成全部数据的渐进式渲染，优化页面性能表现。
2025-11-05 15:05:33
433
原创 【前端】SVGA：创建、播放、设置大小、销毁
假如有需求：监听数据A，若A更新，则渲染A对应链接的SVGA。（A是SVGA图片链接），否则多个SVGA会重叠在一个id的canvas上。里调用创建SVGA的方法：确保一定有对应的DOM节点。在创建SVGA之前，需要把旧的SVGA。需要使用SVGA动图。
2025-10-23 11:38:07
368
原创 【css】overflow-x:visible失效：溢出时，想让横轴滚动，竖轴显示
摘要 文章探讨了CSS中overflow-x: auto;与overflow-y: visible;同时使用时，竖直方向内容被隐藏的问题。原因是当其中一个方向设为非visible值时，另一个方向的visible会被隐式计算为auto。解决方法是通过添加负margin和正padding来撑开容器高度，确保内容可见。该问题在MDN文档中有明确说明。
2025-10-22 16:06:04
356
原创 【随记】四十年的程序员：你越出色，就越不像其他人
如果你只做网页服务器的工作，而从不接触移动端或应用代码，你永远学不会为什么“在我的机器上可以运行”是这么糟糕。但如果你要工作到四十岁，你需要了解很多其他技术，这些技术会通过你的软件在边缘产生影响。如果你立志要赚比尔·盖茨级别的软件开发钱，结果却写出了 Haskell（复杂、深刻、备受赞誉，但不太赚钱），那将是一个巨大的失败，反之亦然。如果你做了一段时间的工作，你就可以说你做了一段时间的工作。但我认为你可能想当二十年的程序员，或者四十年的，或者更长时间的。十年后，你会翻阅它，说“哇，我做了些酷的事情？
2025-10-20 10:20:57
637
原创 【西瓜播放器+Vue】前端实现网页短视频：上下滑动、自动播放、显示视频信息等
本文介绍了如何实现类似抖音的上下滑动视频播放效果，主要使用Vant的Swipe组件和西瓜播放器。关键点包括： 使用Vant Swipe组件实现垂直滑动，配置循环播放和隐藏指示器； 集成西瓜播放器，通过组件化封装播放器功能； 处理事件通信，将播放结束等事件回调通过props传入组件； 配置播放器参数如自动播放、禁止双击全屏等； 解决PC端触摸事件兼容性问题，引入触摸模拟器。 通过这种组合方式，可以构建出类似抖音的上下滑动视频播放体验。
2025-10-16 17:38:57
833
原创 【vue】NoticeBar：滚动通知栏组件手动实现（内容、速度、循环间隔可配置）
这篇文章介绍了如何手动实现一个循环滚动的通知栏组件。作者通过分析滚动逻辑，使用requestAnimationFrame实现平滑滚动效果，并支持配置内容、滚动速度和循环间隔时间。文章详细讲解了滚动位置计算、循环逻辑处理等技术要点，并提供了完整的Vue组件代码示例。相比之前直接使用CSS动画的解决方案，这种动态计算宽度和位置的方法更加灵活可靠，避免了在iOS WebView中首次加载异常的问题。该实现方案不仅提升了通知栏的兼容性，也为类似需求提供了可复用的技术思路。
2025-10-14 17:17:00
488
原创 【vue+exceljs+file-saver】纯前端：下载excel和上传解析excel
文章摘要：本文介绍了基于exceljs和file-saver库实现前端Excel下载和上传解析功能。下载功能通过封装exportExcel方法实现模板导出，支持设置表头和数据内容。上传功能通过隐藏input控件实现文件选择，使用excelToList方法将Excel文件解析为二维数组。这两种功能可满足管理系统常见的Excel导入导出需求，代码示例完整，包含依赖说明和效果展示图。
2025-09-17 13:59:39
465
1
原创 【IOS webview】css动画，首次进入异常（滚动很缓慢），息屏后重新进入才正常
跑马灯实现中的IOS兼容性问题 本文记录了实现公告跑马灯时遇到的IOS兼容性问题及解决方案。主要问题包括：1) IOS首次加载时跑马灯不动，需设置min-width解决；2) 数据量大时IOS首次加载速度异常，需设置精确宽度。原因在于IOS对动态内容宽度计算的特殊性，未正确重新渲染导致。解决方案本质上是"硬编码"宽度值，虽不完美但能快速解决问题。作者建议未来优先使用成熟组件库，避免重复造轮子。这些经验对处理类似动画效果的兼容性问题具有参考价值。
2025-08-15 10:23:14
323
原创 【前端】九宫格抽奖效果，每次从当前位置开始
本文介绍了一个基于Vue3的九宫格抽奖H5页面实现方案。核心逻辑包括：1）定义顺时针旋转顺序[0,1,2,5,8,7,6,3]；2）通过32+目标位置步数计算总步数；3）实现从当前位置开始旋转的逻辑；4）采用先加速后减速的效果。代码提供了完整的奖品数据管理和旋转动画实现，其中关键点在于处理不同起点时的步数计算和速度控制。该方案可直接应用于H5抽奖活动页面开发。
2025-08-04 18:01:04
1172
2
原创 【前端】jszip+file-saver：多个视频url下载到zip、页面预加载视频、预览视频、强制刷新视频
本文介绍了前端如何实现多选视频下载为ZIP文件的功能。核心步骤包括：1）使用fetch获取视频Blob数据；2）通过JSZip库创建压缩包并添加文件；3）用file-saver触发下载。文章还提供了视频预览的实现方法（URL.createObjectURL）和强制视频重载的技巧。特别提醒：处理多文件下载时需用for循环替代forEach，以确保异步操作顺序执行。该方案已通过实测验证，适用于需要批量下载视频资源的场景。
2025-07-21 17:12:04
480
原创 【iframe + postMessage】postMessage实现iframe间跨域通信
本文介绍了使用postMessage实现iframe跨域通信的解决方案。项目B通过iframe嵌入项目A，当B需要跳转新页面时，通过window.parent.postMessage向A发送消息，包含目标URL、tab标识等数据。项目A监听message事件，验证消息来源域后，根据B传递的数据触发对应的导航栏切换操作。该方法实现了父子页面间的安全跨域通信，代码示例展示了消息发送、接收和验证的具体实现过程。
2025-07-21 16:28:16
475
原创 【IOS webview】IOS13不支持svelte 样式嵌套
为了适配低版本IOS，不要把样式写在svelte中。而是写在scss文件中。——可以理解为，把样式写在全局。发现页面在IOS 13 的webview上样式错位了。显然css没有被正确的加载。或是，坚持不写嵌套样式，但是这样会让代码更加繁琐。嵌套部分的样式就是错位的。技术栈：svelte。
2025-07-18 10:00:47
280
原创 【vue】使用本地代理解决Refused to set unsafe header：设置header时报错
但是这样做不好，最好是能从自己的服务端直接拿到想要的数据，而不是伪装一下去请求别的服务。最终这个地方改成请求自己的服务了（无需设置Referer）里设置某个值，否则会报错（业务需求）。调用一个接口，需要在header的。这样的话本地开发环境就能调通。
2025-06-30 16:03:50
660
原创 【css】设置了margin-top为负数，div被img覆盖的解决方法
HTML元素默认层叠顺序由DOM顺序决定，后出现的元素覆盖先出现的元素。但图片因加载延迟可能覆盖后续元素，这是由于未加载时布局已完成，图片加载后覆盖在已布局元素上。解决方法是为被覆盖元素设置position:relative（隐式z-index:auto）。
2025-06-19 15:06:17
426
原创 【navigator.clipboard】复制链接弹出详情信息（模拟电商app）、页面中粘贴图片、复制文本自动添加版权信息
本文介绍了利用navigator.clipboard API实现三种常见的剪切板交互功能：1）复制商品链接后自动弹出详情页面，通过监听visibilitychange事件检测页面切换并读取剪切板内容；2）在网页中粘贴图片并显示，处理图片Blob对象并生成URL；3）复制文本时自动追加版权信息。代码示例展示了关键实现逻辑，包括安全上下文检查、异步处理和内存管理（URL.revokeObjectURL）。这些功能模拟了电商平台和博客系统的典型交互场景，为前端开发提供了实用参考。
2025-06-11 16:33:29
963
原创 【Element Plus】Menu组件：url访问页面时高亮对应菜单栏
摘要：解决Element Plus菜单栏在URL直接访问时不自动高亮的问题。通过设置Menu组件的default-active属性为当前路径，在页面加载时获取location.pathname并赋值，实现URL访问时自动高亮对应菜单项。关键代码包括在el-menu绑定:default-active="activePath"，以及使用onMounted钩子获取当前路径进行初始化。
2025-06-10 11:23:38
499
原创 【vue+ts】找不到模块“./App.vue”或其相应的类型声明
当TypeScript项目导入.vue文件时出现"找不到模块"报错，这是因为TS默认无法识别.vue文件类型。解决方法有两种：1.在env.d.ts中添加类型声明，通过declare module定义.vue文件类型；2.安装Vue官方插件(Vue - Official)来支持Vue文件类型识别。第一种方案需要手动配置模块声明，引用vite/client类型并定义Vue组件类型，确保TypeScript能正确解析.vue文件。参考文档提供了更详细的解决方案和背景说明。
2025-06-03 10:35:10
826
原创 【webview】h5倒计时不准问题解决
h5黑屏后，JavaScript的计时器在页面不可见的暂停了，这是浏览器的优化机制，为了节省资源，暂停了页面的脚本执行。时，重新计算当前时间到目标时间的倒计时。每次重新计算可以保证倒计时准确。但让倒计时一直减少未必准确。h5页面有一个倒计时，黑屏后一段时间再打开发现倒计时不准，明显落后。记录目标时间的时间戳。
2025-05-26 09:51:31
238
原创 【IOS webview】源代码映射错误，页面卡住不动
webpack配置不要GENERATE_SOURCEMAP。其他IOS也会报错，但不影响页面显示。
2025-04-02 15:37:57
391
原创 【webview Android】视频获取首帧为封面
把图存起来，盖在video上，记录video是否被点击。点击过的视频不会显示首帧封面了，因此点击过就隐藏图片等。在拿到首帧图前，可以让上传控件状态与上传时一致（即。让用户以为还在上传视频，实际上在解析封面。客户端中h5上传视频，视频封面默认首帧。
2025-02-14 15:58:24
768
原创 【webview IOS】Unexpected token ‘=‘. Expected an opening ‘(‘ before a method‘s parameter list .
把代码编译为ES5，兼容性更好。这里使用webpack-Babel。一打开h5就报错，且高版本不会报错。得知此功能在IOS15以下不支持。IOS 15 以下的版本。
2025-01-09 16:26:17
707
原创 【前端】跨域问题与缓存
顾名思义是由于浏览器的缓存机制导致的一种跨域情况。这种跨域一般会出现在浏览器通过一些无视跨域的标签和css(如img、background-image)缓存了一些图片资源之后，当再次发起图片请求时（比如转base64等操作），就不会向服务器端请求数据，而是直接请求缓存数据，从而引起了跨域。这个时候即使服务端设置了。省流：浏览器请求的是服务器的缓存数据，会导致跨域的发生。解决方法：禁用缓存强刷/无痕浏览。
2024-11-28 15:57:37
920
原创 【Vue.js设计与实现】第三篇第11章：渲染器-快速 Diff 算法-阅读笔记
快速 Diff 算法在实测中性能最优。它借鉴了文本 Diff 中的预处理思路，先处理新旧两组子节点中相同的前置节点和相同的后置节点。当前置节点和后置节点全部处理完毕后，如果无法简单地通过挂载新节点或者卸载已经不存在的节点来完成更新，则需要根据节点的索引关系，构造出一个最长递增子序列。最长递增子序列所指向的节点即为不需要移动的节点。
2024-10-18 15:47:21
909
【知识图谱研究综述】知识表示.xmind
2021-04-20
【知识图谱研究综述】知识图谱构建技术.xmind
2021-04-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人