- 博客(54)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 JS执行原理大揭秘：事件循环Event Loop与宏任务、微任务
JavaScript是一种单线程语言，事件循环作为JavaScript的核心执行机制，可以有效地进行异步处理，保证用户界面的响应性和流畅性。所有同步任务都在主线程上执行，形成一个执行栈在执行同步任务的时候，如果遇到了异步事件，会将该任务挂起，继续执行同步任务，当异步事件执行完后（如定时器到时，ajax请求返回），再将对应的回调加入到一个任务队列中等待执行，任务队列分为宏任务队列和微任务队列当执行栈中的同步任务执行完毕后，会执行所有微任务，清空微任务队列。
2024-05-10 16:52:30
2391
236
原创 数据复制的艺术：深拷贝与浅拷贝在JavaScript中的实现方式
当我们处理JavaScript中的数据时，深拷贝和浅拷贝是两个非常重要的概念。它们涉及如何复制对象和数组，以及如何处理复杂数据结构。在这篇博客中，我们将深入探讨深拷贝和浅拷贝的概念，解释它们的区别以及如何在JavaScript中实现它们。
2024-04-29 18:29:51
3239
127
原创 JavaScript排序大揭秘：手绘图解6大常见排序算法，一网打尽
本文用图解总结梳理了6种常见的排序算法，包括冒泡排序、选择排序、插入排序、快速排序、归并排序和堆排序，探寻常见排序算法的奥秘与实现，一网打尽！
2024-04-15 22:52:00
2673
99
原创 面试官：请实现一个接口错误重试功能
接口错误重试指的是在网络不稳定的情况下，接口请求可能会因为网络超时、服务器错误或其他原因导致失败，这时，可以通过接口重试功能，当前端发起的请求在遇到错误时可以进行自动重试，有效地提升应用的稳定性和用户体验。
2024-04-15 12:56:05
1267
53
原创 TypeScript魔法指南：解锁类型安全的新境界
TypeScript（简称 TS）是微软公司开发的一种基于JavaScript 语言的编程语言。它是JavaScript 的超集，其目的是增强 JavaScript的功能，本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
2024-03-27 21:06:19
1978
127
原创 不要在代码中随便使用try...catch了
能被try...catch捕捉到的异常，必须是在报错的时候，线程执行已经进入try...catch 代码块，且处在 try...catch 里面，这个时候才能被捕捉到。因此，在代码中不要再随便写try...catch了，异步错误是无法被捕获的，而且像Promise有它自己的异常捕获方法，比try...catch更好用。
2024-03-11 18:44:51
2502
288
原创 【面试】盘点10个高频的前端算法题，你全都会了吗？
现在前端的面试中，算法出现的频率越来越高了，大厂更是必考算法 。本文就来分享一下10个常见的前端算法题，重要的地方已添加注释，如有不正确的地方，欢迎多多指正。
2024-02-16 12:30:10
2930
171
原创 最近nvm安装报错的原因找到了——npm原淘宝镜像正式到期！
最近淘宝原镜像域名（registry.npm.taobao.org）的HTTPS证书正式到期。如果想要继续使用，需要将npm源切换到新的源（registry.npmmirror.com），否则会报错。🔥如果此文对你有帮助的话，欢迎💗关注、👍、⭐✍️评论支持一下博主~
2024-02-02 20:17:32
3895
139
原创 10个常考的前端手写题，你全都会吗？（下）
本文总结了10个前端常见的手写功能，你是不是全都掌握了呢，欢迎在评论区交流。🔥如果此文对你有帮助的话，欢迎💗关注、👍、⭐✍️评论支持一下博主~
2024-01-24 14:06:34
10863
150
原创 10个常考的前端手写题，你全都会吗？（上）
本文分享了10个常见的JavaScript手写功能。🔥如果此文对你有帮助的话，欢迎💗关注、👍、⭐✍️评论支持一下博主~
2024-01-19 13:52:06
8465
246
原创 使用lodash原地起飞，总结了几个常用的lodash方法
Lodash是一个流行的JavaScript实用工具库，提供了许多高效、高兼容性的工具函数，能够方便地处理集合、字符串、数值、函数等多种数据类型，大大提高工作效率，本文总结了一些常用的lodash工具方法。
2024-01-14 13:25:12
3170
257
原创 从three.js旋转动画，我了解了requestAnimationFrame
three.js中使用requestAnimationFrame来实现动画的渲染，而不使用setInterval实现。requestAnimationFrame告诉浏览器希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。通俗点讲就是该API的调用频率取决于浏览器的刷新率，也就是说浏览器屏幕刷新多少次，它就执行多少次，一般为每秒60次，可以将其理解为专门用来实现动画效果的api，让浏览器流畅的执行动画效果。
2024-01-08 15:45:43
6587
224
原创 【Threejs】代码+图文带你快速上手
在上篇文章中，我们已经介绍了three.js，并使用vite搭建了three.js的开发环境，实现了第一个3D场景。本文就来继续分享一下three.js的相关知识，通过代码+图文带你快速上手three.js。🔥如果此文对你有帮助的话，欢迎💗关注、👍、⭐✍️评论支持一下博主~
2024-01-08 15:44:54
3955
125
原创 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
6047
174
原创 一篇讲透：箭头函数、普通函数有什么区别
本文主要总结了箭头函数和普通函数的几大区别，箭头函数是ES6（ECMAScript 6）新增的使用箭头（=>）语法定义函数表达式的能力。任何可以使用函数表达式的地方，都可以使用箭头函数，并且它的语法比传统的函数表达式更加简洁。箭头函数虽然语法简洁，但也有一些场合不适用，需要根据不同的场景选择使用合适的函数。
2023-12-25 19:54:49
6433
279
原创 还在用nvm？来试试更快的node版本管理工具——fnm
node版本管理工具，实现轻松地在node版本之间进行切换，如今市场上其实存在很多的node版本管理工具，其中最为流行的nvm也有一些缺点，如下载Node版本，速度较慢，而fnm作为一个用Rust构建的Node.js 版本管理器，速度快，并且支持跨平台。
2023-12-21 09:58:09
6659
229
原创 【Canvas】绘制风速热力图
本文分享了如何使用canvas来绘制色卡和风速热力图，以及整个过程中所涉及到的数据处理。🔥如果此文对你有帮助的话，欢迎💗关注、👍、⭐✍️评论支持一下博主~
2023-12-14 09:54:22
4704
251
原创 【Canvas】记录一次从0到1绘制风场空间分布图的过程
本文主要记录了一次自己使用canvas从0到1绘制风场空间分布图的经历，整个过程还是蛮复杂的，不过也刚好巩固了一下自己的canvas知识，将其运用到了实践中，同时也发现自己对知识的理解其实还存在许多的不足，需要继续努力！🔥如果此文对你有帮助的话，欢迎💗关注、👍、⭐✍️评论支持一下博主~
2023-12-12 18:24:19
4452
192
原创 我从来不理解JavaScript闭包，但我用了它好多年
本文主要介绍了被誉为JavaScript中最难理解的概念之一的闭包，闭包的表现形式多样、应用广泛，日常开发中其实都有闭包的身影，在实际的开发过程中，合理地使用闭包可以帮助我们更加高效地编写代码，提高程序的性能和可维护性。
2023-12-03 23:48:27
5492
247
原创 10分钟的时间，带你彻底搞懂JavaScript数据类型转换
本文详细介绍了js中的3种数据类型转换规则，以及有着许多坑的隐式类型转换，并且通过一些经典的案例让大家清楚的理解其转换规则。
2023-11-30 09:34:01
1821
110
原创 浏览器中实现可视化的方式有哪几种？带你盘点一下
本文主要介绍了在浏览器中实现可视化的4种方式：HTML+CSS、Canvas2D、SVG、WebGL，分别使用4种方式绘制了一个简单的柱状图，不同方式有各自的优缺点，实际应用中，也应该根据具体的场景来选择合适的方案实现可视化，以达到最佳效果。
2023-11-27 09:32:56
2420
160
原创 webpack快速上手之搭建cesium三维地球环境
CesiumJS是目前主流的一款三维地图框架，是一个跨平台、跨浏览器的展示三维地球和地图的JavaScript库，通过WebGL技术实现图形的硬件加速，不需要任何插件支持。Webpack是目前最流行的前端构建工具，可以让开发更加高效。本文就来分享一下如何使用webpack搭建Cesium三维地球环境。
2023-11-20 10:31:32
2318
215
原创 150行代码实现一个极简的Canvas多功能画板
HTML5提供的Canvas标签能实现很多有趣的效果，本文就来分享一下如何使用Canvas来实现一个极简的多功能画板。主要功能包括：画笔、橡皮擦、清屏、前进和后退。
2023-11-01 19:51:12
2635
202
原创 一杯茶的时间，带你使用Express框架在服务端渲染图片
大家好，我是南木元元，热衷分享有趣实用的文章，大家知道前端如何绘制出三角形吗？相信很多人的答案都是canvas，使用canvas确实很容易就能实现，但你知道如何在服务端实现吗，本文就来聊聊如何在node服务端绘图。
2023-10-22 20:32:11
1610
179
原创 前端性能优化之防抖&节流
防抖和节流是前端开发中常用的两种性能优化技术。为什么需要防抖和节流呢？两者目的都是为了防止某个时间段内操作频繁触发，造成性能消耗。防抖：在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。节流： n 秒内只执行一次事件，即使n 秒内事件重复触发，也只有一次生效。
2023-10-06 23:56:19
2509
108
原创 Vue3实现图片懒加载及自定义懒加载指令
图片懒加载是一种常见性能优化的方式，它只去加载可视区域图片，而不是在网页加载完毕后就立即加载所有图片，能减少很多不必要的请求，极大的提升用户体验。图片懒加载的实现原理：在图片没进入可视区域的时候，只需要让 img 标签的 src 属性指向一张默认图片，在它进入可视区后，再替换它的 src 指向真实图片地址即可。本文就分享一下在vue3中实现图片懒加载的几种方式，包括使用插件以及自定义v-lazy指令。
2023-08-12 16:56:48
6682
109
原创 JavaScript 简单实现观察者模式和发布-订阅模式
观察者模式通俗点讲就是：定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。发布订阅模式跟观察者模式很像，他们其实都有发布者和订阅者，但是他们是有区别的：观察者模式的发布和订阅是互相依赖的，发布订阅模式的发布和订阅是不互相依赖的，因为有一个统一调度中心。如何用js来实现观察者模式和发布订阅模式。
2023-07-27 22:48:33
2583
58
原创 canvas自定义绘制顺序解决遮挡问题
通过自定义绘制顺序来解决canvas的叠加遮挡问题。定义一个数组，把所有要执行的函数方法push到数组中，即把函数当做数组的元素存储在数组中，这样就可以通过数组的方法来操作这些函数，然后对函数按照自定义的顺序进行排序，需要先执行的放前面，后执行的放后面，最后遍历函数数组并执行其中的每个函数即可。
2023-06-24 15:53:49
2019
51
原创 Vite配置Proxy代理解决跨域问题
vite配置proxy代理属于node中间件代理，简单来说，就是通过开启一个代理服务器，来充当一个中间层的角色，拦截前端发起的请求。代理服务器实际做的事：会在前端页面发起请求时，将请求**转发**到真实的后端服务器，然后响应给浏览器。利用服务器之间不存在同源策略限制的原理，整个过程通过代理服务器完成，浏览器是无感的，就会绕过浏览器的同源策略。
2023-05-29 10:11:40
14723
36
原创 vue常用组件通信方式及vue2和vue3写法对比
本文结合vue2和vue3写法对比，总结了vue中组件通信常用的几种方式。父子组件：props / $emit、 ref / $parent隔代组件：provide / inject、eventBus、Vuex / Pinia兄弟组件：eventBus、Vuex / Pinia写作不易，你的一赞一评，就是我前行的最大动力。如有问题，欢迎指出！
2023-05-19 23:00:20
1422
29
原创 vue3+vite项目中封装并使用svg图标
vue3+vite项目中封装并使用svg图标。项目中有很多地方需要用到svg图标，Element Plus 组件库提供了一套常用的图标，但是往往不能满足需求，而网上比较全的就是阿里图标库，本文就来介绍下如何将阿里图标库中的svg引入到自己的项目中。本文的项目使用vue3+vite来构建，可以使用第三方的vite-plugin-svg-icons插件，来引入svg图标。
2023-05-09 19:43:20
3022
22
原创 快速上手WebGL，代码+图解手把手教你使用WebGL一步步实现热力图
使用webgl绘制热力图。webgl中有顶点着色器和片元着色器，一个用于计算顶点位置，一个用于计算颜色值，所以，关键就是把数据传个这两个着色器。片元着色器，首先设置了float为中等精度，然后通过v_Color接收来自顶点着色器的颜色并将其设置给内置变量gl_FragColor，其中通过内置变量gl_FragColor来确定顶点像素颜色。缓冲是程序发送给GPU的数据，attribute用来从缓冲中获取所需数据，并将它提供给顶点着色器。
2023-05-04 15:02:01
1116
16
原创 js中的事件冒泡与事件捕获
js中的事件冒泡与事件捕获。当点击黑色容器时，开始进行事件捕获，Js事件流从window上往事件触发处传播，遇到注册的捕获事件就会触发；但是捕获阶段默认是不处理的（addEventListener第三个参数默认是false）,紧接着传播到事件触发处，触发注册的事件，打印div3，然后进行冒泡阶段从事件触发处 往window上传播，遇到注册的冒泡事件会触发，打印div2，再打印div1。就是因为点击了盒子的子元素（黄色和红色部分），事件冒泡到了绑定拖拽事件的父元素身上（蓝色部分），导致触发的是拖拽效果。
2023-03-24 10:58:23
2115
16
原创 使用echarts遇到的问题及解决
大家好，我是南木元元，热衷分享有趣实用的文章。echarts是目前非常流行的一个开源可视化图表库，本文就来分享一下我在使用echarts中所遇到的问题以及是如何解决的。
2022-05-04 18:54:08
5961
22
原创 WebGL简介
大家好，我是南木元元，热衷分享有趣实用的文章。HTML的元素为JavaScript提供了动态创建图形的API。第一种是Canvas，一般只能做2d操作，用canvas.getContext(“2d”)来建立一个CanvasRenderingContext2D二维渲染上下文。第二种是WebGL，通过canvas.getContext(‘webgl’)就能获取WebGL的3d上下文，进行3D的渲染。这两种都是常用的可视化方式，本文主要来介绍一下WebGL的使用。
2022-03-24 20:17:57
7155
11
原创 threejs绘制风羽
大家好，我是南木元元，热衷分享有趣实用的文章。本文来分享一下如何使用three.js绘制风羽。在气象学中，风羽是用于表示风向和风速的符号图标。它们被用于气象地图、天气预报以及其他气象图表中，以传达风的特征和方向。风羽通常由一个圆圈或一个小箭头表示，箭头的方向表示风的方向，箭头的长度或羽毛的数量表示风的速度。单一风羽符号：它由一个圆圈表示风的方向，没有羽毛或箭头来表示风速。这种符号通常用于表示静风或风速较低的情况。简单的羽毛符号：它由一个箭头或一到三个羽毛表示风的方向和风速。
2022-03-21 21:41:00
647
12
原创 【Cesium】在地球上绘制标注
cesium在地球上进行标注。其中传入的viewer就是初始化cesium创建的视图容器，它提供了创建和控制3D场景所需的所有基本功能，包括加载3D模型、添加图像覆盖物、设置相机位置和方向、处理用户输入等。cesium提供了自带的PointPrimitiveCollection点集合，可以在集合中添加和删除点，并显示到地球上。封装相应标注站点位置的方法，点击确定时，调用drawSite方法并把当前选中的经纬度传入即可。点击选取按钮时，获取鼠标的实时经纬度和高度信息，传入绘制标注方法即可。
2022-03-03 22:30:36
4118
9
vue中集成cesium和threejs
2023-12-30
vue3自定义指令实现图片懒加载
2023-12-30
php小项目-登录和注册的实现
2023-12-29
网页设计-手绘日记网站
2023-12-29
canvas多功能画板
2023-11-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人