Reflect 的作用这个对象一般都是和 Proxy 配合使用的，这里就不多介绍 Proxy 了。在学 Reflect 时候很疑惑，为什么要用这个对象，获取对象属性不是可以通过 obj.name 直接获取吗？为什么要多此一举去使用 Reflect.get(obj, name)来获取呢？ 我们首先来看看 Reflect 的基本使用。mdn-Reflect 基本描述：Reflect 是一个内置的对象，

大文件上传逻辑梳理背景如果文件太大，比如一个视频几个 G，直接上传，可能出现连接超时，也存在超过服务器允许上传文件的大小限制。 为了解决这个问题，我们可以将大文件进行分片上传，每次只用上传很小的一部分，然后再有后端去组装这些分片，就可以形成一个完整的文件。 方案 前端将大文件切片，拆分成一个一个的chunk。 将切片传递给后端，每个切片都带有唯一标识（hash）和索引值（index），以便于后端处

JS 大数如何处理在 JavaScript 中，超过Number.MAX_VALUE的数值被认为Infinity（正无穷大）。如果要处理超过Number.MAX_VALUE的数值，可以使用第三方库，例如：big.js、bigNumber.js、decimal.js 等库，可以处理任意进度的数值，或者使用 BigInt 数据类型。 不依赖外部库，如何处理当数值超过MAX_VALUE时，可以使用Big

记录一次前端优化企业项目随着部门项目业务功能越来越多，发现打包速度慢、体积较大，想着能否针对 webpack 做优化。 优化打包速度首先要找一个衡量速度的工具，webpack 插件speed-measure-webpack-plugin，可以测量所有 loader 花费的时间。 123456const SpeedMeasurePlugin = require("speed-measure

Redux 原理分析Redux 是一个管理全局应用状态的库，redux 可以理解为是一个上帝视角，包含了应用所需要的东西，发放给需要的组件，redux 更新了也会去通知对应的组件。 回顾 redux 的使用学习原理之前，肯定需要熟练的应用，这样才能更好的理解原理。 1234567891011121314151617// 创建修改store的纯函数function xxReducer(state

CSS 实现 div 拉伸背景：目前页面左侧是 tree，由于 treeNode 的 title 名称太长，都用省略号展示，产品要求可以通过鼠标调整左侧宽度，以达到可以看全 title。 效果图大致如下： 2 个核心点div 宽度需要自适应width 默认情况下, 块级元素不设置宽度, 默认为整个屏幕宽度或者和父级同宽，如果元素脱离了文档流(浮动或者定位), 那么元素的宽度由元素的内容决定 添加

初步了解轻量高效的 React 状态库 JotaiJotai 是什么Jotai 是状态管理库，原子化思想，提供一个最基础的原子，通过组合原子来构建状态，并且基于原子依懒性进行优化渲染，避免了 React 额外的渲染。Atom 在 Jotai 中是状态单位（原子），可以更新也可以被组件订阅（使用useAtom），当 Atom 更新了，那么订阅这个 Atom 的组件便会重新渲染。 创建原子过程就和使

Typescript 中 interface 和 type 区别相同点都可以描述对象或者数组 12345678910111213interface User { name: string; age: number;}interface SetUser { (name: string, age: number) => void;}type User

水印功能实现应业务要求，需要根据登录用户的名称、角色、当前日期生成水印功能。 大致样子： 分析思路系统上重复展示名称、角色、日期，首先我们要生成这些内容，然后无限重复，大致可能分成两个步骤： 利用 canvas 绘制文字，然后生成图片。 系统背景使用这个图片，并且 x 和 y 轴重复。 根据提供信息绘制 canvas123456789101112const canvas = document

React 状态提升、Context 使用及带来的问题分析与解决在我们平时开发中，避免不了一种场景就是组件状态共享，A 和 B 两个组件有公共的状态，常见的处理方法： 状态提升将公共的 state 提升至它们的公共祖先，由祖先提供 state 和修改 state 的逻辑，这样有可能导致重新渲染一颗巨大的组件树。 1234567891011121314151617181920212223242526