夜空孤狼啸的博客

WebSocket是一种用于在Web应用程序和服务器之间建立实时、双向通信的协议，通过单一TCP连接实现持久化数据传输。其优势包括实时性、双向通信和减少网络负载，但劣势在于需要浏览器和服务器支持、额外开销以及潜在的安全问题。WebSocket协议基于TCP，支持二进制和文本数据，通过握手协议建立连接，并保持开放状态以实时传递数据。WebSocket的生命周期包括连接建立、开放、关闭和关闭完成四个阶段，需处理连接关闭事件以确保应用稳定性。心跳机制用于检测客户端与服务器的连接状态，通过定时发送ping数据包确认

注意：这里需要转换的文本 有指定格式（大家可以根据具体情况具体转换，方法一样的）： tab分隔(\t) 以及换行（\n）

在前端开发中，Base64编码和File对象是处理文件数据时经常使用的两种方式。Base64编码常用于将二进制数据转换为文本格式，便于在网络中传输。而File对象则提供了处理用户上传文件的接口。本文将深入探讨这两种数据格式之间的转换，并通过多个示例来展示如何在实际开发中运用这些技术。

前端用input读取 .xlsx文件的内容项目中我用的ant-design-vue，不过用input一样的大同小异注意区分xlsx库和node-xlsx库的使用环境。

View Transitions API 提供了一种机制，可以在更新 DOM 内容的同时，轻松地创建不同 DOM 状态之间的动画过渡。同时还可以在单个步骤中更新 DOM 内容。

邮箱授权码: 邮箱授权码需要开通，以QQ邮箱为例，其它大同小异。

前端项目重新打包部署后，由于用户没及时更新页面，导致配置存的还是旧逻辑值，引发了线上问题；所以进行版本更新的通知功能就很有必要上马了。

luckyexcel 编辑预览excel文件支持后端传文件流预览编辑，也支持选择本地文件编辑预览

前端各种文本文件预览 文本编辑excel预览编辑 pdf预览word预览 excel下载pdf下载word下载各种文本文件预览（pdf, xlsx, docx, cpp, java, sql, py, vue, html, js, json, css, xml, rust, md, txt, log, fa, fasta, tsv, csv 等各种文本文件）其中 除pdf，xlsx，docx之外的文本还可以修改，xlsx想要修改看我另一篇博客【先空着这两天就补上去】

js实现图片放大镜功能，简单明了，js图片放大镜 写购物项目的时候，需要放大图片，这里用js写了一个方法，鼠标悬浮的时候放大当前图片

【代码】axios封装以及详细用法axios请求拦截响应拦截请求重试请求终止。

【代码】前端开发者能不能写单行代码， 直接体现一个人的基础水平！！！

主版本（大版本） 必须 一般代表了项目的重大架构变更，如进行不兼容的API更改。此版本（次要版本） 必须 一般代表了一些功能的增加或变化，但没有架构的变化。增量版本（小版本） 必须 一般是一些小的bug修复，没有重大功能变化。预发布版本或版本编译信息 不必须 添加到最后，作为扩展。大版本.次要版本.小版本，如：1.0.0。

Web Workers 是在浏览器中运行 JavaScript 代码的一种机制，它们在主线程之外运行，可以在后台执行一些任务而不阻塞用户界面。Web Workers 使得在浏览器中执行多线程操作成为可能，这有助于提高性能和响应性。

TypeScript 泛型工具类型在实际项目中的应用在TS中内置了一些常用的工具类型, 用来简化我们TS中的一些常见操作 这些泛型工具类型都是基于泛型实现的, 并且是内置的, 我们也可以直接在代码中使用。

在前端项目实际开发过程中，经常需要对各种各样的类型进行下载，因为我不是前端出生，就自己在网上学习最后使用到自己的项目当中，代码冗余等低级错误还请多多指导。我发现用 Blob 二进制进行文件下载的比较多，我就采用了这一方式。下面是一份 Blob 的配置关系对应表，在我们使用Blob做下载功能时 ，根据需要下载的文件类型修改 type 值进行下载即可。

前端虚拟滚动列表 vue虚拟列表。在大型的企业级项目中经常要渲染大量的数据，这种长列表是一个很普遍的场景，当列表内容越来越多就会导致页面滑动卡顿、白屏、数据渲染较慢的问题；大数据量列表性能优化，减少真实dom的渲染看图：绿色是显示区域，绿色和蓝色中间属于预加载：解决滚动闪屏问题；大致了解了流程在往下看；

vue.draggable.next 是一款vue3的拖拽插件,是vue.draggable升级版本，同样是基于Sortable.js实现的，你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景，本人在工作台和多选项卡环境下实践过，比自己实现的拖拽效果优雅多了，使用的方法也非常简单但和vue2版本的用法有一些vue语法上的区别，本文档将会列举全部的属性和事件。

作为开发人员，利用这些工具无疑将增强您的项目，并使其在竞争日益激烈的数字环境中脱颖而出。网络借鉴，如有侵权，联系我删除。

前端预览pdf的几种方法

#微前端【代码】项目中使用firame引入html 解决路由错乱问题。在项目中使用firame引入html，引入的html中有路由跳转，当点击html页面中的路由跳转时，浏览器history会记录次路由，当在引入iframe返回上一级的页面中使用 router.go(-1)就会返回iframe中距离的路由，这样不符合逻辑解决方案如下：主要是由于浏览器history记录了iframe嵌入页面的路由信息，这个信息不论是iframe内的地址跳转，还是iframe src的切换，都会被记录，下面给出解决方案

若依项目，富文本上传报错：Failed to execute ‘setItem’ on ‘Storage’: Setting the value of ‘sessionObj’ exceeded the quota.

前端项目常用的方法

前端项目用常用的方法

【代码】js自定义滑块。

/ touchcancel: //系统取消touch事件的时候触发，这个好像比较少用。console.log(wheelDelta + ‘滑轮向上滚动’);console.log(wheelDelta + ‘滑轮向下滚动’);// touchmove: //手指在屏幕上滑动式触发。// touchstart: //手指放到屏幕上时触发。// touchend: //手指离开屏幕时触发。//火狐使用DOMMouseScroll绑定。//其他浏览器直接绑定滚动事件。

注意安装animate.css版本，我这里用的v4.1.1 ，animate__animated是基类必须使用的(因为安装的animate版本是4.x，使用时要注意对应的所有类名都以animate__开头，并且还要配合animate__animated一起使用！在main.ts文件中引入。

js中必备数组方法 Array方法 和 Math方法 以及 Object方法：Math.abs()函数，返回一个数的绝对值Math.min()方法，是可以返回指定一组数据中最小值。Math.max()方法，是可返回指定数据中最大值。Math.ceil()函数，向上取整Math.floor()方法，向下取整Math.round()，返回的是一个数字四舍五入的整数。Math.random()函数，返回一个浮点，伪随机数范围从0到小于1，从0往上不包括1。Math.trunc()函数，返回的是一个数的整数部分

【代码】nodejs 读取xlsx文件内容。

前端写ip地址框输入

Highcharts 写 venn图 （韦恩图），以及解决项目中venn的报错Highcharts 写 venn图 鼠标悬浮效果以及点击事件

执行完一个，再去执行另一个是同步，如promise().then()所有的一起执行是异步下面例子是同步，执行完 test再去执行test2最后test3，（test2里面有定时器）

前端导出png图片和各种文件的下载

ts定义数组常用的三种方法： - 「类型 + 方括号」表示法：最简单的方法是使用「类型 + 方括号」来表示数组； - 数组泛型：也可以使用数组泛型（Array Generic） Array 来表示数组； - 用接口表示数组；

ant design 中 Tree、TreeSelect的使用

echarts详细参数介绍

react中，antd组件中的upload实现，文件的上传，文件的下载，导出，批量导出（直接调接口），上传额外的参数（data）

监听localstorage的变化多数组取交集判断两个数组是否有相同元素 返回相同元素（数组）判断hex颜色值是深色还是浅色随机生成深浅样色js判断是手机端还是移动端使用UA判断使用媒体查询判断fetch直接读文件内容，解决乱码问题前端导出文件将表格导出xlsx文件将表格导出 txt fasta fa csv tsv等文本文件js将二维数组转为 txt tsv csv fasta fa 等文本文件将字符串下载保存为 txt fasta fa csv tsv等文本文件下载文件文件

面试题：深拷贝方法、for in 和for of区别 、this指向、改变this指向

- 全局范围内- 函数调用- 作为对象方法的调用- call/apply/bind 的调用- 作为构造函数调用