- 博客(184)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 第 8 篇：Markdown 渲染引擎 —— 从流式解析到安全输出
本文介绍了构建流式安全的Markdown渲染管线的关键步骤。针对AI对话系统输出的复杂Markdown内容，推荐使用marked库进行渲染，因其体积小、速度快且支持流式处理。文章详细分析了流式渲染中的五大陷阱（未闭合代码块、粗体/斜体、表格、链接及公式冲突），并提出了完整的渲染管线方案：先保护公式占位符，修补未闭合标记，经marked解析后恢复公式，最后进行XSS防护。同时提供了自定义渲染器的实现代码，支持代码复制、语言高亮等功能，确保在流式场景下安全可靠地渲染多样化Markdown内容。
2026-02-12 09:57:59
265
原创 第 7 篇：性能优化 —— 大量消息下的流畅体验
本文探讨如何优化AI对话系统在大规模消息（1000+条）下的性能问题。通过分析不同消息量级的性能瓶颈（DOM节点过多、内存泄漏、渲染卡顿等），提出基于虚拟列表的核心解决方案，重点解决变高消息的测量难题。实现方案包含高度缓存、懒测量、二分查找等技术，配合流式节流和DOM回收机制，显著提升滚动流畅度。代码示例展示了生产级虚拟列表组件，支持动态高度计算、视窗范围优化和内存管理，有效解决了大规模消息场景下的性能问题。
2026-02-12 09:54:47
345
原创 第 6 篇：输入体验优化 —— 让用户爱上打字
本文是《从零构建跨端AI对话系统》系列的第6篇，聚焦提升输入框体验。文章指出80%的AI对话交互发生在输入框，并对比了"能用"与"好用"输入框的关键差异。重点实现自适应高度textarea：通过动态重置高度、读取scrollHeight并设置最大高度限制来实现。针对移动端键盘适配，详细分析了iOS和Android的差异行为，提供了基于visualViewport API的现代方案和降级方案，包括平台检测、安全区域处理和键盘高度计算。通过这些优化，打造支持多行自适应、跨
2026-02-12 09:51:21
230
原创 第 5 篇：会话管理 —— 多轮对话的上下文设计
本文介绍了构建跨端AI对话系统的会话管理模块实现方案。主要内容包括：1）设计了会话和消息分离的数据模型，优化存储和加载效率；2）使用IndexedDB实现数据持久化，支持会话元数据和消息内容的分开存储；3）提出完整的会话管理系统架构，涵盖会话生命周期管理、上下文窗口策略、历史消息分页加载等功能模块。通过合理的数据库设计和存储策略，解决了大量聊天记录的高效存取问题，为后续实现自动命名、分页加载等高级功能奠定了基础。
2026-02-12 09:48:24
168
原创 第 4 篇：数学公式渲染 —— 双区域渲染解决流式 + MathJax 的冲突
本文针对AI对话系统中流式输出公式闪烁问题，深入探讨了MathJax 3与KaTeX的技术选型及实现方案。通过对比分析两者的渲染速度、公式覆盖范围、包体积等关键指标，建议根据场景需求选择MathJax 3（完整LaTeX支持）或KaTeX（极致性能）。重点介绍了MathJax 3的正确配置方法，包括初始化设置、异步API使用以及错误处理机制，提供了避免公式闪烁的代码实现方案。最后指出将给出三框架（React/Vue/Svelte）的具体实现对照，为开发者构建跨端AI对话系统提供完整解决方案。
2026-02-12 09:45:05
522
原创 第 3 篇：消息气泡组件 —— 远比你想的复杂
本文介绍了如何构建一个生产级AI消息气泡组件，支持Markdown、代码高亮、公式混排等功能。首先分析了消息内容可能包含的多种元素（文本、Markdown、公式、代码块等），并设计了一个消息状态机来管理消息生命周期（loading/streaming/done/error/aborted）。接着介绍了必要的依赖库（marked/highlight.js/dompurify），重点讲解了流式安全的Markdown渲染方案，通过修补未闭合标记和保护公式等技术，确保在流式输入时能正确渲染内容。该组件还支持状态UI
2026-02-12 09:42:25
521
原创 第 2 篇：SSE 流式接入 —— 让 AI 一个字一个字地“打“出来
本文介绍了如何构建跨端AI对话系统的流式通信模块，重点解析了SSE（Server-Sent Events）技术的优势与实现方案。相比WebSocket和轮询，SSE更适合AI对话场景的单向数据流特性。文章详细对比了原生EventSource的局限性，推荐使用@microsoft/fetch-event-source库实现生产级SSE通信，支持POST请求、自定义Header和可控重连。 核心内容包括： 设计模型适配层统一不同大模型API（如OpenAI、通义千问、智谱等）的差异 实现SSE服务层，包含流式接
2026-02-12 09:39:20
496
原创 第 1 篇：架构设计 —— 一套代码如何适配移动端和 PC 端
本文介绍如何从零构建一个跨端AI对话系统，面向有Vue基础的前端工程师。通过响应式设计实现一套代码适配PC端和移动端：PC端采用侧边栏+主界面布局，移动端通过抽屉式菜单切换会话。文章详细讲解了设备检测方案（基于屏幕宽度和UA检测）、核心布局组件实现，以及状态管理逻辑。项目采用纯手写代码，不依赖UI框架，包含会话列表、消息区域、输入框等组件，并实现了虚拟滚动优化。所有代码可直接复制运行，帮助开发者快速搭建跨平台AI对话界面。
2026-02-12 09:35:57
623
原创 流式输出场景下的「双区域渲染」：让第三方 DOM 操作在 Vue 响应式更新中存活
本文探讨了在AI聊天应用中结合SSE流式输出与MathJax公式渲染时遇到的技术挑战。当使用Vue的v-html指令直接渲染流式内容时，每次更新都会导致MathJax渲染的公式节点被销毁重建，造成页面闪烁和性能问题。文章提出了"双区域渲染"解决方案：将显示区域划分为冻结区和流式区，冻结区通过原生DOM操作保留MathJax渲染结果，流式区仅处理最新内容。该方法通过智能分割文本、节流处理和公式检测等优化手段，有效解决了公式闪烁问题，同时保持了流式输出的实时性。
2026-02-12 09:20:09
643
原创 流式输出场景下的「MathJax双区域渲染」技术详解
摘要：解决AI聊天中公式闪烁问题的技术方案 在AI聊天场景中，通过SSE流式返回内容时，MathJax渲染的数学公式会出现闪烁问题。根本原因是Vue的v-html绑定会重写整个元素的innerHTML，导致MathJax生成的DOM节点被销毁。 解决方案采用DOM分区策略： 将内容分为冻结区（frozenContent）和待处理区（pendingContent） 冻结区通过ref直接操作DOM，避免Vue重写 待处理区使用v-html绑定显示流式尾部文本 关键方法包括： findSafeSplit：检测公式
2026-02-12 09:16:31
487
原创 关于 MathJax 重复初始化导致 “Cannot set property Package...“ 错误的排查与解决
这个修复基于**幂等性（Idempotency）**原则。这个错误的核心原因是。函数的开头增加了一个。
2025-12-02 14:46:37
404
原创 若依 (RuoYi-Vue) 框架中 `noCache` 的使用详解（解决页面不刷新问题）
本文深入解析RuoYi-Vue3框架中的路由缓存机制，重点探讨了noCache配置项的作用及实现原理。文章详细说明了如何通过路由配置和组件命名来正确控制页面缓存，分析了keep-alive与cachedViews的关联机制，并提供了常见问题的排查方法。特别强调了组件name与路由name必须保持一致的关键点，为开发者解决后台管理系统中的页面缓存问题提供了完整解决方案。
2025-12-01 15:18:50
668
原创 手写 call, apply, bind：不使用原生方法如何改变 this 指向
本文详细讲解了如何手写实现 JavaScript 中的 call、apply 和 bind 方法。核心原理是利用"隐式绑定"，通过将函数临时挂载到目标对象上执行来实现 this 的绑定。call 和 apply 的区别仅在于参数传递方式，而 bind 的实现最为复杂，需要考虑柯里化传参和 new 操作符调用时的特殊处理。文中提供了完整的代码实现和测试用例，帮助读者深入理解这三个关键方法的底层机制。
2025-11-28 16:47:45
454
原创 深拷贝(Deep Clone)的终极方案
本文系统讲解了JavaScript深拷贝的实现方案。从最简单的JSON序列化方法入手，分析了其丢失函数、Symbol等数据类型的缺陷；然后提出基础递归方案，解决了循环引用问题；最后通过WeakMap缓存和Reflect.ownKeys遍历，实现了能正确处理Symbol键、特殊对象（Date/RegExp）和循环引用的终极深拷贝函数。文章采用逐步优化的思路，从简单到复杂，最终给出了一个面试时可用的完整深拷贝解决方案。
2025-11-28 16:46:38
516
原创 彻底搞懂防抖(Debounce)与节流(Throttle)：源码实现与应用场景
防抖和节流是前端性能优化中常用的两种技术手段。防抖的核心思想是事件停止触发后延迟执行，适用于搜索框输入、窗口调整等场景；节流则是固定时间间隔执行一次，适用于滚动加载、拖拽等高频触发事件。两者的区别在于：防抖只在最后一次触发后执行，而节流按固定频率执行。本文详细介绍了它们的实现原理、应用场景，并提供了手写源码示例，包括防抖的立即执行参数和节流的两种实现方式（时间戳版和定时器版）。掌握这两种技术能有效解决高频事件带来的性能问题。
2025-11-28 16:43:24
358
原创 死磕 Promise：从零手写一个符合 Promises/A+ 规范的 Promise
本文深入解析如何手写实现一个符合 Promises/A+规范的 Promise。首先介绍 Promise 作为状态机的三种状态（pending/fulfilled/rejected）和核心架构，包括执行器函数的同步执行特性。然后逐步实现 then 方法的基础版本，处理同步和异步情况，使用发布订阅模式保存回调。重点讲解链式调用的实现原理，包括返回新 Promise 和递归解析返回值的过程。最后给出完整实现代码，包含微任务处理、循环引用检测、值穿透等细节。通过本文可以全面掌握 Promise 的核心机制和实现要
2025-11-28 16:40:01
394
原创 JavaScript 事件循环 (Event Loop) 机制详解
JavaScript采用单线程模型，通过事件循环(Event Loop)机制协调同步和异步任务执行。核心机制是将异步任务分为宏任务（如setTimeout）和微任务（如Promise.then），执行顺序遵循"同步代码>微任务>DOM渲染>宏任务"的优先级规则。典型执行流程：先执行同步代码，然后清空微任务队列，进行DOM渲染，最后执行一个宏任务并循环该过程。通过案例分析展示了async/await、Promise等异步操作的执行时序，并指出Promise构造函数是同步执
2025-11-28 16:38:18
294
原创 前端判断数据类型的所有方式详解
JavaScript 数据类型判断方法总结： typeof：适用于基本类型（除 null 外），但无法区分数组和对象 instanceof：检测引用类型和自定义类实例，但存在原型链修改风险 Object.prototype.toString：最准确可靠，可识别所有类型 constructor：可判断实例来源，但易被修改且不支持 null/undefined 特定方法：如 Array.isArray() 和 Number.isNaN() 提供专业判断 推荐优先使用 Object.prototype.toStr
2025-11-28 16:33:55
447
原创 Vue3 图片加载失败回退为默认图：最简、健壮的两种实现（含完整代码）
本文介绍了三种处理图片加载失败的Vue方案：1）组件内使用@error事件切换默认图，需注意解除事件防循环；2）全局指令v-img-fallback实现复用；3）封装<AvatarImg>组件统一管理样式。核心技巧包括：使用new URL()解析静态路径、固定图片尺寸防布局抖动、添加懒加载优化性能。建议根据项目规模选择方案，简单场景用方案一，复杂项目推荐组件化方案。
2025-08-28 15:17:18
575
原创 一文读懂宿主桥 HostBridge 的实现与用法：register/unregister/call 全面解析
摘要： HostBridge是一个轻量级宿主桥接器，包含注册（register）、注销（unregister）、调用（call）三个核心方法。它通过解耦宿主能力与业务逻辑，实现统一调用流程：注册时校验方法名和函数类型，调用时自动处理同步/异步，未注册则显式报错。设计亮点包括：强边界（命名规范、稳定数据结构）、工程化扩展（安全包装器、幂等注册）、容错策略（异常降级/默认值）。适用于微模块调用宿主能力（如鉴权、API聚合）的场景，通过类型约束和命名空间可进一步提升健壮性。该模式具有通用性，可复用于微前端等解耦架
2025-08-27 17:08:08
637
原创 用本地代理 + ZIP 打包 + Excel 命名，优雅批量下载跨域 PDF
本文提供了一套前端批量下载PDF并自动打包的解决方案。通过本地Node.js代理服务器实现跨域无感下载，支持从Excel表格中读取承办校名称和PDF链接，自动生成"名称-pdf名称.pdf"格式的文件名，最终将所有文件打包成ZIP压缩包。方案包含以下特点：1）避免多次另存为弹窗；2）内置跨域代理，返回正确的下载头信息；3）智能匹配Excel列名，自动处理异常文件名；4）默认仅绑定本机127.0.0.1确保安全性。项目结构简单，包含代理服务器、前端触发页面和Excel配置文件，支持Node
2025-08-18 17:12:11
547
原创 将HTML内容转换为Canvas图像，主流方法有效防止文本复制
此项目实现了将HTML内容转换为Canvas图像的功能，可有效防止文本被复制。适用于需要保护内容的场景，如试题系统、付费内容等。
2025-06-05 09:35:08
838
原创 前端实现大文件分片上传：原理、实现与优化
摘要： 分片上传技术有效解决大文件上传的稳定性问题。前端通过Blob.slice对文件切片，计算文件hash值实现秒传和断点续传，并发上传分片后通知服务器合并。优化方案包括并发控制、进度条显示等。该技术提升上传成功率与用户体验，需前后端配合实现，是处理大文件上传的高效方案。（149字）
2025-05-30 15:59:36
845
原创 Vue组件库开发实战：从0到1构建可复用的微前端模块
在日常开发中，我们经常需要在不同项目间复用组件，但直接复制代码显然不是一个好办法。如何开发一个可以即插即用的组件库呢？本文将从实战角度出发，手把手教你实现。如何使用Rollup构建组件库如何实现样式隔离如何支持主题定制最佳实践和注意事项。
2025-04-17 09:50:24
1306
原创 使用 JSZip 实现批量解压ZIP文件，修改文件名称并下载
本文介绍的示例代码展示了如何利用 JSZip 库与现代 JavaScript 异步编程技巧（如 Promise、async/await）来实现批量 ZIP 文件的处理与下载。加载动画提示：提升用户体验。并行下载与处理：利用 Promise.all 加快处理速度。ZIP 文件内部处理：使用 JSZip 解压、修改文件名、重新打包。自动下载：通过创建下载链接实现最终文件下载。错误处理：完善的错误捕获与提示，确保操作的健壮性。
2025-03-08 10:03:56
1016
原创 Vue3实现优雅的前端版本更新提示
在前端项目开发中,当我们发布了新版本后,需要及时通知用户刷新页面以获取最新代码。本文将介绍一种优雅的实现方案。: 使用localStorage存储版本号,便于对比。: 请求version.json时添加时间戳参数。: 使用setInterval定期检查版本更新。对于正在编辑的内容,建议提示用户先保存。可以根据业务需求调整检查频率。可以添加强制更新的机制。可以添加更新日志展示。
2025-02-14 15:48:01
910
原创 Vue 全局自适应大小：使用 postcss-pxtorem
在现代前端开发中，响应式设计已经成为不可或缺的一部分。尤其是在移动设备的普及下，保证网页在各种屏幕尺寸下的显示效果变得尤为重要。Vue.js 作为一个流行的前端框架，能够很方便地实现响应式设计。而在这方面， 是一个非常有用的工具，它可以将 px 单位自动转换为 rem 单位，从而实现更好的自适应布局。本文将介绍如何在 Vue 项目中使用 实现全局自适应大小。 是一个 PostCSS 插件，可以将 CSS 文件中的 px 单位转换为 rem 单位。通过这种方式，元素的大小可以根据根元素（）的字体大小进行自适
2025-01-22 10:49:11
1212
原创 Vue 生成二维码
通过以上讲解，我们实现了基于 Vue 的二维码生成功能，并扩展了更多实用场景。二维码技术在现代前端开发中应用广泛，掌握其实现方式，可以更好地满足业务需求。希望本文对你有所帮助！
2024-11-18 14:59:17
1310
原创 在 Vue 项目中引入字体文件的详细指南
在 Vue 项目中引入自定义字体文件，可以通过多种方式实现。这取决于你的项目结构、构建工具以及字体文件的来源。本文将详细介绍如何通过不同方法引入本地字体文件以及从外部引入字体。
2024-10-14 16:28:54
4507
原创 若依如何切换TAB标签不刷新页面
所以在编写路由 router 和路由对应的 view component 的时候一定要确保 两者的 name 是完全一致的。(切记 name 命名时候尽量保证唯一性 切记不要和某些组件的命名重复了，不然会递归引用最后内存溢出等问题)一定要保证两者的名字相同，切记写重或者写错。默认如果不写 name 就不会被缓存，详情见。在系统管理-菜单管理-可以配置菜单页签是否缓存，默认为缓存。是强耦合的，而且查看文档和源码不难发现。默认是优先匹配组件的。
2024-10-12 17:22:08
1226
原创 git分支合并时忽略指定文件
2.在项目根目录下新建文件.gitattributes然后文件中写入需要忽略的文件名 + merge=ours, 一个文件占一行。1.在项目根目录下cmd窗口运行以下命令。分支合并忽略特定文件步骤。
2024-09-19 09:04:20
821
原创 如何看待“低代码”开发平台的兴起？
低代码开发平台的兴起，无疑是软件开发领域的一次重要变革。它提供了前所未有的效率提升和开发灵活性，同时也带来了质量和安全性的新挑战。在这一背景下，开发者和企业需要理性看待低代码平台的优缺点，充分利用其带来的机遇，同时谨慎应对潜在的风险。未来，随着技术的不断进步和完善，低代码平台有望在更多领域得到广泛应用，成为推动数字化转型的重要力量。
2024-08-12 10:05:28
524
原创 Vue 中使用vue-pdf
vue-pdf是一个基于pdf.js的 Vue 组件库，允许你在 Vue 应用中展示 PDF 文档。pdf.js是 Mozilla 开发的一个流行的 JavaScript 库，用于在 Web 浏览器中渲染 PDF 文件。通过vue-pdf，我们可以将 PDF 文件嵌入到 Vue 组件中，并提供一些基本的查看功能，例如页面导航和缩放。vue-pdf是一个强大的 Vue.js 组件，适合在 Web 应用中展示 PDF 文件。它基于 Mozilla 的pdf.js，提供了丰富的功能，包括页面导航、缩放、旋转等。
2024-08-12 10:03:07
2174
原创 Fabric.js 绘制图形 API 完全指南
Fabric.js 提供了一组强大的 API，用于绘制和操作各种图形对象。通过掌握这些 API 和参数，开发者可以创建丰富的图形应用。本文介绍了 Fabric.js 中所有的绘制图形 API 及其参数，希望能帮助您更好地使用 Fabric.js 进行开发。
2024-07-02 09:21:36
2125
原创 Pixi.js 使用指南
Pixi.js 是一个高性能的 2D 渲染引擎，广泛应用于游戏开发、动画制作和数据可视化。它基于 WebGL，提供了卓越的渲染性能，同时兼容 HTML5 Canvas 作为后备渲染器。本文将介绍 Pixi.js 的基本使用方法，涵盖初始化、绘制基本图形、处理事件和创建动画等内容。Pixi.js 是一个功能强大且高性能的 2D 渲染引擎，适用于各种需要复杂图形和动画的应用场景。通过本文的介绍，您应该已经掌握了 Pixi.js 的基本使用方法，包括创建应用、绘制基本图形、处理事件和动画等。
2024-07-02 09:19:07
3144
1
原创 Konva.js 使用指南
Konva.js 是一个用于创建 2D 图形的高性能 JavaScript 库，专注于提供丰富的 API 和灵活的图层管理。它适用于数据可视化、游戏开发和其他需要复杂图形和动画的应用场景。本文将介绍 Konva.js 的基本使用方法，包括初始化、绘制基本图形、处理事件和动画等。Konva.js 是一个功能强大且灵活的 2D 图形库，适用于多种复杂图形和动画场景。通过本文的介绍，您应该已经掌握了 Konva.js 的基本使用方法，包括创建舞台和图层、绘制基本图形、处理事件和动画等。
2024-07-02 09:16:57
1728
前端专业大学毕业设计响应式作品
2024-09-27
纯CSS丝滑边框线条动画
2024-09-27
好看有趣的单选效果源码
2024-09-27
uniapp图片涂鸦插件(支持多种涂鸦方式，图片放大缩小)
2024-05-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人