Yang's Blog

摘要： 拖拽过程中，如果原本的元素消失了，onDrop还能触发么？具体表现是什么？ 即使原始元素在拖拽过程中被移除了，只要拖拽操作未被中断，onDrop 事件仍然可以触发 拖拽数据独立存储拖拽操作一旦开始（dragstart），浏览器会将拖拽数据存储在独立的 DataTransfer 对象中。即使原始元素被 阅读全文

摘要： 前端应用的典型分层为： 表现层（Presentation Layer）：组件树/Virtual DOM管理 业务逻辑层（Domain Layer）：Redux中间件/Service封装 数据层（Data Layer）：SWR/React Query数据获取策略 笔者对分层架构中各层的职责划分不太清楚 阅读全文

摘要： SoC，全称是Separation of Concerns，中文是关注点分离。软件工程中的模块化设计和这个有关。我一开始的理解是指将系统分成不同的部分，每个部分处理一个特定的功能或问题。比如，前端开发中的HTML、CSS、JavaScript各司其职，HTML负责结构，CSS负责样式，JavaScr 阅读全文

摘要： 一、核心应用场景 1. 属性访问跟踪 场景：记录对象属性的读取/修改记录实现： const trackable = (obj) => new Proxy(obj, { get(target, key) { console.log(`[GET] ${key}`) return Reflect.get( 阅读全文

摘要： 在处理 concat、slice、map、filter 等数组方法时需要特殊处理，是因为这些方法与 push/pop 等方法的本质行为不同。以下是具体原因和实现差异的分析： 一、两类方法的本质区别 变异方法（push/pop 等） 非变异方法（concat/slice 等） 是否修改原数组 ✅ 直接 阅读全文

摘要： 问题分析 原生 Proxy 无法直接检测以下数组操作： push/pop/shift/unshift splice/sort/reverse 直接修改数组长度 arr.length = 0 回顾之前的代码，发现虽然Proxy可以拦截数组的get和set操作，但像push、pop这些方法并不会直接触发 阅读全文

摘要： 1. Proxy 基础概念 1.1 什么是 Proxy ES6 新增的元编程特性 用于创建对象的代理，拦截并自定义对象的基本操作 1.2 核心语法 const proxy = new Proxy(target, handler) target: 要代理的目标对象 handler: 包含拦截器（tra 阅读全文

摘要： 在开发过程中，我们经常会遇到需要实时通信的场景，而 WebSocket 是一种非常合适的技术选择。然而，在实际使用 WebSocket 的过程中，我们可能会遇到连接频繁断开的问题。最近，我在一个项目中就遇到了这样的问题，经过一番探索和优化，终于找到了解决方案，现在与大家分享一下。 问题背景 在项目中 阅读全文

摘要： 在前端项目的上线过程中，经常会遇到各种问题，这些问题可能会导致项目无法正常部署或运行。本文将详细讨论三个常见的问题及其解决方案： 问题1：打包时使用 copy-webpack-plugin 引入外部配置文件，但项目发布后拿到的配置文件是错误的 问题描述 在使用 copy-webpack-plugin 阅读全文

摘要： WebSocket 是一种在浏览器和服务器之间建立持久连接的现代方式，它允许服务器和客户端之间进行实时、双向通信。本文将详细介绍在前端项目中使用 WebSocket 的初始化、发送信息、报错及关闭时的处理，以及 WebSocket 在浏览器中的连接机制，解释为何在未发送或接收消息时会自动关闭。 一、 阅读全文