- 博客(99)
- 收藏
- 关注
RSS订阅原创 无痕模式下 HTTP\-First 拦截引发的“页面刷新”误判
在绝大多数情况下是准确的，但在跨越浏览器安全沙箱（如 HTTP 升级拦截、OAuth 跨域重定向、第三方授权登录）等边缘场景下，浏览器的底层处理机制可能会使其状态产生扭曲。在处理敏感的、具有生命周期的业务逻辑（如防刷新、单次有效连接）时，采用内存状态、状态与浏览器基础 API 进行多因子联合判定，能让整个前端应用表现得更加健壮。
2026-06-26 10:17:17
305
原创 Vibe Coding 的隐形代价：代码修好了，经验没留下
Vibe coding 是趋势，AI 写代码的能力只会越来越强。但调试经验、排错直觉、对坑的敏感度 — 这些东西短期内还得靠自己积累。所以，利用好AI工具学习，复盘，才是我们这个AI时代更应该去做的事情。欢迎 Star、Issue、PR。
2026-06-20 22:47:57
264
原创 TypeScript 高级类型实战笔记
{// → "abc"'world'${// → "abc"'abc'// → "ABC"${// → "abc"'ABC'// → "abc"// 所有事件的类型定义（实际项目中可能来自后端接口或协议文档）
2026-06-19 22:06:28
273
原创 Hermes接入QQ教程
目前的进度，就假设是我们已经配置好了API-key，可以在终端进行对话的步骤，如果你还没有进行到这一步，那么建议你先去看看，我前面写的，怎么接入飞书，在那篇文章中讲解了怎么接入。就是这个过程，emmm，感觉体验确实不好，可能是我远程指挥的问题吧，毕竟我的电脑不在身边啊，如果是终端的话，体验应该会好很多的。可以看到目前我已经把他接入了飞书，由于我当时已经接入了，所以，有些步骤没法演示，所以本次就带了大家去接入接入QQ。这里可以看到我之前已经创建过了，这里我决定带着大家重新创建一个，点击下面的。
2026-06-02 22:13:04
459
原创 AI前端开发面试题分享
其他还有 table-cell + vertical-align、行高等于高度（单行文本）等。：流式数据到达时，若批量更新 DOM 可以合并到微任务，避免多次渲染阻塞，也可利用。跟踪已拷贝对象，键是原始对象，值是克隆对象；遇到重复引用直接返回，避免无限递归。TTFT 是从请求发出到收到第一个生成 token 的时间。（以“流式对话中支持停止生成并编辑重新发送”为例）
2026-05-31 21:59:51
830
原创 Hermes Agent 安装与飞书接入指南（Manjaro系统）
安装 Hermes → 配置 API Key → 扫码接入飞书 → 安装系统服务 → 完事！如果大家有各种疑问的话，欢迎大家在评论区留言！！
2026-05-31 21:24:25
464
原创 从跨项目预览到分层架构：一次 `postMessage` 封装的深度思考
最近在一个管理后台项目中，我需要实现一个“跨项目预览”功能：点击后台的一条数据，在一个新窗口中打开另一个独立前端项目的预览页面，并将完整的数据传递过去。两个项目部署在不同域名下，无法共享状态，也不能简单依赖 URL 参数（数据可能很大、结构复杂）。显然，浏览器的是唯一的选择。为什么拆这么多层？那个组件是不是有点多余？带着这些疑问，我深入阅读了代码，并和同事进行了一番讨论。最终，我不只理解了这套设计，更对“分层思想”有了全新的体会。
2026-05-18 21:55:14
386
原创 AI前端开发面试题分享
Promise 是 JavaScript 异步编程的一种解决方案。它代表一个尚未完成但将来会完成的异步操作，有三种状态：pending、fulfilled、rejected，状态一旦改变就不可逆。
2026-05-17 22:32:42
517
原创 AI前端开发面试题分享
技术栈示例前端：React + TypeScript + Vite，状态管理用 Zustand/Redux Toolkit，UI 组件库 Ant Design / Tailwind。AI 服务调用：OpenAI API（GPT-3.5/4）、本地部署的 LLaMA（通过 FastAPI 代理）、RAG 向量检索（Pinecone / Chroma）。流式传输渲染：Markdown 使用marked，数学公式使用KaTeX。工具链：ESBuild，Web Worker，IndexedDB 缓存。
2026-05-07 22:57:14
640
原创 前端修行日记之JS 原型与 AI基础常识
js中没有传统的类继承，实现继承的方式就是通过原型链。理解原型链，是真正掌握 JS 继承、this、对象机制的关键。
2026-05-05 19:59:24
451
原创 前端与AI结合实战分享
接口调用 + 流式数据解析 + 业务场景落地。吃透各大平台AI API 差异，熟练掌握等常用参数在 React / Vue 中封装通用AI请求、流式Hook，减少重复造轮子学习前端本地轻量化模型，实现离线AI能力，不依赖第三方接口只要多动手实战，把接口、流式解析、参数配置练熟，就能把AI能力无缝集成到任何前端项目中。
2026-05-04 21:28:27
1072
原创 LangChain.js v1.x 零基础入门教程 2026最新版，JS开发者快速上手AI应用
本项目是LangChain.js v1.x系统化学习教程，包含完整文档与可直接运行的源码，面向国内开发者优化，默认使用魔搭社区API，无需境外账号即可运行全部案例。项目采用教程与代码分离结构，文档用于学习理解，源码用于直接运行验证，降低入门门槛，提升学习效率。适用版本：LangChain.js v1.x运行环境：Node.js 20及以上技术栈：JavaScript、LangChain.js、Zod、国内大模型API项目特点：版本最新、国内可用、全案例可运行、零基础友好、持续维护。
2026-05-02 11:00:38
531
原创 深入理解 async/await的原理
JavaScript 是单线程语言，异步编程是前端、Node.js 开发的核心基石。从最初的回调函数，到Promise链式调用，再到 ES6Generator让异步代码更易读、易维护、更贴近人类同步思维。而 ES8 推出的，是目前 JavaScript 异步编程最优、最主流、最优雅的终极解决方案。本文从底层原理出发，结合Generator、Thunk 函数、co 库，带你彻底吃透语法糖的前世今生。是 Generator + Promise + co 自动执行器的官方语法糖。async。
2026-04-26 22:31:32
516
原创 只知道JS有事件循环？带你搞透JavaScript运行机制、V8原理、WebWorker核心知识
我们可以用一句话概括JavaScript引擎的作用：简单来说，JS引擎就是JavaScript代码的翻译官和执行者。它负责将我们写的人类可读的JS代码，转换成计算机能够理解和执行的机器指令。没有JS引擎，JS代码就只是一堆毫无意义的字符串。执行上下文是JS引擎用来跟踪代码执行状态的抽象概念。每当JS引擎开始执行一段代码时，它都会创建一个对应的执行上下文。全局执行上下文：只有一个，在程序开始执行时创建。
2026-04-26 11:07:12
875
原创 手写一个 LRU 缓存，搞懂浏览器缓存背后的秘密
为了满足 O(1) 的复杂度，我们首先排除了单纯的数组（查找需要遍历，复杂度 O(n)）。通常我们可能会想到 Object，但 Object 的键值对顺序在旧版本 JS 中是不确定的（虽然现在大部分引擎按插入顺序，但语义上不如 Map 严谨）。ES6 的Map是完美的选择：查找快：基于哈希表，查找复杂度 O(1)。有序性Map会记住键的插入顺序。新插入的数据排在最后（代表“最近使用”）。最早插入的数据排在最前（代表“最久未使用”）。利用这个特性，我们只需要维护好这个顺序，就能实现 LRU。
2026-04-25 15:47:07
509
原创 for of,for in以及传统for循环的区别与不同场景下的使用选择
在深入对比之前，我们先来认识一下这三位主角。传统for循环：经验丰富的“老将”这是最原始、最基础的循环结构，几乎所有编程语言都支持。它像一个精确的指挥官，通过一个计数器（通常是i）来控制循环的开始、条件和步进。const fruits = ['苹果', '香蕉', '橙子'];i++) {console.log(`索引${const fruits = [ '苹果' , '香蕉' , '橙子' ];i ++) {
2026-04-25 13:24:37
423
原创 深入剖析Vue2与Vue3响应式原理：从Object.defineProperty到Proxy的演进
Vue2的缺陷：数组下标监听不到、对象新增属性需用$set、初始化递归遍历性能差。Vue3的改进（Proxy优势）：拦截所有操作、懒代理初始化快、天然支持数组和新增属性。ref的存在原因：Proxy无法代理基本类型，ref包装后实现基本类型响应式，以及其自动解包机制。
2026-04-25 13:00:35
404
原创 解决登陆“Gemini 页面提示：Something went weong Try again later 出了点问题，稍后再试”的方法
本文介绍在登陆谷歌Gemini的时候，出现错误的解决方法。
2026-04-05 19:23:53
1694
3
原创 前端项目实现光暗主题切换的完整方案
CSS自定义属性（也称为CSS变量）是目前最推荐的主题切换实现方式。它是原生CSS特性，具有天然的性能优势，并且与现代前端框架兼容性良好。CSS变量的核心优势在于其声明式的能力。我们可以在根元素上定义一组变量，然后在需要使用这些值的地方直接引用。当主题发生变化时，只需修改变量的值，整个页面的颜色就会自动更新。这种方式不仅代码简洁，而且维护成本极低。:root {body {从上面的代码可以看出，我们定义了一套完整的颜色变量体系，涵盖了背景色、文本色、主色调和边框色等常见场景。
2026-04-02 21:30:26
468
原创 Vue3 虚拟列表实现原理与实战
在日常开发中，我们经常会遇到需要展示大量数据的场景，比如展示几千条甚至上万条数据列表。如果直接将所有数据渲染到页面中，会导致严重的性能问题，页面会变得卡顿甚至崩溃。虚拟列表（Virtual List）正是为了解决这一问题而诞生的技术。本文将介绍虚拟列表的核心原理，并基于 Vue3 手写一个完整的虚拟列表组件。虚拟列表是一种按需渲染的技术，它只渲染当前可视区域内的列表项，而不是一次性渲染所有数据。想象一下，你有一本1000页的书，但你在任何时候只能看到其中的一页。
2026-03-19 21:47:11
536
原创 前端设计模式面试题大全
设计模式是软件开发中经过验证的解决方案，是对代码结构的最佳实践总结。它不是具体的代码实现，而是一种编程思想，旨在解决常见的代码设计问题。可复用性：相同问题不用重复造轮子可维护性：代码结构清晰，易于理解和修改可扩展性：方便添加新功能沟通效率：开发团队有共同的设计语言概念层：理解各种设计模式的定义和特点实现层：能够手写核心代码应用层：理解框架源码中的设计模式应用建议大家在准备面试时，不仅要记住概念，更要动手实践，理解每个模式背后的设计思想。最后祝大家面试顺利，拿下心仪的offer！
2026-03-13 20:49:20
394
原创 前端工程师必须掌握的设计模式
设计模式是软件开发中经过验证的解决方案，是对代码结构的最佳实践总结。它们不是具体的代码实现，而是一种编程思想，一种让代码更具可维护性、可扩展性和可读性的指导原则。简单来说，设计模式就是前人总结的"代码模板"，帮助我们解决常见问题。模式核心思想前端应用单例模式全局唯一实例Vuex/Pinia、全局 Toast工厂模式批量创建对象组件工厂、axios.create()观察者模式状态变化通知Vue 响应式、EventBus装饰器模式动态添加功能。
2026-03-13 20:47:51
498
原创 Vue 模板中 ref 的自动解包机制详解
count.value++ // 脚本中需要 .value</script><template>-- 模板中自动解包，无需 .value -->这个看似简单的行为背后，实际上包含了 Vue 的精心设计。Vue 的自动解包机制是编译时优化和运行时代理的完美结合。它大大简化了模板中的代码编写，但同时也带来了一些需要特别注意的边界情况。理解自动解包的原理，不仅能帮助我们避免常见的坑，还能更深入地理解 Vue 的响应式系统。
2026-03-07 21:26:21
427
原创 浏览器渲染原理
本文系统讲解了浏览器渲染原理及优化方法。首先介绍了渲染流程的6个关键步骤：HTML解析构建DOM树、CSS解析构建CSSOM树、渲染树构建、布局计算、页面绘制和合成渲染。重点分析了DOM树和CSSOM树的构建过程，指出CSS加载会阻塞JavaScript执行和页面渲染。文章还探讨了样式标准化、继承机制以及布局计算算法，并指出JavaScript执行、CSS加载、频繁DOM操作等是主要性能瓶颈。最后强调理解这些原理对编写高性能前端代码的重要性。
2026-02-25 20:22:12
1093
原创 详解Web服务部署：IP+端口 vs IP+端口+目录 实战指南
在部署Web项目时，你是否注意到过这样的访问方式差异？这两种方式有什么区别？又该如何实现呢？本文将为你详细解答。部署方式适用场景优点缺点端口直接访问开发环境、微服务简单直观端口不易记忆目录形式(80端口)生产环境、多应用统一入口、便于管理配置复杂混合方案复杂架构灵活可控维护成本高核心要点端口+IP形式：直接启动服务，指定端口即可目录形式：通过反向代理（Nginx/Apache）实现路径转发80端口是Web服务的默认端口，浏览器会自动省略。
2026-02-23 22:12:49
1936
2
原创 国内服务器下载 nvm 超时？教你几招轻松解决
设置国内镜像源- 最推荐，一劳永逸使用 Gitee 克隆 nvm- 备选方案，稳定可靠预先下载 Node.js 包- 配合镜像源使用效果更佳希望这篇文章能帮助你在服务器上快速配置好 Node.js 开发环境。如果觉得有帮助，欢迎分享给更多需要的朋友！你还有其他关于 Node.js 环境配置的问题吗?欢迎在评论区留言讨论！
2026-02-23 21:37:29
1401
1
原创 Vue3 宏到底是什么？一篇让你彻底搞懂原理的文章
理解宏的编译时原理，不仅能帮你更好地使用 Vue3，还能让你在遇到问题时快速定位原因。比如以后看到 “xxx is not defined” 的报错时，要想到可能是没有在正确的位置使用宏。希望这篇文章能帮你彻底搞懂 Vue3 宏的原理！
2026-02-22 21:30:51
794
原创 OpenClaw 完全指南：在 Manjaro 上部署你的个人 AI 助手
OpenClaw 是一款开源的个人 AI 助手项目，它的核心理念是让 AI 成为你的"数字分身"，帮助你完成流程化、重复性的工作。AionUi 是一个跨平台的 AI 终端界面工具，旨在将命令行体验转化为现代化的 AI 聊天界面。它的核心特点是可以同时管理多个 AI 代理，让它们协同工作。本文详细介绍了在 Manjaro 系统上安装和配置 OpenClaw 的完整流程。通过 OpenRouter API，你可以灵活选择各种 AI 模型，无论是 Claude、GPT 还是其他模型，都可以轻松接入。
2026-02-14 20:00:11
2861
原创 打造你的专属AI技能包：如何高效使用和自定义 Skills
Skills（技能包）是AI Agent的「能力扩展模块」。它将不同领域的专业知识封装成独立、可复用的技能模块，每个技能包本质上是对应技能的SOP（标准操作程序），让AI读完SOP就能高效、高质量执行。每个Skill是一个完整的文件夹，包含专用的指令、脚本与资源，通过模块化设计，让AI能够按需加载，快速掌握某项专业能力。Skills是AI编程工具的强大扩展功能，它让AI从「执行单一指令」升级为「完成复杂任务」。封装重复性工作为标准化流程让AI快速掌握专业领域知识实现工作流程的自动化。
2026-02-13 16:52:36
2036
原创 Chrome 插件开发指南：从 Web 到扩展，以及「网页内容总结助手」实战
网页内容总结助手一键提取正文并调用 ModelScope + DeepSeek 做 AI 总结，或使用本地 mock选择页面任意区域进行总结（高亮选择模式）多种输出类型：总结、博客、文章、报告、要点列表设置本地持久化：API Key、总结字数等存于，无需后端遵循，适合作为学习或二次开发模板如果你在做阅读摘要、知识整理或内容再生产，欢迎在 Chrome 应用商店或通过「加载已解压的扩展程序」安装使用，也欢迎 Star / Fork 项目参与改进。
2026-02-10 19:25:35
1087
1
原创 我开源了一个 Chrome 插件：一键总结网页为 Markdown
用户可在设置中填入自己的const prompt = `请将以下内容总结为一篇${const prompt = ` 请将以下内容总结为一篇 ${ style } ，不超过300字：\n\n ${ text } `;const prompt = ` 请将以下内容总结为一篇 ${ style } ，不超过300字：\n\n ${ text } `;${const prompt = ` 请将以下内容总结为一篇 ${ style } ，不超过300字：\n\n ${ text } `;
2026-02-10 19:22:43
1518
原创 Gitee迁移GitHub开源全攻略：一键配置自动同步，仅需维护单一仓库
从Gitee迁移至GitHub开源，核心是一次迁移、永久自动同步，无需重复提交与手动维护。本文提供的三种方案覆盖不同使用场景，配合可直接复制的命令与配置清单，可快速实现仅提交一端，双平台自动同步的目标，彻底解决多平台代码托管的繁琐问题。如果在配置过程中遇到权限、同步、冲突等问题，欢迎留言交流；也可分享你的同步实践，共同完善多平台代码托管的最佳方案。
2026-02-08 19:16:47
1765
原创 一次大屏项目中的“静态数据”陷阱：当一个接口失败，拖垮了整页数据
开发过程中发现页面数据始终显示固定值，排查发现是全局try...catch导致前端接口请求被静默中断。解决方案采用独立错误处理或链式并发请求，确保模块独立性。文章反思了开发中常见的错误处理误区，强调细粒度日志、明确占位标识和容错设计的重要性。通过隔离错误边界，最终实现各数据模块独立更新
2026-02-01 21:10:55
547
原创 HTTP 协议全景解析：无状态、明文与安全演进之路
HTTP协议最大的安全短板就是明文传输。整个请求和响应过程，包括URL、首部、请求体，都是以明文形式在网络中流转。这使得任何中间节点，如代理、路由器、ISP，甚至同一Wi-Fi下的其他用户，都可以轻易地窃听、篡改或伪造你的数据。此外，HTTP本身没有身份验证机制，容易被伪造请求。回顾HTTP协议的发展历程，我们看到的不仅是一个技术的演进，更是一场对性能、安全和用户体验的不懈追求。从最初的简单文件传输，到如今支撑起整个现代互联网的复杂生态，HTTP协议展现出了惊人的灵活性和可扩展性。
2026-01-30 18:41:51
1029
2
原创 Vue项目中iframe嵌入页面实现免登录的完整指南
监听器放在App.vue的created生命周期中验证消息来源（origin）添加时间戳防止重放攻击设置合理的token有效期在beforeDestroy中移除监听器处理不同源场景（token交换）避免localStorage key冲突开发环境：可以先用URL传参快速验证功能，但上线前一定要改成postMessage调试技巧：在控制台打印消息收发日志，方便排查问题错误处理：做好异常处理，当token失效时优雅降级到登录页。
2026-01-28 20:37:36
892
原创 API与SDK：开发者必懂的概念、联系与区别
API是“软件对话的规则”，是功能实现的核心入口；SDK是“封装好的开发工具箱”，以API为核心，搭配辅助工具降低开发难度。简单来说：想灵活定制就用API，想高效落地就用SDK。理解两者的本质与差异，能帮我们在对接第三方服务、搭建项目功能时少走弯路。无论是API还是SDK，它们的核心价值都是“让开发者专注于业务逻辑，而非底层实现”，这也是现代软件开发高效协作的基础。
2026-01-26 21:03:32
764
原创 Manjaro 制作 Ventoy 多系统启动盘终极指南（避坑版）
坑点现象解决方案用了 AUR 的ventoy-bin脚本缺失关键工具改用直接运行用包裹执行挂载后无法写入 ISO权限不够挂载时加参数复制时以为卡死cp无进度用或耐心等待Ventoy 是目前最高效、最灵活的多系统启动盘解决方案。虽然在 Manjaro 上需要绕过几个小坑，但一旦掌握正确方法，你将获得一个万能装机U盘——无论是给朋友装 Windows，还是自己测试 Linux 发行版，都只需一个 U 盘搞定！祝你装机顺利，系统稳定！
2026-01-12 22:18:06
719
原创 Vue组件初始化时序与异步资源加载的竞态问题实战解析
isMapReady// 父组件})// 子组件// 执行操作})})组件生命周期 ≠ 资源就绪：Vue 的onMounted只保证 DOM 挂载完成，异步资源可能还没加载好。防御式编程：在访问异步资源前加判断，避免空指针。显式信号优于隐式依赖：用isMapReady代替“猜”资源是否就绪。调试技巧：学会用debugger调试是多么的重要这次问题让我深刻体会到，在异步世界里，永远不要假设资源已经就绪。组件通信就像两个人传递接力棒，必须确保对方准备好再放手。虽然最终用isMapReady。
2025-12-27 12:11:29
568
原创 前端并发控制的多种实现方案与最佳实践
前端并发控制是提升应用性能和用户体验的关键技术。本文深入探讨了多种并发控制方案，包括队列法、递归队列法、竞速法和分批处理法，以及它们的进阶特性如动态调整并发数、请求取消机制和进度反馈。我们还通过实际应用场景案例展示了并发控制的价值，并对比了浏览器原生方案与第三方库的适用场景。对于前端开发者，我们建议根据项目需求选择合适的并发控制方案。对于简单场景，原生队列法或分批处理法足够；对于复杂场景，递归队列法或竞速法更合适；
2025-12-21 21:40:18
1024
原创 多引擎中英翻译API搭建与使用教程
前一段时间正好考了英语四六级嘛，当时我在刷题的时候就想，能不能自己搭建一个翻译服务，个性化的去定制适合自己学习平台，于是我就搞了一个简单的中英文翻译的服务。在本教程中，我们将学习如何使用Python构建一个支持多种翻译引擎的中英翻译API服务。该服务不仅支持Google翻译，还支持百度翻译，可以根据需求选择最适合的翻译引擎。
2025-12-18 22:32:21
898
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人