WebScoket在 Web 应用早期,浏览器和服务器之间的通信几乎完全依赖 HTTP 请求。用户点击按钮,浏览器发起请求,服务器返回响应。这种模式简单、可靠,也非常适合传统页面加载和表单提交。 但随着聊天系统、在线协作、实时行情、多人游戏、消息通知等场景出现,传统 ...2026-06-12网络通信
双 Token 校验机制为什么需要双 Token? 单 Token 模型通常存在一个核心矛盾:安全性与用户体验难以兼顾。 如果 Token 过期时间很短:安全性高,但用户频繁掉线 如果 Token 过期时间很长:用户体验好,但一旦泄露风险极大 双 Token 的核...2026-05-23前端
如何在浏览器中存储数据 在前端开发中,“让浏览器记住一些东西”几乎是所有稍微复杂一点的应用都会遇到的需求:保存用户登录状态、记录偏好设置、缓存接口数据、支持离线应用等。浏览器本地存储做得好,可以显著减少网络请求、提升页面性能和用户体验;做不好,则会很容易出现数据混乱、XS...2026-05-02前端
跨域一、跨域问题的本质:同源策略与安全边界1.1 什么是跨域?跨域(Cross-Origin)的核心根源,是浏览器内置的同源策略,指的是浏览器出于安全考虑,限制一个源(Origin)的脚本访问另一个源的资源。这里的”源”由三个要素组成,所谓「同源」,要求...2026-04-24前端
Agent Skill 与 MCPAgent Skill什么是 Agent Skill 专业概念:Agent Skill(智能体技能)是一种模块化的能力扩展包,用于增强通用 AI 智能体的功能。它封装了特定领域的指令、元数据和可选资源文件(如脚本、模板、文档),让 AI 在遇到匹配场...2026-04-17分享会
clsx 和 twMerge 解决 CSS 类名冲突问题1. clsx 和 twMerge 与函数解析 以下这段代码是现代前端开发(尤其是使用 Tailwind CSS 和 shadcn/ui 的项目中)的一个工具函数。它通过组合两个强大的库,解决了 CSS 类名合并中的冲突和逻辑判断问题。 1...2026-04-04问题
使用 indexOf 查找对象结合 Pinia 持久化引发的问题1. 问题最近写代码的时候我遇到一个问题,我在开启了数据持久化的 Pinia 仓库里面写了一个类似“点击切换选中状态”的逻辑:如果数组里没有就 push 进去,有了就 splice 掉。代码如下: 123456789// Pinia 仓库逻辑cons...2026-03-21问题
Pinia 状态管理一、为什么要讲 Pinia原因 Vue3 官方推荐的状态管理方案 用来替代 Vuex(Vuex 5 已停止推进) 更符合 Vue3 中 Composition API 的设计理念 比起 Vuex 使用更加方便 vuex 与 pinia 对比...2026-02-09分享会
TypeScript 泛型 在 TypeScript 的世界里,如果说“接口(Interface)”定义了数据的形状,那么“泛型(Generics)”就是赋予代码灵魂的灵活性。 一、 为什么需要泛型?想象一下,你需要写一个函数,它的功能很简单:返回传入的参数。 123456...2026-01-30前端
选项式 API 与组合式 API 的区别 Vue 作为前端三大框架之一,从 Vue 2到 Vue 3的迭代不仅带来了性能的飞跃,更在代码组织、逻辑复用等核心层面进行了架构升级。其中,选项式 API(Options API)与组合式 API(Composition API)作为两代框架的...2026-01-23前端