- 博客(44)
- 收藏
- 关注
RSS订阅原创 React高级用法
核心思想：将组件中可复用的逻辑抽离成自定义 Hooks，实现“逻辑复用，代码解耦”，替代 Class 组件的 HOC/Render Props。复用：自定义 Hooks 实现逻辑复用，替代传统的 HOC/Render Props；性能useMemoReact.memo减少无效渲染，React.lazy分割代码；解耦useContextuseReducer简化状态管理，避免 props 钻取和冗余 state；兼容：错误边界、Portals 解决特殊场景的 UI/交互问题；学习建议。
2025-12-12 18:14:44
895
原创 前端无限列表
简单场景（如几百条数据）用「滚动加载」即可；海量数据（如几千/几万条）必须用「虚拟列表」，保证DOM和内存始终可控；始终只渲染可视区域的内容，避免DOM和内存爆炸。
2025-12-04 18:01:19
997
原创 关于在本地去模拟生产环境检测页面内容注意事项
若用的是旧版PowerShell（如5.1以下），可能不支持部分命令，建议升级PowerShell或改用CMD执行（CMD无需执行。本次修改是“临时硬编码”，若需要区分环境（开发/测试/生产），建议用环境变量配置（如。❗ 异常处理：若提示“找不到路径”，检查打包命令是否成功，或手动进入项目根目录下的。（端口可能不同），浏览器访问该地址即可正常访问项目，且接口能直接调用。跨域），或在后端服务器上部署前端dist文件（同域名访问，无跨域）。❗ 异常处理：若提示“权限不足”，以。），或打包时遗漏资源（重新执行。
2025-11-28 15:33:02
464
原创 Zustand
Zustand 是一款轻量级、无 Provider 包裹、API 简洁的状态管理工具，核心优势是，适合中小型项目或大型项目中的独立模块状态管理。
2025-11-21 17:09:09
1133
原创 sse，短轮询，长轮询，webSocket
WebSocket 是 HTML5 引入的一种全新协议（ws:// 或 wss://），它和 HTTP 是并列的协议。SSE 服务器->客户端 HTTP 真正实时（服务端推送），自动重连，基于 HTTP 简单 只能服务器向客户端推送 实时通知、数据流监控。长轮询 双向（通过多个请求） HTTP 实时性较好，兼容性极佳 仍有请求延迟，服务器需保持连接 兼容性要求高的备选方案。• 浪费资源： 即使没有新数据，也会产生大量无效的请求和响应，对服务器和网络都是负担。它更简单，并且基于 HTTP，优势明显。
2025-11-14 18:42:38
1074
1
原创 前端关于埋点
不同埋点方式的核心目标是从不同维度收集用户行为和系统状态数据事件埋点关注“用户做了什么操作”；曝光埋点关注“用户看到了什么内容”；业务埋点关注“用户完成了什么目标”；错误/性能埋点关注“系统是否稳定、体验是否流畅”。实际开发中需结合业务目标选择合适的埋点方式，避免无意义的冗余埋点，同时确保数据准确性和用户隐私合规。
2025-11-01 09:08:29
665
原创 关于margin:auto的注意点
要理解 的生效条件，核心是抓住它的本质规则： 仅在「弹性布局（flex）」或「网格布局（grid）」中，才能实现“自动分配剩余空间”的效果；在默认的流式布局（static）中完全不生效。你的代码中注释 后 失效，正是因为脱离了弹性布局环境。 的行为在不同布局模式下完全不同，只有在以下两种布局中，它才具备“自动推挤元素、分配剩余空间”的能力：当父元素设置 或 后，子元素的 会触发“剩余空间分配”逻辑：代码中， 父元素原本的逻辑是：当注释 后，父元素回到默认的「流式布局」， 自然失效。父元素设置
2025-10-10 15:24:28
774
原创 前端发送请求时，参数的传递格式
简单键值对+GET请求 → URL查询参数表单提交/文件上传 → Form Data（x-www-form-urlencoded或multipart/form-data）复杂结构数据（对象/数组） → JSON标识资源ID/层级 → 路径参数实际开发中，JSON格式因灵活性和可读性成为主流，而路径参数+JSON的组合是RESTful API的常见实践。
2025-09-27 10:55:01
767
原创 路由守卫beforeEach和afterEach
路由守卫本质是“导航钩子函数”，在页面跳转的“不同阶段”自动触发，允许开发者在跳转前、跳转中、跳转后插入逻辑。跳转前（beforeEach）：相当于“安检入口”，检查身份（是否登录）、证件（权限），决定是否允许进入；跳转后（afterEach）：相当于“安检完成”，通知用户“已通过”，执行后续收尾操作（如收起安检设备）。Vue Router 中，beforeEach属于“前置守卫”（跳转前触发），afterEach属于“后置守卫”（跳转后触发），二者配合可覆盖完整的导航生命周期。beforeEach。
2025-09-16 14:29:59
838
原创 前端权限层级
在前端开发中，权限管理是保障系统安全的重要环节，通常可以分为以下几个层级，每个层级对应不同的实现方式：从粒度由粗到细可分为4级：路由权限控制用户能否访问某个页面（路由），是最基础的权限控制。菜单权限控制用户在侧边栏/导航栏中能否看到某个菜单，通常与路由权限联动。操作权限控制用户能否执行某个操作（按钮/表单等交互元素）。数据权限控制用户能看到的数据范围（最细粒度）。步骤1：定义路由表区分公开路由（如登录页）和私有路由（需权限的页面）：步骤2：路由守卫拦截使用路由守卫（如Vue的）在跳转前校验
2025-09-13 11:29:21
332
原创 本地MOCK
本地 Mock指的是在开发环境中，通过模拟（Mock）后端 API 的请求响应数据，使得前端（或客户端）开发能够在不依赖真实后端服务器的情况下进行。“伪造”一个后端服务，这个服务会按照预先约定好的接口规范（如 RESTful API、GraphQL 等）返回模拟的数据。方法适用场景优点缺点硬编码快速原型、简单项目简单污染代码，难维护拦截请求 (MSW)现代前端项目主流选择无侵入，功能强大，逼真需要学习配置独立服务器 (JSON Server)模拟完整的 REST API功能完整，无需编码。
2025-09-06 11:43:27
905
原创 窗口通信（window.postMessage）
是 HTML5 引入的跨窗口通信 API，专门用于在不同窗口（或 iframe）之间安全地传递数据，即使这些窗口属于不同域名（跨域场景）。它解决了同源策略对跨窗口通信的限制，是处理复杂窗口间交互的重要方案。允许一个窗口向另一个窗口发送数据，接收方通过监听message事件来获取数据。通信双方需要明确“发送方”和“接收方”的角色，且发送方需要知道接收方的窗口引用（如子窗口、父窗口、iframe 等）。
2025-08-30 11:52:10
1270
原创 csrf攻击
记录cookie以及域名第二步：攻击者做了一个网页，到处发链接，这个网站会去响应一个页面，会在页面里面加一个图片，浏览器在渲染的过程中会请求这个地址，请求到了银行的服务器，转账给谁，转多少钱请求的是银行，请求的地址和之前在cookie时记录的地址是一样的，之前的cookie会被带过去请求已经发出去了。
2025-08-16 17:13:25
641
原创 前端如何安全存储 API 密钥 —— 两种实用方案
本文介绍了两种安全存储前端API密钥的方案：1）环境变量+构建时注入，适用于非敏感API，密钥会打包进前端代码但配置简单；2）Serverless函数代理，通过服务端中转请求，密钥完全不会暴露给客户端，安全性最高但配置较复杂。开发者应根据API敏感程度选择合适方案，敏感数据必须采用Serverless代理方式。
2025-08-09 14:42:47
1606
原创 浏览器的全局焦点事件
首先input的失焦事件是blur，这个事件是属于浏览器进行监管，这个失焦事件执行完了之后，才会去执行点击事件，所以我们可以给这个失焦事件写一个变量进行判断（默认值为true），一旦为false,点击事件就不执行。手动调用 focus() 方法保持焦点"阻止 mousedown 的默认行为。点击任何元素都会自动触发焦点重计算。而是浏览器焦点管理系统的标准行为。系统会先移除当前焦点元素的焦点。然后判断新点击元素是否可聚焦。不是 div 有特殊逻辑。
2025-08-02 14:34:45
300
原创 浏览器如何工作的？
浏览器渲染页面流程：网络线程获取HTML后生成渲染任务，由渲染主线程按事件循环机制处理。渲染分为解析HTML（并行下载CSS不阻塞解析，JS会阻塞）、样式计算（生成带样式的DOM树）、布局（生成布局树）、分层、绘制、分块、光栅化和画（由合成线程完成）八个阶段。其中transform效率高因其仅影响最后合成阶段，不涉及主线程。reflow是重新计算布局树（异步触发），repaint是重新生成绘制指令（reflow必引发repaint）。获取布局属性会强制同步reflow以保证数据准确性。
2025-07-26 14:56:54
602
原创 Http请求put与head
put请求需要提供完整地的资源，如果没有提供的话在 HTTP 协议中，PUT 方法要求客户端提供完整的资源表示以服务器上的现有资源。
2025-07-19 14:49:06
843
原创 关于两种网络攻击方式XSS和CSRF
场景请求发起方携带的Cookie是否允许用户在A网站点击按钮A网站的JS代码A网站的Cookie✅ 同源请求用户在B网站触发对A的请求B网站的HTML标签A网站的Cookie⚠️ 默认允许（SameSite未限制时）B网站JS读取A网站的CookieB网站的JS代码无❌ 同源策略禁止访问简单比喻：你（用户）在邮局（A网站）办了业务，获得一个专属印章（Cookie）。后来你去商场（B网站），商场里的人偷偷在你包里塞了一封寄给邮局的信（恶意请求）。
2025-07-12 20:28:36
862
原创 关于redux的工作流程。在组件内调用dispatch所完成的事情
participant 组件 as React 组件组件->>Dispatch: 调用 dispatch(increment())Dispatch->>Reducer: 传递 Action { type: 'counter/increment' }Reducer->>Store: 基于 Immer 生成新状态Store->>组件: 通知所有订阅者重新渲染的作用：生成 Action描述，而非执行修改。内层执行核心：Reducer 接收 Action，通过Immer 安全更新状态，触发渲染。
2025-07-06 21:57:26
971
原创 关于钉钉的三方登录
企业内部应用登录（Internal App Login）第三方应用登录（Third-party App Login）本文档主要介绍第三方应用登录的实现方式，这种方式适用于在浏览器中访问的 Web 应用。
2025-06-14 19:32:45
796
原创 Object.assign() 和扩展运算符（...）
✅两者都是浅拷贝：只复制第一层，嵌套对象共享引用🚫不是深拷贝：无法创建嵌套对象的独立副本📌 优先使用扩展运算符（语法更简洁，是 JS 标准）⚠️ 嵌套对象需要额外处理才能实现深拷贝。
2025-06-07 18:59:35
484
原创 js里0.1+0.2！==0.3为什么，如何让人相等
JavaScript 使用 64 位双精度浮点数（IEEE 754 标准）存储数字，尾数部分仅 52 位，需对无限循环小数截断和舍入，导致精度丢失。通过上述方法，可有效规避 JavaScript 浮点数精度陷阱，确保 0.1 + 0.2 === 0.3 的逻辑成立。日常比较：优先用 Math.abs(a - b) < Number.EPSILON。注意：toFixed() 返回字符串，需用 parseFloat() 转换。适用场景：金融、科学计算等对精度要求极高的领域。适用场景：货币计算等需精确值的场景。
2025-06-01 14:30:07
397
原创 类型检测Object.prototype.toString 方法详解
必要性call或apply确保的this指向目标对象，绕过重写逻辑，直接读取底层类型标识。底层逻辑：通过[[Class]]或生成，实现精确类型检测。应用场景：类型判断（如的兼容实现）、调试、框架底层逻辑等。目标对象：通过callapply绑定的具体实例，用于精确类型检测。无call的this指向：默认指向或调用对象自身方法，导致类型判断失效。核心用途：跨对象类型检测、绕过重写逻辑、读取底层类型标识。
2025-05-23 08:42:16
974
原创 hash和history
时，本质是通过 前端路由逻辑 完成的，整个过程分为 URL 修改 和 内容加载 两步。• 核心角色：路由库像“调度中心”，统一管理 URL 与组件的映射关系，无论 URL 如何变化，都能正确加载内容。• 用户手动输入 URL 或刷新页面时，浏览器会向服务器请求对应路径的资源，需服务器配合返回入口文件。时，路由库 不会等待浏览器事件，而是直接根据新的 URL 执行组件加载逻辑。后的内容（哈希值）不会触发浏览器向服务器发送请求，因此页面不会刷新。后，根据路由表找到匹配的组件，并动态加载该组件到页面中。
2025-05-11 09:14:05
925
原创 type和interface的区别
都可以用于定义类型，但两者的设计目标和适用场景有显著差异。，可以显著提升代码的可维护性和类型安全性。• 本质：为已有类型创建别名，可表示基本类型、联合类型、对象、元组等。• 当需要定义对象结构或扩展第三方类型时（如 API 响应格式）。• 例如：定义组件的 Props 或 State 类型。• 本质：定义对象的结构或契约，主要用于面向对象编程。• 定义对象结构：尤其适合需要扩展或类实现的场景。• 复杂类型操作：联合类型、条件类型、映射类型等。• 需要联合类型、条件类型等高级操作时。定义，支持复杂类型操作。
2025-05-04 11:46:58
698
原创 关于vue3中如果想要用watch监听props的值的的注意事项
• 若父组件传递的新对象与原代理对象的 结构相同，Vue 可能会 复用已有的代理实例，导致引用地址未发生明显变化。需要访问对象的所有属性以建立依赖关系，但若代理对象未触发属性访问（如未实际使用嵌套属性），依赖链可能不完整。仍失效的原因，主要与 响应式代理的复用机制 和 深度监听的实现逻辑 有关。的作用是递归监听对象 所有层级的属性变化，但前提是 代理对象本身的引用地址已被正确追踪。实际监听的是代理对象的引用地址，而非父组件原始对象的地址。一、核心原因：响应式代理的复用。父组件传递新对象的代理处理。
2025-04-26 15:39:45
1973
原创 JavaScript 中 == 操作符的 强制类型转换规则
通过理解这些规则，可以更好地调试代码，避免因类型转换导致的逻辑错误！的转换规则复杂，容易导致意外结果（如。• 字符串会转为数字，再比较数值大小。以下是 JavaScript 中。：严格比较类型和值，避免隐式转换。• 目标类型未指定时，默认按。返回对象本身 → 继续调用。返回数组本身 → 继续调用。规则转换为原始值，再比较。• 如果返回对象，继续调用。返回元素逗号拼接的字符串。• 理解对象转换：重点掌握。• 其他值与它们比较返回。返回原始值，则使用它。• 布尔值先转为数字（返回时间戳（数字）。
2025-04-20 10:25:20
863
原创 vue3的内置组件
Vue 提供了两个内置组件，可以帮助你制作基于状态变化的过渡和动画会在一个元素或组件进入和离开 DOM 时应用动画。是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。v-ifv-show演示一下。
2025-04-13 14:48:44
676
原创 js的词法作用域
词法作用域（Lexical Scope）函数的作用域在函数定义时就已经确定，而非运行时确定。作用域链基于代码的物理结构（即书写时的嵌套关系），与函数调用位置无关。•词法作用域是 JavaScript 的核心设计，决定了变量的可见性规则•闭包 = 函数 + 词法环境，是模块化编程的基础•优先使用let/const避免变量提升和遮蔽问题• 理解作用域链可有效解决变量访问相关的 Bug通过掌握词法作用域，开发者可以更精准地控制变量的生命周期，编写出高效、可维护的闭包代码。
2025-04-05 18:09:31
588
原创 vue3核心知识
v-modelVue3 允许为v-model添加自定义修饰符。-- 父组件：使用自定义修饰符 capitalize --> < ChildComponent v-model.capitalize = " name " />-- 父组件：使用自定义修饰符 capitalize --> < ChildComponent v-model.capitalize = " name " />
2025-03-22 21:53:34
816
原创 vue3中ref和reactive的基本用法，区别
场景ref示例reactive示例计数器不适用用户信息对象不适用表单输入（单值）不适用表单输入（对象）不适用动态组件传参用ref传递单值用reactive传递复杂对象通过具体示例，可以更直观地理解ref和reactive的适用场景及操作差异。
2025-03-16 08:53:04
615
原创 Vue2 核心引擎：响应式系统详解
数据修改 → 触发 setter → 通知 Watcher → 推入异步队列→ 微任务阶段执行队列 → 生成新 Virtual DOM→ Diff 算法对比 → 精准更新真实 DOM这一机制确保了 Vue 的高效性和性能优化！数据劫持（感知变化）依赖追踪（知道哪里需要更新）异步批量更新（高效执行变更）实现了「数据驱动视图」的自动化更新，开发者只需关注数据逻辑，无需手动操作 DOM。理解这套机制，能帮助你写出更高效、可维护的 Vue 应用！
2025-03-02 12:00:46
954
原创 原型，原型链
原型和原型链是JavaScript的核心概念，它们为实现对象的继承、方法共享以及灵活的代码组织提供了基础。理解原型和原型链的工作原理，对于深入掌握JavaScript至关重要。在实际编程中，合理利用原型链可以编写出更高效、更可维护的代码。
2025-02-23 18:04:26
516
原创 Vue2笔记
style的默认样式是作用到哪里的？scoped的作用是什么？style中推不推荐加scoped？data写成函数的目的是什么？组件通信，就是指组件与组件之间的数据传递组件的数据是独立的，无法直接访问其他组件的数据。想使用其他组件的数据，就需要组件通信组件关系分类有哪两种父子组件通信的流程是什么？父向子子向父组件上 注册的一些 自定义属性。
2025-02-16 11:38:41
530
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人