前端开发记录

webpack本质原理简单入门 首先这边只谈论最纯粹的webpack不带任何 loader / plugin 但webpack本身原理是非常简单的，我们可以直接将划分为四个模块的功能： 依赖分析（De

什么是AST？ AST（Abstract Syntax Tree，抽象语法树）是源代码的抽象语法结构的树状表示，它以树形结构表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。 如何查看A

用户端缓存 浏览器通常会缓存静态资源（如JS、CSS、图片等），回滚代码后，用户可能仍会加载到缓存中的旧资源。 解决方案： 缓存控制：在HTTP头中设置Cache-Control和Expires，控制

前端设计模式 模板方法模式 是什么 定义算法骨架的设计模式，允许子类在不改变算法结构的情况下重新定义算法的某些步骤。 怎么使用 创建一个基类，定义一个模板方法，该方法调用由子类实现的抽象方法。 应用场

切片上传是什么？ 将大文件分割成小块（分片），分别上传到服务器，然后在服务器端重新组装成完整的文件。这种方法可以减少单次上传的负载，同时更容易处理网络中断或失败的情况。 如何使用 首先明确切片上传的四

说到强制渲染组件，在开发过程中其实遇到并不多，但有时候你总能碰到一些奇怪的组件，不用强制渲染就没办法正确地开发。 组件例子 首先来看一个element的组件DatePicker 日期选择器。 form

如何监听异步生成的元素变化 在开发的过程中，可能会遇到以下的情况：异步生产两个元素A和B，但是B需要根据A的高度来判断是否显示。 无效的检测 因为异步的原因，在这边的targetElementRef.

Vue 3 自定义方法与指令全面指南 在实际项目中，我们常常需要使用自定义的指令和组件，以满足特定的业务需求。Vue 3 提供了简单而强大的全局注册机制，使得我们可以轻松地在整个应用程序中使用这些自定

Node.js fs 模块操作 在Node.js中，fs模块是用于文件系统操作的核心模块，提供了许多与文件和目录相关的方法。 1. 读取文件内容 fs.readFile(path, options,

基于antd Select创建支持分页下拉的下拉框组件 在工作的过程中，有些下拉框的数据非常大，需要前端传递分页参数进行后端请求，有时还需要进行支持搜索，所以抽离出这么一个组件是非常有必要的，那么话不

storybook配合vite + react生成组件文档 直接命令行初始化项目 并删除多余文件，并创建必要文件夹 建立一个简单的组件Button在package中 加入storybook各种配置 可

谈论到前端的数据缓存，大多数人第一想到的就是Web Storage 或 Cookie，也是开发过程中常用的。可当我们有一个缓存超大数据的时候，以上两个就完全无法帮助我们了，而此时为何不试试Indexe

在登录的过程中，人机校验一般都是绕不过去的问题，这次就记录一个非常简便的人机校验——reCAPTCHA。 注册项目和apikey https://www.google.com/recaptcha/ab

最近用jsoneditor做一个json数据的可视化顺便记录一下。 jsoneditor JSON Editor 是一个基于 Web 的工具，用于查看、编辑、格式化和验证 JSON。它具有树形编辑器、

最近用jsoneditor做一个json数据的可视化顺便记录一下。 jsoneditor JSON Editor 是一个基于 Web 的工具，用于查看、编辑、格式化和验证 JSON。它具有树形编辑器、

什么是hooks 不说什么复杂笼统的解释，其实说白了就是一个分装出去的功能函数。什么数据请求、逻辑处理、window监控等等，只要能抽出去的都可以作为一hooks是独立出来。 使用方法 建立 看以上代

vonage使用体验 总体来说，vonage算是比较偏向于原生的一个音视频三方包，提供了很多类似原生的api，有些甚至就是原生的api接口包了一层。而这样的一种形式也给开发带来了比较舒适的体验，能很清

安装前置依赖 添加启动命令 创建入口文件 在根目录下创建index.js json-server可以模拟接口 以下为模拟的数据，学生的基本信息和基本学习成绩 创建query请求 假设要将两个接口合并成

Form表单的实现原理 原理非常简单：基于vue中的v-model,通过传入的值和规则进行匹配和处理 先看想要实现的功能 这边只谈最常用的提交，重置，校验 Form组件的实现 FormItem的设置

WebSocket 封装库文档 功能概述 本 WebSocket 封装类主要实现以下核心功能： 自动心跳检测机制 断线自动重连 消息事件处理 可控连接关闭 超时断开保护 类结构 构造函数参数 参数名