TypeScript 基础介绍TypeScript 是 JavaScript 的一个超集，添加了静态类型和基于类的面向对象编程。使用 .ts 作为文件扩展名。 安装 使用 npm（需要安装 Node.js）。在终端中运行以下命令： 1npm install -g typescript 使用TypeScript VSCode 扩展 数据类型布尔值(boolean)布尔值用于存储true...

微信小程序分包介绍微信小程序对打包上传有大小限制，当代码包大于2MB时无法上传，需要对小程序进行分包。关于分包还有以下限制： 每个使用分包小程序必定含有一个主包。 单个分包/主包大小不能超过 2M。 整个小程序所有分包大小不超过 30M。 声明 subPackages 后，将按 subPackages 配置路径进行打包，subPackages 配置路径外的目录将被打包到主包中。 ...

Vue3Template介绍Vue3Template 是一个基于Vue3的模板项目。 项目地址集成了 vue-router pinia element-plus 及自动导入插件 tailwindcss 封装了 fetch 拦截器 目录结构123456789101112131415161718192021222324252627Vue3Template│ .env.dev ...

WebAssembly介绍WebAssembly(wasm) 是一种编码方式，可以在现代的 Web 浏览器中运行。是一种类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如 C/C++、C# 和 Rust 等语言提供编译目标，以便它们可以在 Web 上运行。也也被设计为可以与 JavaScript 共存，允许两者一起工作。 使用wasm由C/C++、C# 和...

WebWorker介绍是一种可由脚本创建的后台任务，任务执行中可以向其创建者收发信息。Worker() 构造函数创建一个 Worker 对象，该对象执行指定的 URL 脚本。这个脚本必须遵守同源策略。URL 脚本本质上依然是 JS 文件。 使用new Worker(aURL, options); aURL：worker脚本的URL。 options：可选，一个对象，包含以下属性。 type...

优化Echarts数据过多时的卡顿介绍当Echarts数据量过大时，会消耗大量性能，导致页面卡顿。此时需要对Echarts进行优化。 解决方案dataZoomdataZoom组件，用于区域缩放，概览数据整体，或去除其他数据。当然，只显示区域的数据量，可以大大减轻渲染压力。但使用dataZoom组件不能一下全部显示数据，需要手动选择。用户体验可能会受到影响。常用的配置项 12345678910...

前端导出自适应列宽的Excel介绍要根据用户选择将数据导出成自适应列宽的Excel，这边使用了exceljs库来实现。 实现引入库使用包管理工具引入库。我使用的是pnpm 1pnpm install exceljs 在需要用到的地方引入库。 12// 引入import * as XLSX from "xlsx"; 实现通过workbook创建生成excel文件。自适应...

监听div的动态宽高介绍resize或者onResize事件是window才有的事件。要监听div的宽高改变，就要监听window的resize后，做出了改变。而只是改变div的宽度呢，比如侧边栏展开闭合，不改变window的宽度，而只是改变div的宽度。使用 ResizeObserver api 可以单独监听div的宽高。 使用123456const resizeObserver = ne...

WebSocket介绍WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。主要用于代替 Ajax 轮询。节省服务器资源和带宽，进...

重排与重绘介绍重排(回流)与重绘是当页面发生改变时，浏览器重新计算画面的操作。 重排：浏览器重新计算页面元素位置，并重新计算页面元素大小。 重绘：重新绘制页面元素。 当重排时一定会发生重绘。现代浏览器会对频繁的回流和重绘操作进行优化。浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把...