<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[duduanwang的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/duduanwang</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; duduanwang]]></copyright><item><title><![CDATA[无痕模式下 HTTP\-First 拦截引发的“页面刷新”误判]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/162330482</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/162330482</guid><author>duduanwang</author><pubDate>Fri, 26 Jun 2026 10:17:17 +0800</pubDate><description><![CDATA[在绝大多数情况下是准确的，但在跨越浏览器安全沙箱（如 HTTP 升级拦截、OAuth 跨域重定向、第三方授权登录）等边缘场景下，浏览器的底层处理机制可能会使其状态产生扭曲。在处理敏感的、具有生命周期的业务逻辑（如防刷新、单次有效连接）时，采用内存状态、状态与浏览器基础 API 进行多因子联合判定，能让整个前端应用表现得更加健壮。]]></description><category></category></item><item><title><![CDATA[Vibe Coding 的隐形代价：代码修好了，经验没留下]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/162153505</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/162153505</guid><author>duduanwang</author><pubDate>Sat, 20 Jun 2026 22:47:57 +0800</pubDate><description><![CDATA[Vibe coding 是趋势，AI 写代码的能力只会越来越强。但调试经验、排错直觉、对坑的敏感度 — 这些东西短期内还得靠自己积累。所以，利用好AI工具学习，复盘，才是我们这个AI时代更应该去做的事情。欢迎 Star、Issue、PR。]]></description><category></category></item><item><title><![CDATA[TypeScript 高级类型实战笔记]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/162129301</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/162129301</guid><author>duduanwang</author><pubDate>Fri, 19 Jun 2026 22:06:28 +0800</pubDate><description><![CDATA[{// → "abc"'world'${// → "abc"'abc'// → "ABC"${// → "abc"'ABC'// → "abc"// 所有事件的类型定义（实际项目中可能来自后端接口或协议文档）]]></description><category></category></item><item><title><![CDATA[Hermes接入QQ教程]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/161633646</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/161633646</guid><author>duduanwang</author><pubDate>Tue, 02 Jun 2026 22:13:04 +0800</pubDate><description><![CDATA[目前的进度，就假设是我们已经配置好了API-key，可以在终端进行对话的步骤，如果你还没有进行到这一步，那么建议你先去看看，我前面写的，怎么接入飞书，在那篇文章中讲解了怎么接入。就是这个过程，emmm，感觉体验确实不好，可能是我远程指挥的问题吧，毕竟我的电脑不在身边啊，如果是终端的话，体验应该会好很多的。可以看到目前我已经把他接入了飞书，由于我当时已经接入了，所以，有些步骤没法演示，所以本次就带了大家去接入接入QQ。这里可以看到我之前已经创建过了，这里我决定带着大家重新创建一个，点击下面的。]]></description><category></category></item><item><title><![CDATA[AI前端开发面试题分享]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/161572020</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/161572020</guid><author>duduanwang</author><pubDate>Sun, 31 May 2026 21:59:51 +0800</pubDate><description><![CDATA[其他还有 table-cell + vertical-align、行高等于高度（单行文本）等。：流式数据到达时，若批量更新 DOM 可以合并到微任务，避免多次渲染阻塞，也可利用。跟踪已拷贝对象，键是原始对象，值是克隆对象；遇到重复引用直接返回，避免无限递归。TTFT 是从请求发出到收到第一个生成 token 的时间。（以“流式对话中支持停止生成并编辑重新发送”为例）]]></description><category></category></item><item><title><![CDATA[Hermes Agent 安装与飞书接入指南（Manjaro系统）]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/161571693</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/161571693</guid><author>duduanwang</author><pubDate>Sun, 31 May 2026 21:24:25 +0800</pubDate><description><![CDATA[安装 Hermes → 配置 API Key → 扫码接入飞书 → 安装系统服务 → 完事！如果大家有各种疑问的话，欢迎大家在评论区留言！！]]></description><category></category></item><item><title><![CDATA[从跨项目预览到分层架构：一次 `postMessage` 封装的深度思考]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/161202165</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/161202165</guid><author>duduanwang</author><pubDate>Mon, 18 May 2026 21:55:14 +0800</pubDate><description><![CDATA[最近在一个管理后台项目中，我需要实现一个“跨项目预览”功能：点击后台的一条数据，在一个新窗口中打开另一个独立前端项目的预览页面，并将完整的数据传递过去。两个项目部署在不同域名下，无法共享状态，也不能简单依赖 URL 参数（数据可能很大、结构复杂）。显然，浏览器的是唯一的选择。为什么拆这么多层？那个组件是不是有点多余？带着这些疑问，我深入阅读了代码，并和同事进行了一番讨论。最终，我不只理解了这套设计，更对“分层思想”有了全新的体会。]]></description><category></category></item><item><title><![CDATA[AI前端开发面试题分享]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/161172041</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/161172041</guid><author>duduanwang</author><pubDate>Sun, 17 May 2026 22:32:42 +0800</pubDate><description><![CDATA[Promise 是 JavaScript 异步编程的一种解决方案。它代表一个尚未完成但将来会完成的异步操作，有三种状态：pending、fulfilled、rejected，状态一旦改变就不可逆。]]></description><category></category></item><item><title><![CDATA[AI前端开发面试题分享]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/160868912</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/160868912</guid><author>duduanwang</author><pubDate>Thu, 07 May 2026 22:57:14 +0800</pubDate><description><![CDATA[技术栈示例前端：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 缓存。]]></description><category></category></item><item><title><![CDATA[前端修行日记之JS 原型与 AI基础常识]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/160799152</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/160799152</guid><author>duduanwang</author><pubDate>Tue, 05 May 2026 19:59:24 +0800</pubDate><description><![CDATA[js中没有传统的类继承，实现继承的方式就是通过原型链。理解原型链，是真正掌握 JS 继承、this、对象机制的关键。]]></description><category></category></item><item><title><![CDATA[前端与AI结合实战分享]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/160773366</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/160773366</guid><author>duduanwang</author><pubDate>Mon, 04 May 2026 21:28:27 +0800</pubDate><description><![CDATA[接口调用 + 流式数据解析 + 业务场景落地。吃透各大平台AI API 差异，熟练掌握等常用参数在 React / Vue 中封装通用AI请求、流式Hook，减少重复造轮子学习前端本地轻量化模型，实现离线AI能力，不依赖第三方接口只要多动手实战，把接口、流式解析、参数配置练熟，就能把AI能力无缝集成到任何前端项目中。]]></description><category></category></item><item><title><![CDATA[LangChain.js v1.x 零基础入门教程 2026最新版，JS开发者快速上手AI应用]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/160707311</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/160707311</guid><author>duduanwang</author><pubDate>Sat, 02 May 2026 11:00:38 +0800</pubDate><description><![CDATA[本项目是LangChain.js v1.x系统化学习教程，包含完整文档与可直接运行的源码，面向国内开发者优化，默认使用魔搭社区API，无需境外账号即可运行全部案例。项目采用教程与代码分离结构，文档用于学习理解，源码用于直接运行验证，降低入门门槛，提升学习效率。适用版本：LangChain.js v1.x运行环境：Node.js 20及以上技术栈：JavaScript、LangChain.js、Zod、国内大模型API项目特点：版本最新、国内可用、全案例可运行、零基础友好、持续维护。]]></description><category></category></item><item><title><![CDATA[深入理解 async/await的原理]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/160534303</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/160534303</guid><author>duduanwang</author><pubDate>Sun, 26 Apr 2026 22:31:32 +0800</pubDate><description><![CDATA[JavaScript 是单线程语言，异步编程是前端、Node.js 开发的核心基石。从最初的回调函数，到Promise链式调用，再到 ES6Generator让异步代码更易读、易维护、更贴近人类同步思维。而 ES8 推出的，是目前 JavaScript 异步编程最优、最主流、最优雅的终极解决方案。本文从底层原理出发，结合Generator、Thunk 函数、co 库，带你彻底吃透语法糖的前世今生。是 Generator + Promise + co 自动执行器的官方语法糖。async。]]></description><category></category></item><item><title><![CDATA[只知道JS有事件循环？带你搞透JavaScript运行机制、V8原理、WebWorker核心知识]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/160522615</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/160522615</guid><author>duduanwang</author><pubDate>Sun, 26 Apr 2026 11:07:12 +0800</pubDate><description><![CDATA[我们可以用一句话概括JavaScript引擎的作用：简单来说，JS引擎就是JavaScript代码的翻译官和执行者。它负责将我们写的人类可读的JS代码，转换成计算机能够理解和执行的机器指令。没有JS引擎，JS代码就只是一堆毫无意义的字符串。执行上下文是JS引擎用来跟踪代码执行状态的抽象概念。每当JS引擎开始执行一段代码时，它都会创建一个对应的执行上下文。全局执行上下文：只有一个，在程序开始执行时创建。]]></description><category></category></item><item><title><![CDATA[手写一个 LRU 缓存，搞懂浏览器缓存背后的秘密]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/160503096</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/160503096</guid><author>duduanwang</author><pubDate>Sat, 25 Apr 2026 15:47:07 +0800</pubDate><description><![CDATA[为了满足 O(1) 的复杂度，我们首先排除了单纯的数组（查找需要遍历，复杂度 O(n)）。通常我们可能会想到 Object，但 Object 的键值对顺序在旧版本 JS 中是不确定的（虽然现在大部分引擎按插入顺序，但语义上不如 Map 严谨）。ES6 的Map是完美的选择：查找快：基于哈希表，查找复杂度 O(1)。有序性Map会记住键的插入顺序。新插入的数据排在最后（代表“最近使用”）。最早插入的数据排在最前（代表“最久未使用”）。利用这个特性，我们只需要维护好这个顺序，就能实现 LRU。]]></description><category></category></item><item><title><![CDATA[for of,for in以及传统for循环的区别与不同场景下的使用选择]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/160500765</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/160500765</guid><author>duduanwang</author><pubDate>Sat, 25 Apr 2026 13:24:37 +0800</pubDate><description><![CDATA[在深入对比之前，我们先来认识一下这三位主角。传统for循环：经验丰富的“老将”这是最原始、最基础的循环结构，几乎所有编程语言都支持。它像一个精确的指挥官，通过一个计数器（通常是i）来控制循环的开始、条件和步进。const fruits = ['苹果', '香蕉', '橙子'];i++) {console.log(`索引${const fruits = [ '苹果' , '香蕉' , '橙子' ];i ++) {]]></description><category></category></item><item><title><![CDATA[深入剖析Vue2与Vue3响应式原理：从Object.defineProperty到Proxy的演进]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/160500262</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/160500262</guid><author>duduanwang</author><pubDate>Sat, 25 Apr 2026 13:00:35 +0800</pubDate><description><![CDATA[Vue2的缺陷：数组下标监听不到、对象新增属性需用$set、初始化递归遍历性能差。Vue3的改进（Proxy优势）：拦截所有操作、懒代理初始化快、天然支持数组和新增属性。ref的存在原因：Proxy无法代理基本类型，ref包装后实现基本类型响应式，以及其自动解包机制。]]></description><category></category></item><item><title><![CDATA[解决登陆“Gemini 页面提示：Something went weong Try again later 出了点问题，稍后再试”的方法]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/159860328</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/159860328</guid><author>duduanwang</author><pubDate>Sun, 05 Apr 2026 19:23:53 +0800</pubDate><description><![CDATA[本文介绍在登陆谷歌Gemini的时候，出现错误的解决方法。]]></description><category></category></item><item><title><![CDATA[前端项目实现光暗主题切换的完整方案]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/159770891</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/159770891</guid><author>duduanwang</author><pubDate>Thu, 02 Apr 2026 21:30:26 +0800</pubDate><description><![CDATA[CSS自定义属性（也称为CSS变量）是目前最推荐的主题切换实现方式。它是原生CSS特性，具有天然的性能优势，并且与现代前端框架兼容性良好。CSS变量的核心优势在于其声明式的能力。我们可以在根元素上定义一组变量，然后在需要使用这些值的地方直接引用。当主题发生变化时，只需修改变量的值，整个页面的颜色就会自动更新。这种方式不仅代码简洁，而且维护成本极低。:root {body {从上面的代码可以看出，我们定义了一套完整的颜色变量体系，涵盖了背景色、文本色、主色调和边框色等常见场景。]]></description><category></category></item><item><title><![CDATA[Vue3 虚拟列表实现原理与实战]]></title><link>https://blog.youkuaiyun.com/duduanwang/article/details/159252933</link><guid>https://blog.youkuaiyun.com/duduanwang/article/details/159252933</guid><author>duduanwang</author><pubDate>Thu, 19 Mar 2026 21:47:11 +0800</pubDate><description><![CDATA[在日常开发中，我们经常会遇到需要展示大量数据的场景，比如展示几千条甚至上万条数据列表。如果直接将所有数据渲染到页面中，会导致严重的性能问题，页面会变得卡顿甚至崩溃。虚拟列表（Virtual List）正是为了解决这一问题而诞生的技术。本文将介绍虚拟列表的核心原理，并基于 Vue3 手写一个完整的虚拟列表组件。虚拟列表是一种按需渲染的技术，它只渲染当前可视区域内的列表项，而不是一次性渲染所有数据。想象一下，你有一本1000页的书，但你在任何时候只能看到其中的一页。]]></description><category></category></item></channel></rss>