- 博客(157)
- 收藏
- 关注
RSS订阅原创 [特殊字符]99%人只知WebP小，第3个特性却翻车？[特殊字符]
A4: AVIF 更小（50%+），但兼容性更差（Safari 16+），目前建议 WebP 为主，AVIF 试验性用。，支持有损/无损压缩、透明通道（alpha）、动画，目标是“比 JPG 小 30%，比 PNG 小 80%”。A11: 每次 then 返回新 Promise，并解析回调返回值（需判断是否为 Promise）🔗。A9: 让异步流程可 await，避免回调地狱，错误能被 try/catch 捕获 ❗。A13: 执行器可能抛错，需转为 reject，符合 Promise A+ 规范 📜。
2025-08-08 14:50:25
882
原创 让 Vue 动起来！用 Motion for Vue 打造丝滑交互的实战指南
从知乎、CSDN 到 cnblogs，越来越多开发者称它为“尤雨溪官方认证的动效方案”，不是没有道理的。，专为 Vue 3 设计，轻量（<3KB）、声明式、手势驱动，完美契合现代前端开发节奏。你负责维护一个大型 ERP 系统，登录页用了传统的 CSS 动画 + 手动。：所有动画状态都通过数据绑定控制，完全响应式。下次当你面对“这个页面太死板”的反馈时，别再写一堆。：动画成为 UI 的一部分，而不是“附加逻辑”。控制元素显隐，Motion 会自动触发。，也许几行代码，就能让整个产品“活”起来。
2025-08-08 14:49:40
523
原创 【办公自动化】使用Python来自动化处理Excel表格有哪些方法？
在日常办公中，Excel是最常用的数据处理工具之一。通过Python自动化Excel操作，可以大幅提高工作效率，减少重复劳动，降低人为错误。本文将介绍几种常用的Python操作Excel的方法，并提供实用的代码示例和应用场景。
2025-08-08 14:49:12
210
原创 let obj = { foo: 1 }； 为什么Reflect.get(obj, ‘foo‘, { foo: 2 })； // 输出 1?
对于普通属性，receiver不会影响属性查找结果对于 getter 函数，receiver决定了函数中this的值在代理和继承场景中，正确使用receiver可以保持this绑定的正确性理解的receiver参数有助于我们更好地使用 JavaScript 的反射 API 和代理功能，写出更健壮的代码。
2025-08-08 14:47:41
174
原创 拖拽交互：用HTML5实现的拖拽魔法
你有没有想过，网页上那些“拖拽上传文件”“拖动图片换位置”的功能是怎么实现的？其实，这背后藏着HTML5的一项超实用技能——拖拽（Drag and Drop）。拖拽交互就像一场“搬家游戏”：用户长按一个元素，然后移动到目标位置松开，元素就“搬家”到新地方了。这种操作简单直观，尤其适合移动端和桌面端的用户体验。今天，我们将从基础概念出发，逐步拆解HTML5拖拽功能的实现逻辑，让你轻松掌握这项技能！
2025-08-08 14:46:15
822
原创 [特殊字符] 用 Vue2 + PDF.js 手撸一个「PDF 连续预览器」，自适应屏幕、支持缩放，直接拿来用！
最近做项目，产品丢过来一个需求：“我们要一个像掘金文章那样的 PDF 连续预览功能，要自适应屏幕，还要支持放大缩小！我心想，这需求简单啊，直接搜一波现成的库，结果一看，要么太重，要么不支持连续预览，要么缩放体验差，要么样式丑。于是，干脆自己撸一个！用，花了一个下午，效果还不错，直接分享给大家，代码已经整理好了，复制粘贴就能用！一个简单的 PDF 连续预览器就完成了，代码不到 300 行，功能却很实用。如果你有更好的想法或者遇到问题，欢迎在评论区留言交流！
2025-08-08 14:45:25
153
原创 崩溃了 唯一的好看的点还被产品移除了
shadowColor: 'rgba(142, 236, 233, 1)', shadowOffsetY: 15, 就这两个实现的 类似于box-shadow 两种思路 第一让其阴影往上走了一点 阴影的颜色与本身最上层的颜色相同 第二让其阴影往下走了一点 阴影的颜色与本身最下层的颜色相同 这样就弥补了圆角连接处产生的间隙 但是当其某一数据的值极小 连圆角都显示不全的时候就出问题。连圆角都显示不全 值太小了 于是产品直接说按echarts官网的那种堆叠图做。好吧直接崩溃了 白去调研这么久了。
2025-08-08 14:44:50
158
原创 [特殊字符]披萨还没到你就吃了？”JavaScript异步编程入门全解[特殊字符]
JavaScript 是一门以单线程为核心的语言，这意味着它一次只能做一件事。异步编程。我们每天都在写异步代码，比如发起网络请求、操作 DOM、处理用户交互、甚至只是一个简单的setTimeout。什么是同步、什么是异步？回调函数为什么容易“嵌套地狱”？Promise 为什么被称为“异步编程的救星”？async/await 又是怎么做到让异步代码像同步代码一样优雅？很多人初学 JavaScript 时，都会从最简单的同步代码入手。
2025-08-08 14:44:13
686
原创 深入理解跨域：同源策略、问题本质与解决方案（下）
跨域问题是前端开发中一个常见且重要的挑战。其根源在于浏览器为了安全而实施的同源策略。理解同源策略的本质和限制，是解决跨域问题的第一步。本文详细介绍了多种跨域解决方案，包括JSONP、CORS、代理（Webpack Dev Server代理、Nginx反向代理）、WebSocket和PostMessage。每种方案都有其独特的原理、优缺点和适用场景。推荐首选CORS：如果后端支持，CORS是现代Web应用中最推荐的方案，因为它符合标准、安全且易于使用。开发环境使用代理。
2025-08-08 14:43:28
518
原创 vue2项目升级webpack5
升级完webpack5以后，对应的项目开发环境运行速度和编译速度都有质的提升，我们的项目测试下来，编译打包从之前的30多分钟到现在的6分钟，开发运行从之前的20多分钟到现在的2到3分钟，可以说升级webpack5后确实让我们快了很多。
2025-08-08 14:42:54
378
原创 用 “餐厅模型” 吃透事件循环：同步、宏任务、微任务谁先执行？
好了，各位未来的前端大神们，今天我们一起深入探讨了JavaScript事件循环的奥秘。JavaScript是单线程的，但它通过事件循环实现了非阻塞。就像餐厅的主厨，一个人也能把所有事情安排得井井有条。事件循环是JavaScript实现异步的关键机制。它协调着同步任务、宏任务和微任务的执行顺序。微任务拥有更高的优先级。在每个事件循环周期中，微任务队列会在宏任务队列之前被完全清空。
2025-08-01 16:17:57
903
原创 Cesium 快速入门（四）相机控制完全指南
必须在 Viewer 创建前设置才有效，适用于需要固定初始范围的场景（如特定区域监控））是 Cesium 场景交互的核心，负责定义观察者视角和运动方式。：使用 lookAt 后，相机将锁定目标点，需调用。：初始化定位、按钮快速跳转、精确坐标定位。：高频相机移动会导致帧率下降。：自动隐藏视域外对象。
2025-08-01 16:17:18
312
原创 TypeScript 内置类型深度解析：原理、应用与实战
工具类型用途简述应用场景Partial全部变为可选表单局部更新、默认值合并Required全部变为必填强制配置项、单元测试 mockReadonly全部变为只读防止修改对象、React propsPick选出某几个属性数据脱敏、接口层 DTO、展示字段选择Omit排除某几个属性数据裁剪、避免敏感字段传输Record构造固定键的映射对象类型配置映射、权限控制、状态字典等排除 null 和 undefined明确限定属性值非空。
2025-08-01 16:16:47
520
原创 网页接入弹窗客服功能的完整实现（Vue3 + WebSocket预备方案）
以上就是一个基础弹窗客服到websocket实时通信的完整实现步骤。后续可以进一步扩展的功能包括： 客服坐席状态显示， 消息已读回执， 文件传输功能， 客服评价系统。
2025-08-01 16:15:30
162
原创 [特殊字符][特殊字符][特殊字符]结合 vue 或 react，去写three.js
Three.js核心概念：场景、相机、渲染器三位一体构成基础框架动画原理：使用实现平滑动画响应式设计：监听窗口大小变化并调整相机和渲染器框架整合Vue中使用组合式API和生命周期钩子React中使用hooks或类组件生命周期资源管理：组件卸载时remove和cancel掉动画frame。
2025-08-01 16:14:27
396
原创 React hook的执行顺序
组件函数在渲染时自上而下执行，Hooks 严格按照定义顺序执行。父组件的 Hooks 优先于子组件的 Hooks。在 DOM 更新后同步执行，useEffect在 DOM 更新后异步执行。useStateuseState返回当前状态和更新函数。更新是异步且批处理的，会触发组件重新渲染。推荐使用函数式更新来确保基于最新状态进行更新，避免闭包问题。理解这些原理有助于你更好地调试 React 应用，并编写出性能更优、行为更可预测的组件。
2025-08-01 16:13:49
522
原创 p5.js 3D模型（model）入门指南
在 p5.js 中，model()是专门用来绘制 3D 模型的 "画笔"。它的作用很简单：把一个提前准备好的 3D 几何对象（）画到画布上。必须在 WebGL 模式下使用。因为 3D 绘图需要 WebGL 的 3D 渲染能力，普通 2D 画布（默认模式）不支持！
2025-08-01 16:13:00
278
原创 模拟场景 | 前端常见问题
纯函数如同化学反应方程式：相同输入永远产生相同输出，且无副作用。在检验报告生成中确保每次计算HDL/LDL都绝对一致。// 🔁 可缓存、可并行 };
2025-08-01 16:11:46
1008
原创 自己写一个vscode插件
但是我平时已经习惯用Cursor了，这个代码在Cursor里面跑不起来。想先发布到VsCode的插件库，再同步到Cursor使用。打开命令行窗口，用非PowerShell的命令窗口运行。是 ES2022（ES13）引入的新方法，需要nodeJS升级V18+，切换nvm。直接问chatGPT我想搞一个展示微博热搜榜单词条的vscode插件怎么搞？其实chatGPT给出的文娱榜的接口不对，我自己去控制台拿的。就可以在Vscode的插件库里面搜索到了。然后在已安装插件库里面就可以看到了。Windows 默认。
2025-08-01 16:10:51
624
原创 React Hook 解析（一）：useCallback 与 useMemo
每当依赖项不变时，返回的函数引用保持不变。避免创建新的对象、数组，防止触发子组件更新。减少事件绑定的频率（例如鼠标滚动、点击）依赖数组必须写全，防止缓存失效或 bug。，每次组件渲染都会新建一个。，每次父组件重渲染都会导致。的执行时机与副作用陷阱。或子组件频繁渲染时再使用。每个函数、对象、数组都。来优化这些性能问题。函数，导致引用变化。数据筛选、排序等逻辑。
2025-07-29 21:51:01
296
原创 Web Worker 简单使用，看这篇文章就够了
Web Worker 是现代 Web 开发中提升性能的关键技术，通过将计算密集型任务卸载到后台线程，显著改善了用户体验。保持 UI 流畅响应充分利用多核 CPU隔离高风险或资源密集型任务实现更复杂的应用场景然而，也需注意其限制和适用场景，避免过度使用导致不必要的复杂性。掌握 Web Worker 将帮助开发者构建更高效、更流畅的 Web 应用。
2025-07-29 21:50:31
572
原创 原生＜dialog＞元素：别再自己手写Modal弹窗了！
Modal弹窗，可以说是我们前端UI界面里的“标配”了。但这个组件，恰恰是团队里代码质量的“重灾区”。这个方法稍微复杂一点，但能实现完美的关闭动画。对于大部分简单场景，没有关闭动画也是可以接受的。我们需要给它和它的遮罩层加点样式。的矩形区域内，如果不在，就说明点的是遮罩层，此时调用。是瞬间出现和消失的，体验有点生硬。我们可以把它封装成一个简单的类，方便复用。这个伪元素所有关于遮罩层的样式，都应该写在这里。这些问题，每一个都是体验上的硬伤。所以，最近我们团队的新项目，我立了一个规矩：。
2025-07-29 21:48:20
197
原创 css —pointer-events属性_css pointer-events
它对于构建复杂的交互界面非常有用，特别是在处理层叠元素或图形时，可以精确控制哪些元素响应鼠标事件，哪些元素不响应。例如，某些元素可能是半透明的，我们希望它们的透明部分不干扰用户的操作。在 SVG 元素中尤其有用，可以细化控制鼠标事件响应的区域。上面的例子中，红色的填充部分不会响应任何鼠标事件，而只有黑色边框部分能够响应鼠标事件。被应用于透明背景，确保即使用户点击透明部分，底层的按钮仍然能够响应点击事件。可以用来使一个元素忽略鼠标事件，允许鼠标事件直接传递给其下方的元素。）时，鼠标事件穿透到页面下层的按钮。
2025-07-29 21:47:44
427
原创 使用webworker优化大文件生成hash的几种方式
优化方式：将大文件先切片，每一片都启动一个webWorker来计算hash，最后将所有的hash合并到一起再重新生成一个新的hash。最近做大文件断点续传需求时，需要将大文件生成hash，如果直接生成，速度会变得很慢。方式3：ESModule引入 (推荐这种)方式2：Blob URL引入。方式1: 原生js引入。
2025-07-29 21:47:12
93
原创 React复习：基础组件+组件通信
函数组件（主流）或类组件。在 JS 里写类 HTML，记得{}包 JS，className代替class，标签要闭合，根元素唯一。props父传子，子只读不可改，让组件可配置复用。state组件自己的数据，改了就刷新界面（函数组件用useState，类组件用this.state处理用户操作（驼峰命名，类组件注意this绑定）。if?&&根据情况显示不同内容。列表渲染靠.map()批量生成，必须加唯一稳定的key（优先用 id，慎用 index）。记住这个核心：React 组件就是接收。
2025-07-29 21:45:35
600
原创 Axios 入门指南：从基础用法到实战技巧
在前端项目里，几乎没有哪个工具像 Axios 这样“低调但高频”。它是我们跟后端打交道最常用的 HTTP 客户端，很多人用它的方式可能就是简单的.get()或.post()，但它能做的远不止这些。这篇文章不谈架构设计，也不讲封装套路，只聊 Axios 的基础能力、使用方式以及你日常开发中该知道的那些点。说白了，就是让你对 Axios 有个彻底了解，用起来心里有底。简单说，Axios 是一个基于 Promise 的 HTTP 请求库，支持浏览器和 Node.js 环境。你可以把它理解成是和fetch。
2025-07-29 21:45:04
303
原创 React样式冲突终结者：CSS模块化+Vite全链路实战指南[特殊字符]
终极提示：在Next.js中同样支持CSS模块化，文件名约定为。，Vite和Webpack双构建引擎通用！React+Babel处理JSX。Tree-Shaking无用样式。：传统CSS在React中会。，如同把咖啡倒进共享饮水机！CSS模块转JS代理对象。生成/dist静态资源。Product生产部署。浏览器渲染带哈希类名。
2025-07-29 21:42:22
323
原创 学习低代码编辑器第四天
实现蒙层的大体思路：给渲染组件的外层div绑定onMouseOver和onMouseLeave事件，通过onMouseOver事件获取到当前悬停组件的id，并将其保存，再在该div内（也就是渲染组件的同级下）创建另一个div，用于盛放蒙层组件，接着创建蒙层组件HoverMask，将当前悬停组件的位置获取到，然后蒙层组件使用绝对定位，将位置设置的和当前悬停组件位置一样，最后鼠标移出，调用onMouseLeave函数将当前悬停组件id设为undefined。
2025-07-29 21:41:52
404
原创 答题抽奖活动小程序技术复盘
动画效果：CSS3动画/Canvas实现抽奖动效。解决：简化动画效果，增加设备性能检测。现象：第二天中午出现短暂响应延迟。解决：调整连接池大小，增加缓存层。框架选择：微信小程序原生开发等。现象：实时参与人数统计有延迟。题目数据缓存减少数据库查询。原因：数据库连接池配置不足。解决：引入Redis计数器。现象：低端手机动画不流畅。用户抽奖结果临时缓存。
2025-07-29 21:41:18
167
原创 常见 HTTP 请求头：从“为什么接口返回乱码”说起
在调试一个跨域上传接口时，后端同事突然找你：“你传的文件名是乱码啊！你一脸懵：“我传的是简历-张三.pdf，怎么就乱码了？
2025-07-29 21:40:19
815
原创 每日见闻之Three.js 根据官方demo 理解相机位置
总结一下就是 我们要看的内容是固定 就是一个以 0，0，0点为中心，且宽高都是2的立方体。我们看这个立方体的角度 跟 离这个立方体的距离（Z）决定在我们的视野中能看到多少内容。也就是相机在z=4，x=0，y=0的位置，看一个宽高都是2，且中心点在0，0，0的立方体。就跟你站到楼底 和距离楼1000米 能看到的楼的范围是不一样的，视野中的内容是不一样的。这里我们看一下 Camera 这里的Camera 设置的是4，这个4这个单位是世界布局的4 他没有具体的单位，就是四个单元。每三个点是一个一组。
2025-07-28 21:42:26
286
原创 使用 MCP 协议扩展 Cursor 功能：原理解析与实战指南
MCP 是一种标准协议，允许大语言模型（LLM）在运行时调用外部工具。Claude、ChatGPT 等模型通过 MCP 能够访问你提供的功能，例如调用数据库、运行脚本、发出 HTTP 请求等。模型可以感知“外部世界”的工具能力自动识别什么时候该调用工具，什么时候只用语言回答工具调用是结构化的，标准 JSON 格式，容易集成过程说明列出工具使用定义所有工具调用工具Claude 构造请求执行执行并返回你的服务执行工具并返回结构化内容Claude 整理回应。
2025-07-28 21:41:22
898
原创 手写mini-vue之后，我写了一份面试通关手册
全家桶（vue、vue-router、pinia），项目的亮点有TDD测试驱动开发、rolldown打包等，并打算把这一个项目写到我的简历上。，以及针对可能会被问到的一些问题（TDD是什么、写mini-vue遇到的困难、monorepo的好处等等）针对性解决一下。希望能给我将来的面试带来一些帮助、也希望能给手写mini-vue的各位提供一些参考、希望我们共同进步。所以我希望能把我写过的重新整理成文档，希望能更理解vue的核心，便于回答面试官的提问。的回答，而不是一个模糊的、混乱的答复。
2025-07-28 21:38:54
167
原创 箭头函数 vs 普通函数：从“this 指向混乱”到写出真正健壮的代码
一个老项目，里面有个用户权限校验模块频繁报错：新人一脸懵：“ 怎么丢了？”——这正是 箭头函数与普通函数最核心的区别。我们有个后台管理系统，需要在页面加载后延迟 200ms 显示欢迎弹窗。原始代码如下：结果弹窗显示：为什么？因为 的回调是一个普通函数，它的 指向的是 （非严格模式），而不是 。我们把回调改成箭头函数：现在 正确指向 ，问题解决。🔍 关键理解：我们来画一张 this 查找路径图：[箭头函数]无 own this向上查找[外层函数作用域]找到 this →
2025-07-28 21:38:09
791
原创 深入解析前后端分离中的 /api 设计：从路由到代理的完整指南
这行简单的代码，凝聚了现代Web开发的架构智慧。通过/api这个简单的设计，我们实现了：✅ 前后端职责分离✅ 开发效率提升✅ 安全性增强✅ 系统可扩展性良好的API设计不是从复杂开始，而是从清晰的约定开始。/api这个简单的路径前缀，正是这种设计哲学的完美体现。
2025-07-28 21:35:17
843
原创 for..in 和 Object.keys 的区别：从“遍历对象属性的坑”说起
在优化一个用户数据同步模块时，遇到一个诡异问题：输出结果让我吓一跳：”——这正是for..in和的核心差异所在。
2025-07-28 21:34:04
631
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人