随笔（一）
随笔（一）最近在看面试八股文，有点无聊，重新回顾了一下生疏的知识点。
一. websocket1. 基本介绍与对比一种基于TCP的应用层协议，浏览器与服务器只需一次握手即可持久连接，进行全双工通讯。
其实就是客户端通知服务器哪些ID的客户端可以处理事件。
特点：服务器可以向客户端主动推动消息，客户端也可以主动向服务器推送消息。
缺点：在服务器端配置比较复杂。
对比：短轮询：每隔一段时间就发送请求，浪费资源；长轮询：服务端收到请求，挂起；SSE：使用流信息让服务器向客户端推送信息。
2. 多tab页通信前端现在常常流行SPA，页面切换基于vue-router，如果逻辑复杂，处理会很麻烦，所以有的功能会利用MPA，那就存在浏览器多tab页通信问题，解决方案如下：
localStorage：同源共享策略，将需要共享的信息通过setStorage(name, val)的方式存储，获取只需监听store事件即可。【同源共享，但存储大小有限制】
websocket：websocket最大的特点就是全双工通信，利用此特点，建立第三方服务器，让每个tab页成为客户端，建立通信。当一个tab页进行信息 ...
js原生复制文本
js原生复制文本到剪切板功能：实现一键复制文本内容，用于鼠标右键粘贴。
简单的模板如下：
123456const textarea = document.createElement("textarea");textarea.value = '要复制的内容';document.body.appendChild(textarea);textarea.select();document.execCommand('copy')document.body.removeChild(textarea);
现对其实现思路进行逐行分析。
首先动态创建 textarea 标签
1const textarea = document.createElement("textarea");
document.createElement()是一个JavaScript DOM方法，用于在文档中创建指定的HTML元素，只需要在JS中调用该方法，并指定要创建的元素的标签名称作为参数。
创建完成后，即可对其进行相关操作，如添加文本内容、设 ...
文件上传及相关操作
文件上传及相关操作1. 基础知识数据传输到后端分为两种：
二级制blob传输：formDate传输
base64传输：转为base64传输
相关对象：
files：通过input标签过来的文件
blob：二进制内容（不可变），包含众多操作方法
formDate：用于与后端传输的对象
fileReader：把文件读取为某种形式，如base64、text
注意：files本质是blob的子类，文件的断点上传、切片都是基于blob。
2. 文件处理首先给定一个input标签，type属性值必须是file。
1<input type="file" name="file" @change="fileChange" />
接着开始对上传过来的文件进行相关处理。
2.1 文件属性限制当你需要对文件的大小、类型做出限制时，可以直接抓取其对应属性。
123456789101112131415161718import { ElNotification } from 'element-plus&# ...
金融科技管理平台
金融科技管理平台2023年9月开始跟随博士参加了研创赛，最终年底拿了研创赛国银，虽然成绩不错，但项目搭建本身个人没吃透。代码的编写，由于本人当时还未系统完成学习，很多功能都是依靠组件库依葫芦画瓢，细节与优化并不完美。
于是今天决定记录一下，将其中重点功能进行叙述，此笔记仅展示项目的部分代码（非个人项目）。
一、环境搭建使用vite搭建（https://www.vitejs.net/guide/#scaffolding-your-first-vite-project）
1npm init vite@latest
然后自己取个项目名字，选择所需开发配套（我这里选择vue、JS即可）。
接着进入项目，安装所需依赖，即可运行。
为了后期管理方便，在src下新建router(路由文件)、utils(公共文件)、views(页面组件文件)、api（地址管理文件）、components（公共组件文件）及asserts。
下载所需依赖包：
1npm i axios vue-router vuex
路由与main.js文件关联。
12345678910111213141516import &# ...
交叉观察器
交叉观察器先简要介绍一下使用背景吧，页面进行滚动时，信息不断呈现（如图片、多行数据等），如果页面一次性加载所有数据，会造成卡顿，所以出现了图片懒加载、无限滚动、组件延迟加载等概念。而实现这些功能的前提是判断信息是否出现在可视区域内，交叉观察器就是一种方式。
1. 基础概念intersectionObserve是浏览器提供的原生构造函数，观察元素和可视区域是否发生交叉。
这里我们要明确一个概念，可视区域不一定指整个浏览器窗口，指的是你想要展示数据的DOM元素的区域。
2. 基本使用因为是构造函数，所以得先初始化。
1let IO = new IntersectionObserver(callback, options);
介绍一下这两个参数：
callback
callback接收两个参数：
entries
一个intersectionObserverEntry对象数组，存储观察元素的信息。原因是观察的对象可能有很多个。
observer
返回被调用的IO实例，通常无需操作。
options
对象形式，记录一些配置信息：
root：被观察元素，不配置默认是浏览器窗口
t ...