- 博客(30)
- 收藏
- 关注
RSS订阅原创 多边形向内偏移算法的实现与可视化：从理论到实践
本文介绍了多边形向内偏移算法的核心原理与实现。该算法通过将多边形的每条边沿内部法线方向移动指定距离，计算相邻偏移边的交点来生成新多边形。文章详细讲解了向量运算、法向量计算、直线方程求解等关键技术，并提供了一个完整的可视化工具实现，包括坐标转换、画布绘制和用户交互功能。虽然算法能够处理简单多边形，但仍存在大偏移距离导致自相交等局限性。该技术广泛应用于CAD设计和图形处理领域，掌握这些计算几何基础对学习更复杂图形算法具有重要意义。
2025-10-13 17:29:30
955
原创 基于 Canvas 实现经典动态连线点阵背景效果
粒子数量：修改的值，数量越多效果越密集粒子速度：调整this.vx和this.vy的取值范围粒子大小：修改this.size的随机范围连线距离：调整判断条件中的100值，控制粒子间连线的最大距离颜色方案：改变this.color和连线的，实现不同色调效果通过 HTML5 Canvas 实现动态连线点阵背景并不复杂，核心在于理解粒子的运动规律和 Canvas 绘图 API 的使用。这种效果不仅视觉上具有吸引力，而且性能表现良好，适合作为各种网站的背景使用。
2025-07-06 15:59:59
618
原创 原生 JavaScript 实现拖拽排序功能：从基础到优化
支持鼠标拖拽元素改变顺序拖拽过程中提供视觉反馈实时更新元素序号数据与视图同步更新简洁美观的 UI 设计拖拽时元素会有轻微放大和阴影效果被拖拽元素经过其他元素时，目标元素会显示背景色变化松开鼠标后，所有元素会平滑调整到新位置控制台会输出排序后的结果本文详细介绍了如何使用原生 JavaScript 和 HTML5 拖拽 API 实现拖拽排序功能。通过监听拖拽事件，我们可以实时调整元素位置并同步更新数据，从而实现直观的排序交互。
2025-07-06 14:35:54
1168
原创 CSS 文字浮雕效果：巧用 text-shadow 实现 3D 立体文字
是 CSS3 中用于为文字添加阴影效果的属性。h-shadow：水平阴影位置（必需）v-shadow：垂直阴影位置（必需）：阴影模糊半径（可选）color：阴影颜色（可选）关键特性可叠加多层阴影，用逗号分隔支持负值（反向阴影）现代浏览器广泛支持（IE9+）通过属性，我们可以用简单的 CSS 代码实现令人印象深刻的文字浮雕效果。理解阴影的方向与光线模拟的关系掌握多层阴影叠加的技巧合理选择颜色和模糊度参数。
2025-07-05 21:16:40
614
原创 Vue 项目路由模式全解析：从 hash 到 history 再到 abstract
Vue Router路由模式详解：hash、history和abstract模式对比 摘要： Vue Router提供三种路由模式：hash模式利用URL哈希值实现兼容性路由，无需服务器配置，适合内部系统；history模式基于HTML5 History API生成优雅URL，需服务器配合，适合现代化Web应用；abstract模式用于非浏览器环境如SSR和原生应用。选择策略应考虑项目需求、兼容性要求和服务器能力，现代应用推荐history模式，特殊环境则需使用abstract模式。三种模式在URL格式、兼
2025-06-15 19:58:49
1055
原创 CSS （mask）实现服装动态换色：创意与技术的完美融合
上述代码构建了一个完整的服装换色小案例，主要由 HTML、CSS 和 JavaScript 三部分组成。HTML 部分搭建起页面的基本结构，包含标题、颜色选择器、展示图片的容器；CSS 负责页面的样式和服装换色的核心逻辑；JavaScript 则实现了颜色选择器与服装颜色变化的交互功能。
2025-05-28 14:17:00
419
原创 npm、pnpm、yarn 各自优劣深度剖析
在实际开发中，开发者可以根据项目需求、团队习惯和个人偏好来选择合适的包管理工具，也可以结合使用，充分发挥它们的优势，提升开发效率和项目质量。npm、pnpm、yarn 是目前最主流的三款包管理工具，它们在功能上有诸多相似之处，但在实际使用中又各有优劣。pnpm 是近年来新兴的包管理工具，凭借其独特的技术设计和高效的性能，迅速在开发者群体中获得青睐，它的优势包括：。yarn 是 Facebook 等公司联合推出的包管理工具，旨在解决 npm 存在的一些问题，它的优势如下：。四、总结与选择建议。
2025-05-21 17:40:50
1121
原创 深入理解 Vue2 与 Vue3 响应式系统：丢失场景、原因及解决方案
在Vue.js开发中，响应式系统是其核心特性，但Vue2和Vue3在某些场景下可能出现响应式丢失的问题。Vue2基于Object.defineProperty()实现响应式，存在动态属性添加、数组索引修改、深层对象变化等场景下的响应式丢失问题，解决方案包括使用Vue.set、Vue.delete、splice等方法。Vue3则基于Proxy实现，响应式能力更强，但仍需注意解构响应式对象、传递属性到子组件等场景下的响应式丢失，解决方案包括使用toRefs、ref、v-model等。通过理解响应式原理、遵循最佳
2025-05-19 16:15:36
1365
原创 前端面试必知：浏览器从输入 URL 到页面渲染完成的全过程
在前端开发面试中，理解浏览器从输入URL到页面渲染完成的整个过程是高频考点。这一过程包括URL解析与DNS查询、建立网络连接、发送HTTP请求、服务器处理请求与响应、浏览器接收响应与资源加载、页面解析与渲染等多个环节。深入理解这些步骤不仅有助于应对面试，还能在实际开发中优化性能、解决问题。例如，DNS查询涉及浏览器缓存、操作系统缓存和本地DNS服务器等多个层次；网络连接则涉及TCP三次握手和四次挥手；页面渲染则包括构建DOM树、CSSOM树、生成渲染树、布局、绘制和合成等步骤。掌握这些知识，能够帮助开发者更
2025-05-19 11:01:57
799
原创 深入理解 JavaScript 事件循环机制
通过Promise的链式调用，taskB的执行依赖于taskA的完成（即taskA的Promise状态变为fulfilled），利用了事件循环机制对微任务队列的处理顺序，当taskA的Promise状态改变触发then回调时，该回调作为微任务进入微任务队列，在当前调用栈为空且宏任务队列执行间隙，优先执行微任务队列中的taskB相关回调，从而确保了taskB在taskA完成后才会执行，实现了异步任务的顺序控制。无论是同步任务中的函数调用，还是异步任务回调函数的执行，都会在调用栈中进行处理。
2025-05-16 10:05:53
657
原创 前端面试必知：Vue2 和 Vue3 的核心区别
Vue3 同样不建议两者联用，同时优化了渲染机制，在元素频繁切换显示隐藏时性能更好，v-if与v-else、v-else-if的组合使用也更加灵活。Vue3 在编译时引入静态标记技术，能精准识别模板中的静态内容，在数据更新时跳过对静态内容的重新渲染，极大提高了渲染效率。v-model指令在 Vue3 中得到增强，不仅支持自定义修饰符，还允许一个组件上使用多个v-model进行双向绑定，通过modelValue和update:modelValue事件实现更灵活的数据交互。1.2 Vue3 的响应式升级。
2025-05-15 16:19:55
548
原创 深入理解 JavaScript 中 input 事件与 change 事件的区别
在前端开发中，<input>元素的input事件和change事件是处理表单输入的重要工具，但它们在触发时机和适用场景上存在显著差异。input事件在用户输入内容时实时触发，适用于实时预览、搜索联想和字数统计等场景；而change事件在元素失去焦点且内容发生变化时触发，常用于表单提交前的最终验证和下拉菜单选择后的联动操作。通过合理选择和组合使用这两个事件，开发者可以实现更流畅、高效的表单交互体验，提升前端应用的质量和用户体验。
2025-05-13 10:06:11
1614
原创 微信小程序支付功能开发全解析：前后端协作实现高效支付
开发微信小程序支付功能，整体流程从前置准备开启。前期，开发者需在微信支付商户平台完成注册、实名认证，生成 API 密钥，并在小程序后台配置支付相关域名；同时准备好小程序开发环境，注册小程序账号，安装开发者工具。进入开发阶段，前端在用户点击支付按钮后，先调用wx.login()获取临时登录凭证code，发送到后端换取openid；接着将支付信息（金额、商品描述、openid等）发送至后端，获取支付参数；再调用唤起支付界面，完成支付后处理支付结果并可反馈给后端。
2025-05-08 14:39:35
2300
原创 前端性能优化全解析：打造极致用户体验
前端性能优化是一个持续且复杂的过程，涵盖页面加载、渲染以及项目构建等多个层面。通过实施上述优化方案，能够显著提升页面加载速度、改善用户交互体验，为用户带来更流畅、高效的 Web 应用。在实际开发中，开发者应根据项目特点与需求，灵活运用这些优化策略，不断探索与实践，以打造性能卓越的前端应用。
2025-05-08 14:07:39
644
原创 前端适配方案全解析：从响应式到动态缩放的实战指南
在多设备、多分辨率的Web开发中，前端适配是绕不开的核心问题。从桌面浏览器到折叠屏手机，从4K显示器到低像素平板，如何实现“一次开发，全端适配”？本文将系统梳理主流适配方案，结合代码示例与实战建议，助你攻克兼容性难题。通过CSS媒体查询（Media Queries）动态调整样式，结合Flexbox/Grid布局实现“弹性响应”。为不同设备（如手机、平板、桌面）开发多套静态模板，通过设备检测动态加载。标签控制视口缩放，结合REM/百分比单位实现“整体缩放”。先设计移动端样式，再通过媒体查询增强桌面端体验。
2025-05-07 17:23:17
976
原创 Three.js 零基础实战：打造炫酷3D纹理立方体（完整代码+深度解析）
在现代Web开发中，3D图形技术变得越来越重要。Three.js作为最流行的WebGL库之一，让开发者能够轻松创建复杂的3D场景。本文将带你从零开始，使用纯HTML和JavaScript（不依赖任何框架）实现一个具有交互功能的3D纹理立方体。我们将创建一个具有以下功能的3D立方体：三种可切换的纹理（木纹、砖墙和网格）鼠标交互（旋转/缩放）动画播放/暂停控制响应式布局加载状态提示通过这个项目，我们学习了如何使用纯JavaScript和Three.js创建交互式3D场景。
2025-04-16 16:19:31
1386
原创 Vue3 组件通信全解析：从基础到实战
在 Vue 开发中，组件通信是一个绕不开的话题。随着 Vue3 的发布，新的组合式 API 和更灵活的响应式系统为组件通信带来了更多可能性。本文将系统总结 Vue3 中的组件通信方法，结合实际场景，帮助开发者快速掌握不同通信方式的适用场景和最佳实践。简单通信：优先使用props和emit。跨层级通信：使用或 Pinia。全局状态：使用 Pinia 管理全局状态。兄弟组件通信：通过父组件中转，避免滥用事件总线。复杂场景：结合 Vue3 的组合式 API 和响应式系统，灵活实现通信逻辑。
2025-04-16 09:43:12
690
原创 深入解析：JavaScript快速排序（Quick Sort）算法实现
排序算法根据其时间复杂度和空间复杂度可以分为多种类型。常见的排序算法包括冒泡排序、选择排序、插入排序、归并排序、快速排序等。其中，快速排序因其平均时间复杂度为O(n log n)，且在实际应用中表现出色，被认为是目前排序效率较高的算法之一。
2025-04-15 17:18:08
861
原创 深入浅出：科普Diff算法
Diff算法，全称为Difference Algorithm，主要用于比较两个文本或数据结构之间的差异。在前端开发中，它常被用于比较两个虚拟DOM树的差异，并以最小的操作代价将旧的DOM树更新为新的DOM树。虚拟DOM是一种基于JavaScript的对象模型，它模拟了真实DOM的结构，通过Diff算法对比新旧虚拟DOM树的差异，可以高效地更新真实DOM，从而提高页面的性能和响应速度。Diff算法作为一种高效的比较和更新文本或数据结构的算法，在多个领域都有着广泛的应用。
2025-04-15 17:02:42
1888
原创 使用 Vue 3 构建炫酷科幻风格时钟组件
在前端开发中，一个设计精美的时钟组件不仅可以提升用户体验，还能为项目增添独特的科技感。本文将介绍如何使用 Vue 3 和一些简单的 CSS 动画，打造一个具有科幻风格的全息投影时钟组件。这个时钟不仅具备指针旋转、数字显示功能，还添加了粒子动画和未来感设计，适合用于个人项目或作为学习 Vue 组件开发的示例。本文通过 Vue 3 和 CSS 动画实现了一个炫酷的科幻风格时钟组件，展示了如何结合 Vue 的响应式特性和 CSS 的强大动画能力，打造出具有视觉冲击力的前端组件。
2025-04-15 16:06:44
755
3
原创 JavaScript数字过滤与格式化
函数是一个实用的工具函数，用于对用户输入的数字进行格式化处理。通过结合正则表达式和字符串处理方法，该函数能够有效地过滤掉非数字字符，并将数字格式化为指定的小数位数。在实际应用中，我们可以根据需要对函数进行扩展或修改，以满足特定的需求。希望本文能够帮助你更好地理解函数的实现原理和使用方法。如果你有任何问题或建议，请随时在评论区留言。
2025-04-14 16:31:14
368
原创 JS原型与原型链详解
原型和原型链是JavaScript中非常重要的概念，它们是实现对象继承和属性查找的基础。通过掌握这些概念，我们可以更好地理解JavaScript的工作方式，并编写出更高效、更可维护的代码。在实际开发中，我们可以利用原型链来实现代码的重用和模块化，降低代码的复杂性，提高代码的可读性和可维护性。
2025-04-14 16:20:43
1022
原创 Vue3 实现右键菜单组件
在Web应用开发中，右键菜单是一个常见的用户交互功能。通过右键菜单，用户可以快速访问一些常用的操作，提高操作效率。本文将基于Vue 3，详细介绍如何实现一个可复用的右键菜单组件，包括菜单的显示与隐藏、菜单项的点击事件处理等。是右键菜单的主组件，负责显示和隐藏菜单，以及处理菜单的定位。是右键菜单的子组件，负责渲染每个菜单项，并处理点击事件。来构建一个完整的右键菜单。在父组件中，我们可以使用。
2025-04-14 15:37:16
764
原创 使用 html2canvas 和 jsPDF 实现 HTML 页面导出为 PDF 的完整解决方案
是一个可以将 HTML 元素渲染为 Canvas 的库。它通过截取 DOM 元素的快照，将其转换为 Canvas 对象，从而支持导出为图片或 PDF。jsPDFjsPDF是一个轻量级的 JavaScript 库，用于生成 PDF 文档。它支持在浏览器端动态创建 PDF 文件，并可以插入图片、文本等内容。本文介绍了如何使用和jsPDF实现将 HTML 页面或页面中的特定部分导出为 PDF 文件的功能。通过分页处理，可以确保长内容也能正确导出。希望本文对你有所帮助，欢迎在评论区留言交流！
2025-04-14 14:45:24
1185
原创 深入理解 BFC（Block Formatting Context）：原理、触发条件与应用场景
BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则他是一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。
2023-06-04 14:15:21
403
1
原创 JavaScript单线程与异步执行模式详解
因为JavaScript是为了处理页面中用户的交互，以及操作DOM而诞生的如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推）。就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；"异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
2023-06-03 18:22:25
298
原创 JavaScript跨域问题及解决方案详解
跨域问题是Web开发中常见且重要的挑战之一。本文介绍了跨域问题的根本原因，并详细探讨了反向代理服务器、CORS和JSONP三种主要的解决方案。其中，反向代理服务器和CORS是较为常用和推荐的解决方案，而JSONP由于只支持GET请求且存在安全性问题，已逐渐被淘汰。在实际开发中，应根据具体需求和场景选择合适的解决方案。
2023-06-03 14:31:57
310
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人