余大侠在劈柴-优快云博客

原创对websocket心跳监测与应用场景再学习

心跳监测是一种用于保持Websocket连接活跃的机制，它的主要目的是监测连接是否仍然有效，并在连接断开时及时采取措施（如重连），心跳监测通常通过定期发送和接收小型数据包（称为心跳包或Ping或Pong帧）来实现；// 服务器发送 Ping 帧}, 30000);// 每 30 秒发送一次 Ping 帧// 客户端监听 Pong 帧});

2025-01-14 22:10:28 455

原创什么是websocket心跳监测

最近在工作的时候遇到有面试官问我心跳监测的问题，特来复盘一下。WebSocket是一种在单个TCP连接上进行全双工通信的协议。它允许服务器和客户端之间实时双向通信，不同于HTTP的请求-响应模式。

2024-10-20 20:42:12 520

原创 Pinia持久化的原理，有哪些实现方式，这个插件做了什么事情

当启用 Pinia 持久化时，插件会在特定的时机（比如应用启动时和状态变更时）将 store 中的数据序列化并存储到指定的存储介质中。在应用重新加载时，插件会从存储介质中读取数据并反序列化后恢复到相应的 store 中，使得应用的状态得以延续，用户不会因为页面刷新而丢失之前的操作状态。Pinia 是 Vue.js 的状态管理库，Pinia 持久化的主要原理是利用存储机制（如浏览器的本地存储或会话存储）在页面刷新或重新加载时保存和恢复应用的状态数据。

2024-10-17 23:32:33 797

原创实现路由懒加载及其坏处

路由懒加载是一种优化手段，它允许将路由对应的组件分割成不同的代码块，然后当路由被访问到的时候才加载对应组件。这样可以减少应用的初始加载时间，因为它不需要一开始就加载所有的路由组件，而是按需加载。routes: [})当访问/foo路由时，Foo.vue组件才会被下载和解析；在使用react router中，懒加载需要用到Suspence,lazy<Router><Switch></Switch></Router>

2024-04-28 09:09:31 370

原创到底用对BFC了吗？

而且如果其中一个p标签的margin为90px，两个p标签margin值还是100px，以最大的为准；前面讲到，每个元素的左外边距与包含块的左边界相接触因此，虽然.aslide 为浮动元素，但是 main 的左边依然会与包含块的左边相接触而 BFC 的区域不会与浮动盒子重叠。而 BFC 在计算高度时，浮动元素也会参与，所以我们可以触发.par元素生成 BFC，则内部浮动元素计算高度时候也会计算。BFC目的是形成一个相对完全独立于外界的空间，让内部的子元素不会影响到外部的元素；

2024-04-26 15:29:36 956 1

原创讲讲用到的promise.all

是 JavaScript 中 Promise API 的一个方法，它用于同时处理多个 Promise 对象。接受一个 iterable（如数组）作为输入，其中每个成员都是一个 Promise。会创建一个新的 Promise，这个新的 Promise 的状态取决于传入的所有 Promise。会并发地执行所有的 Promise，即不是按顺序一个接一个执行，而是同时开始执行。方法来处理错误，或者可以在每个 Promise 中分别处理错误。一旦遇到拒绝就会立即拒绝，所以它通常需要配合。

2024-04-11 16:32:35 212

原创在vue中调用和风天气城市与天气api

我这里设计的是通过用户IP获取当前所在地区，再通过所在地区获取当地天气，其中的参数什么的详情请见官方文档，我这里只用了城市，天气，温度，风向的参数。这里因为和风天气的链接原因，所以我选择使用fetch，但是还有一个很重要的点就是return response.json();项目有设计这个板块，网上搜了一下发现对应博客已经很老了，官方文档也没有匹配对应介绍，

2024-03-29 10:58:34 665 1

原创使用es6中的flat方法秒数组扁平化

是对数组的一种操作，定义是将原数组部分或全部子数组删除，并替换为该子数组中的实际元素。第一层数组中元素的深度被认为是 0。如果没有ｎ的限制，arr.flat（）里是Infinity（无限），即 return arr.flat(Infinity)这道题目的解决方法很多，可以使用reduce或者递归等思想，这里我们主要了解es中的flat方法，方法的原理是遍历原数组，对于每个元素，如果它是一个数组，就按照指定的深度递归地调用。如果它不是数组，就直接将其包含在新数组中。arr 和它的深度 n ，并返回该数组的。

2024-03-25 15:24:42 253 1