- 博客(72)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 创作三周年：在忙碌中寻找灵感与快乐
成为创作者3周年了！成为创作者的初心源于对分享知识与经验的热爱。我希望通过自己的创作，将在工作与学习中积累的体会传递给更多的人，帮助他们解决问题或启发新的思考。这种分享不仅是对自我学习的总结，更是一种对他人的支持与鼓励。每当看到读者的反馈和互动，我都会感受到这份使命感的回报，激励我不断前行，持续探索和创造更多有价值的内容。
2024-10-30 02:17:15
1620
124
原创 从three.js旋转动画，我了解了requestAnimationFrame
three.js中使用requestAnimationFrame来实现动画的渲染，而不使用setInterval实现。requestAnimationFrame告诉浏览器希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。通俗点讲就是该API的调用频率取决于浏览器的刷新率，也就是说浏览器屏幕刷新多少次，它就执行多少次，一般为每秒60次，可以将其理解为专门用来实现动画效果的api，让浏览器流畅的执行动画效果。
2024-01-08 15:45:43
7228
228
原创 【Threejs】代码+图文带你快速上手
在上篇文章中，我们已经介绍了three.js，并使用vite搭建了three.js的开发环境，实现了第一个3D场景。本文就来继续分享一下three.js的相关知识，通过代码+图文带你快速上手three.js。🔥如果此文对你有帮助的话，欢迎💗关注、👍、⭐✍️评论支持一下博主~
2024-01-08 15:44:54
4394
128
原创 2024年了，是该学学Three.js了
讲到Three.js，就需要先说一下OpenGL和WebGL，OpenGL是一个跨平台的3D/2D的绘图标准，WebGL是一种3D绘图协议，它允许把JavaScript和OpenGL 结合在一起运用，但使用WebGL原生的API来写3D程序非常的复杂，对于前端开发者来说学习成本非常高。Three.js是WebGL的JavaScript 3D库，其对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，让开发者能更快速的进行3D场景效果的开发。
2024-01-06 14:20:16
7286
175
原创 【Canvas】绘制风速热力图
本文分享了如何使用canvas来绘制色卡和风速热力图，以及整个过程中所涉及到的数据处理。🔥如果此文对你有帮助的话，欢迎💗关注、👍、⭐✍️评论支持一下博主~
2023-12-14 09:54:22
5134
251
原创 【Canvas】记录一次从0到1绘制风场空间分布图的过程
本文主要记录了一次自己使用canvas从0到1绘制风场空间分布图的经历，整个过程还是蛮复杂的，不过也刚好巩固了一下自己的canvas知识，将其运用到了实践中，同时也发现自己对知识的理解其实还存在许多的不足，需要继续努力！🔥如果此文对你有帮助的话，欢迎💗关注、👍、⭐✍️评论支持一下博主~
2023-12-12 18:24:19
5159
195
原创 浏览器中实现可视化的方式有哪几种？带你盘点一下
本文主要介绍了在浏览器中实现可视化的4种方式：HTML+CSS、Canvas2D、SVG、WebGL，分别使用4种方式绘制了一个简单的柱状图，不同方式有各自的优缺点，实际应用中，也应该根据具体的场景来选择合适的方案实现可视化，以达到最佳效果。
2023-11-27 09:32:56
3188
160
原创 webpack快速上手之搭建cesium三维地球环境
CesiumJS是目前主流的一款三维地图框架，是一个跨平台、跨浏览器的展示三维地球和地图的JavaScript库，通过WebGL技术实现图形的硬件加速，不需要任何插件支持。Webpack是目前最流行的前端构建工具，可以让开发更加高效。本文就来分享一下如何使用webpack搭建Cesium三维地球环境。
2023-11-20 10:31:32
3088
216
原创 150行代码实现一个极简的Canvas多功能画板
HTML5提供的Canvas标签能实现很多有趣的效果，本文就来分享一下如何使用Canvas来实现一个极简的多功能画板。主要功能包括：画笔、橡皮擦、清屏、前进和后退。
2023-11-01 19:51:12
3441
202
原创 一杯茶的时间，带你使用Express框架在服务端渲染图片
大家好，我是南木元元，热衷分享有趣实用的文章，大家知道前端如何绘制出三角形吗？相信很多人的答案都是canvas，使用canvas确实很容易就能实现，但你知道如何在服务端实现吗，本文就来聊聊如何在node服务端绘图。
2023-10-22 20:32:11
2745
180
原创 Vue3实现图片懒加载及自定义懒加载指令
图片懒加载是一种常见性能优化的方式，它只去加载可视区域图片，而不是在网页加载完毕后就立即加载所有图片，能减少很多不必要的请求，极大的提升用户体验。图片懒加载的实现原理：在图片没进入可视区域的时候，只需要让 img 标签的 src 属性指向一张默认图片，在它进入可视区后，再替换它的 src 指向真实图片地址即可。本文就分享一下在vue3中实现图片懒加载的几种方式，包括使用插件以及自定义v-lazy指令。
2023-08-12 16:56:48
10752
110
原创 canvas自定义绘制顺序解决遮挡问题
通过自定义绘制顺序来解决canvas的叠加遮挡问题。定义一个数组，把所有要执行的函数方法push到数组中，即把函数当做数组的元素存储在数组中，这样就可以通过数组的方法来操作这些函数，然后对函数按照自定义的顺序进行排序，需要先执行的放前面，后执行的放后面，最后遍历函数数组并执行其中的每个函数即可。
2023-06-24 15:53:49
3041
52
原创 快速上手WebGL，代码+图解手把手教你使用WebGL一步步实现热力图
使用webgl绘制热力图。webgl中有顶点着色器和片元着色器，一个用于计算顶点位置，一个用于计算颜色值，所以，关键就是把数据传个这两个着色器。片元着色器，首先设置了float为中等精度，然后通过v_Color接收来自顶点着色器的颜色并将其设置给内置变量gl_FragColor，其中通过内置变量gl_FragColor来确定顶点像素颜色。缓冲是程序发送给GPU的数据，attribute用来从缓冲中获取所需数据，并将它提供给顶点着色器。
2023-05-04 15:02:01
1689
17
原创 js中的事件冒泡与事件捕获
js中的事件冒泡与事件捕获。当点击黑色容器时，开始进行事件捕获，Js事件流从window上往事件触发处传播，遇到注册的捕获事件就会触发；但是捕获阶段默认是不处理的（addEventListener第三个参数默认是false）,紧接着传播到事件触发处，触发注册的事件，打印div3，然后进行冒泡阶段从事件触发处 往window上传播，遇到注册的冒泡事件会触发，打印div2，再打印div1。就是因为点击了盒子的子元素（黄色和红色部分），事件冒泡到了绑定拖拽事件的父元素身上（蓝色部分），导致触发的是拖拽效果。
2023-03-24 10:58:23
3648
16
原创 Grid 布局：从入门到精通，一篇就够了—— 探索最强大的 CSS 布局系统
CSS Grid 布局是一种强大的二维布局系统，能够轻松实现复杂的网页设计。通过定义网格容器和项目，开发者可以精确控制行和列的分布，创建灵活的响应式布局。核心属性如 grid-template-columns、grid-template-rows 和 grid-gap 用于设置列宽、行高和间距，而 grid-column、grid-row 和 grid-template-areas 则用于定位内容。无论是经典布局、响应式设计还是创意排版，Grid 布局都能以简洁的代码实现高效的设计，是网页布局的终极利器！
2025-03-17 02:05:11
1104
50
原创 10 分钟搞定 Swiper 轮播图：轻松打造高颜值网页
本文详细介绍了如何使用 Swiper 实现功能丰富的轮播图，涵盖了从基础使用到常用配置的全面指南。Swiper 是一款免费开源的轮播图库，支持水平、垂直、3D 翻转等多种效果，广泛应用于网页设计中。文章通过代码示例逐步讲解了如何初始化 Swiper、配置分页器、导航按钮、自动播放等功能，并提供了封装复用的方法，帮助开发者快速实现个性化的轮播图效果。此外，还介绍了响应式布局、动态幻灯片等高级配置，适合初学者和高级开发者参考。无论是简单的图片轮播还是复杂的交互需求，Swiper 都能轻松应对。
2025-02-28 23:17:56
1409
66
原创 小输入框，大讲究：Table 数字输入框 debounce 实战分享
在 Ant Design Vue 的 Table 组件中，为每个数字输入框绑定 debounce 函数是一个常见的性能优化方式。然而，在实际使用中可能会遇到所有输入框共享同一个 debounce 实例的问题，导致只有最后一个输入框的 @change 事件被触发。这篇文章将深入分析该问题的原因，主要归结于 debounce 函数的作用域共享，并提供了解决方法，包括为每个输入框动态创建独立的 debounce 函数或封装子组件来实现更好的独立性和复用性。
2025-01-28 01:27:59
1649
44
原创 前端开发的秘密武器：20个提升效率的VS Code插件
VisualStudioCode（简称VSCode）是一款由微软开发的轻量级但功能强大的免费开源代码编辑器，支持Windows、macOS和Linux操作系统。它以其简洁的界面和出色的性能而备受开发者青睐，内置强大的调试工具、Git集成和智能代码补全功能。此外，通过丰富的扩展市场，用户可以根据需要安装插件以支持各种编程语言和框架，如JavaScript、Python、Java、Vue等。本文就来分享20个前端开发常用的VSCode插件，提升开发效率。
2025-01-18 16:34:42
1339
46
原创 调试进化论：Chrome 花式断点指南
在前端开发中，调试是一项必不可少的技能。Chrome DevTools 作为一款强大的开发工具，为我们提供了丰富的调试功能，其中断点的设置更是让我们能够深入了解代码的执行过程。上文告别 Console.log：Chrome 断点调试让排错如此简单已经介绍了断点调试的过程，本文将介绍如何使用 Chrome DevTools 花式打断点，帮助大家提升调试效率和质量。
2024-12-29 15:13:43
2007
78
原创 告别 Console.log：Chrome 断点调试让排错如此简单
在前端开发中，Chrome浏览器的Source面板是一个强大的调试工具，特别是在排查JavaScript代码问题时。通过使用断点调试功能，开发者可以精准定位代码中的错误，逐步分析代码执行的过程和变量状态。本篇文章将详细介绍如何使用Chrome的Source面板设置和管理断点，并结合实际案例演示逐步调试的方法，帮助开发者更高效地解决问题。
2024-12-07 00:25:55
1617
92
原创 键盘党福音！自定义指令实现回车快捷删除
在前端开发中，为了提升用户操作效率，尤其是对键盘操作习惯的支持，常需要实现回车键快捷操作功能。本文以 Ant Design Vue 中的 Modal 组件为例，通过自定义指令 v-enter，实现了在弹窗删除场景下的回车键确认删除功能。文章详细介绍了指令的定义、全局注册以及实际应用，并分析了其相较直接绑定事件的优势，包括解耦逻辑、提高复用性和便于维护性，为开发者提供了一种优雅的解决方案。
2024-11-17 14:55:11
2302
103
原创 Vue 插槽全攻略：重塑组件灵活性
Vue 的 slot 插槽是一种允许组件开发者定义动态内容区域的机制，使得父组件可以向子组件中插入内容。通过默认插槽、具名插槽和作用域插槽，Vue 实现了高度灵活的内容传递方式。默认插槽用于传递未命名内容，具名插槽可以在不同位置插入指定内容，而作用域插槽则允许子组件将数据传递给父组件，由父组件根据这些数据自定义渲染内容。这使得组件既能保持逻辑封装，又能在实际使用中提供强大的可扩展性。
2024-10-06 14:16:08
7581
105
原创 Promise 工具箱：手写实现静态方法的完全指南
静态方法是指直接定义在类上的方法，而不是定义在类实例上的方法。它们可以通过类本身调用，而不需要创建类的实例。静态方法通常用于用于在类级别上操作数据和提供一些实用功能，而不需要实例化对象。Promise有很多静态方法，本文就来分享下如何实现这些静态方法。我们可以在Promise 类上通过static关键字直接定义静态方法，来允许对多个 Promise 对象进行操作或直接创建新的 Promise，而无需实例化一个新的 Promise 对象。
2024-09-01 15:59:06
1619
87
原创 Promise内幕揭秘：手写实现背后的奥秘
Promise是一种异步编程的解决方案，它代表一个尚未完成但预期将来会完成的操作，并可以在这个操作完成或失败时处理相应的结果。学会手写 Promise 对于理解 JavaScript 中异步编程的本质以及 Promise 的工作原理至关重要。在之前文章中我们已经了解了Promise的基本用法，今天我们就来手写实现一下Promise。
2024-09-01 15:59:02
1495
66
原创 成为创作者的第1024天：成长与技术积累的旅程
成为创作者的初心很简单，但它一直在推动我前行。记录自己的成长，为他人分享所得，并在不断的输出中提升自己，是我最初的愿景，也是我持续创作的动力源泉。无论未来会遇到怎样的挑战，我都希望能够坚持初心，继续在这条创作的道路上走下去，与更多的人分享我的成长故事。
2024-08-21 02:40:36
1611
121
原创 从回调地狱到Promise乐园：JavaScript异步编程的进化
Promise是一种异步编程的解决方案，它代表一个尚未完成但预期将来会完成的操作，并可以在这个操作完成或失败时处理相应的结果。Promise出现之前，JavaScript的异步机制主要通过回调函数来实现，但使用回调函数的方式有一个缺点：多个回调函数嵌套时会造成回调函数地狱。Promise 提供了一种更清晰和结构化的方式来编写和管理异步代码，避免了“回调地狱”（callback hell）的出现。简单来说，Promise就相当于一个容器，里面保存异步操作的结果，解决了回调地狱的问题。
2024-08-19 23:58:21
3005
78
原创 JavaScript 继承百花齐放：从原型链到 ES6 类
继承，简单来讲就是让子类能够访问到父类的属性和方法，继承的主要作用就是实现代码的重用。在JavaScript中，主要通过原型链来实现继承。我们重温一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个指针指向原型。上篇文章中我们已经了解了原型和原型链的概念，本文就来介绍一下js中实现继承的几种方式。
2024-08-04 16:17:01
4417
120
原创 JS 原型与原型链图解：彻底搞懂的终极指南
在JavaScript中，原型和原型链是非常重要的知识点，只有理解了它们，才能更好地理解js。《javascript高级程序设计》中对原型的描述：每个函数都会创建一个 prototype 属性，这个属性是一个对象，包含应该由特定引用类型的实例共享的属性和方法。实际上，这个对象就是通过调用构造函数创建的对象的原型。使用原型对象的好处是，在它上面定义的属性和方法可以被对象实例共享。简单来讲，原型就是一个对象，可以实现对象的属性和方法的继承。
2024-07-21 20:02:55
3415
122
原创 跨越语言的界限：Vue I18n 国际化指南
Vue.js、React.js 和 Angular.js 都有相应的国际化插件和库，Vue I18n 是 Vue.js 的国际化插件，它可以轻松地将一些本地化功能集成到Vue应用程序中。本文介绍如何在vue中使用Vue I18n进行国际化处理，更好地适应不同国家用户的语言需求，提升用户体验。
2024-07-06 20:31:48
2461
176
原创 个人成长的利器：复盘教你如何避免重蹈覆辙
复盘，就是在头脑中对过去所做的事情重新“过”一遍，通过对过去的思维和行为进行回顾、反思和探究，实现能力的提升。复盘是一种强有力的学习和改进工具，通过系统性的回顾和分析，能够帮助个人和团队不断提升绩效，关键在于保持客观性和系统性，并通过持续的实践和改进，真正实现复盘的价值。
2024-06-23 21:44:36
2318
131
原创 还没搞懂作用域、执行上下文、变量提升？看这篇就够啦
本文主要介绍了js中不容易理解的作用域、作用域链、执行上下文、变量提升等知识，梳理了js执行过程中的一些关键点，也当是自己的一个学习笔记。如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~
2024-06-02 20:50:20
1825
110
原创 JS执行原理大揭秘：事件循环Event Loop与宏任务、微任务
JavaScript是一种单线程语言，事件循环作为JavaScript的核心执行机制，可以有效地进行异步处理，保证用户界面的响应性和流畅性。所有同步任务都在主线程上执行，形成一个执行栈在执行同步任务的时候，如果遇到了异步事件，会将该任务挂起，继续执行同步任务，当异步事件执行完后（如定时器到时，ajax请求返回），再将对应的回调加入到一个任务队列中等待执行，任务队列分为宏任务队列和微任务队列当执行栈中的同步任务执行完毕后，会执行所有微任务，清空微任务队列。
2024-05-10 16:52:30
3683
268
原创 数据复制的艺术：深拷贝与浅拷贝在JavaScript中的实现方式
当我们处理JavaScript中的数据时，深拷贝和浅拷贝是两个非常重要的概念。它们涉及如何复制对象和数组，以及如何处理复杂数据结构。在这篇博客中，我们将深入探讨深拷贝和浅拷贝的概念，解释它们的区别以及如何在JavaScript中实现它们。
2024-04-29 18:29:51
5250
149
原创 JavaScript排序大揭秘：手绘图解6大常见排序算法，一网打尽
本文用图解总结梳理了6种常见的排序算法，包括冒泡排序、选择排序、插入排序、快速排序、归并排序和堆排序，探寻常见排序算法的奥秘与实现，一网打尽！
2024-04-15 22:52:00
2899
108
原创 面试官：请实现一个接口错误重试功能
接口错误重试指的是在网络不稳定的情况下，接口请求可能会因为网络超时、服务器错误或其他原因导致失败，这时，可以通过接口重试功能，当前端发起的请求在遇到错误时可以进行自动重试，有效地提升应用的稳定性和用户体验。
2024-04-15 12:56:05
1549
61
原创 TypeScript魔法指南：解锁类型安全的新境界
TypeScript（简称 TS）是微软公司开发的一种基于JavaScript 语言的编程语言。它是JavaScript 的超集，其目的是增强 JavaScript的功能，本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
2024-03-27 21:06:19
2148
130
原创 不要在代码中随便使用try...catch了
能被try...catch捕捉到的异常，必须是在报错的时候，线程执行已经进入try...catch 代码块，且处在 try...catch 里面，这个时候才能被捕捉到。因此，在代码中不要再随便写try...catch了，异步错误是无法被捕获的，而且像Promise有它自己的异常捕获方法，比try...catch更好用。
2024-03-11 18:44:51
2792
292
原创 【面试】盘点10个高频的前端算法题，你全都会了吗？
现在前端的面试中，算法出现的频率越来越高了，大厂更是必考算法 。本文就来分享一下10个常见的前端算法题，重要的地方已添加注释，如有不正确的地方，欢迎多多指正。
2024-02-16 12:30:10
6225
176
原创 最近nvm安装报错的原因找到了——npm原淘宝镜像正式到期！
最近淘宝原镜像域名（registry.npm.taobao.org）的HTTPS证书正式到期。如果想要继续使用，需要将npm源切换到新的源（registry.npmmirror.com），否则会报错。🔥如果此文对你有帮助的话，欢迎💗关注、👍、⭐✍️评论支持一下博主~
2024-02-02 20:17:32
5713
145
vue中集成cesium和threejs
2023-12-30
vue3自定义指令实现图片懒加载
2023-12-30
php小项目-登录和注册的实现
2023-12-29
网页设计-手绘日记网站
2023-12-29
canvas多功能画板
2023-11-30
TA创建的收藏夹 TA关注的收藏夹
TA关注的人