# 架构设计

TypeSafe 发布的 Jev 故意不生成文本。它把"判断"从"生成"里拆出来：输入业务状态，输出类型化的 Choice、Score、Noul 与置信度。本文梳理它的三个原语、判断与执行分离的工程模式，以及它在 Agent 链路里最适合充当的门控层角色。

一个面向 agent 的画布光能渲染还不够——agent 得能读懂画布现在长什么样，还得能改它。本文记录如何给 sky-canvas 设计 snapshot + ops 协议，让 LLM 能以"观察→引用→增量改"的循环持续编辑一张画布，并实测用 45 条 ops 从空白画布生成完整星图。

上篇讲了怎么用实例化渲染让 WebGPU 一次 draw call 画十万个矩形。这篇讲后来发生的事：把同样手法套到圆、线、文字时，一个 GPU buffer 复用 bug 连续犯了两轮。这是一篇关于"为什么一个修过的 bug 会换个地方重新长出来"的复盘。

无限画布最硬的性能瓶颈，是当画布上堆了十万个对象时还要保持 60fps。本文记录在给 sky-canvas 做 WebGPU 渲染底座时，如何用实例化渲染把海量矩形的绘制从 O(N) 个 draw call 压到 O(1)，实现 50 万对象单次 draw call 满帧 60FPS。

以 Hermes Agent 源码为主线进行深度架构剖析，从运行时形态、工具系统、长期记忆、任务编排、可插拔性、可观测性、安全模型、社区生态八个工程化维度与 OpenClaw 进行结构化对比。面向工程师、架构师和研究者，侧重讲清架构意图与设计取舍。

从 AI Coding Agent 的落地现实出发，解释 Harness Engineering 为什么会在最近迅速升温。文章从定义、背景、关键能力、与 Tool Calling 的区别，以及它对 Agent 产品竞争格局的影响几个角度展开，讨论为什么当模型能力逐渐拉平后，真正决定 Agent 可用性的，往往是它背后的执行系统工程。

深入解析 AI Agent 开发中的三个核心概念：Prompt、MCP 和 Agent Skill。从基础定义到实际应用，通过代码示例和对比分析，帮助你理解它们的区别与联系，掌握如何正确选择和使用这些技术组件来构建高效的 AI Agent 系统。

深入探讨 Coding Agent 架构中 System Prompt 的正确处理方式。分析将系统提示词存入历史消息的常见问题，提出 Stateless Agent 的改进方案，并结合 Prompt Caching 技术实现成本优化。涵盖 Anthropic、OpenAI、Google、DeepSeek 等主流厂商的缓存策略对比，帮助开发者构建灵活、可扩展的 Agent 架构。

本文将深入探讨 browser-use 的实现，分析其如何用 1400 行 JavaScript 代码实现让 AI 精准识别网页中的交互元素，并探讨其在自动化测试、用户行为分析等领域的应用前景。

目录 在PixiJS中，滤镜（Filters）和混合模式（Blend Modes）是实现丰富视觉效果的强大工具。本文将深入源码，解析它们的工作原理和实现细节。 滤镜基础 Filters 滤镜可以为显示对象（DisplayObject... 涵盖前端开发、架构设计、源码解析等技术要点。

前言 PixiJS 作为一款高性能、高度模块化的 2D WebGL 渲染引擎，已成为许多大型互动项目、游戏和可视化应用的首选技术。其强大的适应性和扩展能力很大程度上归功于其精心设计的插件（扩展）系统。 涵盖前端开发、架构设计、源码解析等技术要点。

一、引言 PixiJS 是一个强大的 2D WebGL 渲染引擎，除了核心的渲染功能外，还提供了完整的事件系统来处理用户交互。事件系统作为连接渲染内容与用户交互的重要桥梁，在整个引擎中扮演着关键角色。 涵盖前端开发、架构设计、源码解析等技术要点。

概述 Graphics类是PixiJS中的一个核心渲染类，它提供了一套完整的2D图形绘制系统。主要用途包括： 1. 绘制基础图形，如线条、圆形、矩形等 2. 为这些图形添加颜色和填充效果 3. 创建复杂的遮罩（mask） 4. 定义复杂... 涵盖前端开发、架构设计、源码解析等技术要点。

在现代网页游戏和图形应用中，性能是一个至关重要的因素。PixiJS 作为一个强大的 2D 渲染引擎，引入了批处理 Batching 系统，以提高渲染效率。今天，我们将深入探讨PixiJS v8的批处理系统，了解其工作原理及其如何提升渲染性能... 涵盖前端开发、架构设计、源码解析等技术要点。

AutoDetectRenderer工作原理 在PixiJS中，为了适应不同设备和浏览器的性能需求，引擎提供了一个自动检测渲染器的方法：autoDetectRenderer。 涵盖前端开发、架构设计、源码解析等技术要点。

> 友情提示，本文篇幅较长，且多为代码细节解释。若你对细节不感兴趣，可直接跳转到第三章查看类图，了解 Container 类的整体架构；或者在有需要时，找到对应方法查看详细解释。 涵盖前端开发、架构设计、源码解析等技术要点。

深入解析PixiJS核心Application模块的源码实现和架构设计，详细剖析Application类如何整合渲染器管理、场景图管理和Ticker系统，揭示其初始化流程、生命周期管理和性能优化机制。通过源码分析展示Application模块如何简化2D图形应用开发，为开发者构建高性能游戏和交互应用提供深度技术洞察。

以金庸武侠为背景总览软件设计的六大原则：单一职责、开闭、里氏替换、接口隔离、依赖倒置与迪米特法则。说明 SOLID 五原则与迪米特法则各自约束的是什么、为什么会互相牵扯，并给出每一原则的独立成篇入口。

以张无忌的九阳神功为引，讲清依赖倒置原则：高层模块与低层模块都应依赖抽象。含数据存储的重构示例、依赖注入在前端的做法，以及测试替身与解耦的关系。

以王语嫣通晓各派武学为引，讲清接口隔离原则：客户端不该依赖它用不到的方法。含"工作和吃饭"接口的拆分示例，以及 TypeScript 中把胖接口拆成小接口的实践。

以黄药师的性格为引，讲清迪米特法则：一个对象应当对其他对象知道得尽可能少。含汽车与引擎交互的重构示例、链式调用为何容易违背该法则，以及前端组件通信中的边界。

以郭靖的成长历程为引，讲清里氏替换原则：子类对象应当能替换父类对象而不改变程序行为。含动物类继承的反例、契约式设计的判定方法，以及前端组件继承中的常见违背。

以张三丰的太极拳为引，讲清开闭原则：对扩展开放、对修改封闭。含形状扩展的重构示例、用策略与工厂消除 if-else 的做法，以及前端插件化与表单渲染中的应用。

以令狐冲的独孤九剑为引，讲清单一职责原则：一个类只承担一个变更理由。含职责拆分的判定方法、员工管理与报酬管理的重构示例，以及在前端表单校验、动画、数据请求中的落地场景。

策略模式（Strategy Pattern）是一种行为型设计模式，它定义了一系列算法，并将每个算法封装起来，使它们可以互相替换。这种模式使得算法的变化不影响使用算法的客户。策略模式提供了在运行时选择算法的机制，增加了系统的灵活性。

迭代器模式（Iterator Pattern）是一种行为型设计模式，它提供了一种方法顺序访问一个聚合对象中的各个元素，而无需暴露该对象的内部表示。通过迭代器模式，可以对不同的数据结构进行遍历，而不需要了解这些数据结构的内部实现。

深入解析PixiJS高性能2D渲染引擎的源码架构和核心设计理念，详细剖析其WebGL/Canvas双渲染后备机制、模块化架构设计、渲染管线实现和性能优化策略。通过源码分析揭示PixiJS如何实现跨平台高效图形渲染，为开发者理解现代图形引擎架构和构建自定义渲染解决方案提供深度技术参考。

访问者模式（Visitor Pattern）是一种行为型设计模式，它允许你在不修改对象结构的前提下定义作用于这些对象的新操作。它通过将操作行为从对象中分离出来，放置在一个访问者（Visitor）对象中，使得行为可以动态地添加到对象结构中。这个模式特别适用于对象结构较为稳定，而行为规则频繁变化的场景。

模板方法模式（Template Method Pattern）是一种行为型设计模式，它定义了一个操作中的算法的骨架，而将一些步骤延迟到子类中。模板方法使得子类可以在不改变算法结构的情况下，重新定义算法中的某些步骤。

状态模式（State Pattern）是一种行为型设计模式，它允许对象在内部状态发生改变时改变其行为，对象看起来好像修改了它的类。状态模式的主要目的是使得状态转换的逻辑集中管理，通过引入状态对象，使得状态切换和行为变化变得更加可维护和扩展。

深入解析观察者模式的核心原理与实现机制，详细剖析Subject-Observer一对多依赖关系的设计思想。包含完整的JavaScript代码实现、天气预报系统实战案例和前端应用场景。讲解事件驱动编程、状态变化通知机制，以及在GUI应用、MVC架构中的最佳实践。

备忘录模式（Memento Pattern）是一种行为型设计模式，允许在不破坏封装性的前提下，捕获对象的内部状态，并在将来需要时恢复到原先的状态。主要应用于支持撤销和恢复操作的应用程序中，例如文本编辑器、游戏存档系统等。

中介者模式（Mediator Pattern）是一种行为型设计模式，它通过引入一个中介者对象，来封装一系列对象之间的交互操作，从而使这些对象不再相互直接引用，降低了对象之间的耦合度。这使得一个对象的变化可以独立于其他对象的变化，更加灵活和可拓展。

解释器模式（Interpreter Pattern）是一种行为型设计模式，它提供了一种方法来定义语言的文法，并且通过解释这些语句来实现该语言的语法分析和执行。主要应用于编译器、查询语言和报告生成等场景。

深入解析React 18新增的useSyncExternalStore Hook的核心实现原理和运行机制，详细剖析其在React源码中的具体实现、状态订阅同步流程、并发模式下的处理策略。通过源码分析揭示该Hook如何解决外部状态管理库的订阅同步问题，为开发者理解React状态管理机制和构建高性能状态管理方案提供深度技术洞察。

命令模式（Command Pattern）是一种行为型设计模式，它将请求或操作封装成一个对象，从而使得可以用不同的请求、队列或日志来参数化其他对象。同时，它还支持可撤销的操作。

责任链模式是一种行为型设计模式，它允许多个对象都有机会处理请求，从而避免请求发送者与多个请求处理者耦合在一起。这些对象连成一条链，并沿着这条链传递请求，直到有一个对象处理它为止。

深入解析Zustand轻量级状态管理库的核心源码实现，详细剖析其订阅发布机制、状态更新流程、中间件系统和TypeScript类型设计。通过逐行代码分析，揭示Zustand如何以极简的API设计实现高效的状态管理，对比Redux、MobX等方案的优劣，为开发者提供状态管理库选型和自定义状态管理方案的技术参考。

在软件设计中，代理模式（Proxy Pattern）是一种结构型设计模式。它为其他对象提供一种代理，并由代理对象控制对原对象的访问。代理模式常用于延迟对象的创建、控制对对象的访问以及提高系统的安全性。

享元模式是一种结构型设计模式，关注于通过共享机制来有效地支持大量细粒度对象的复用，以减少应用程序的内存使用。这种模式尤其适用于那些对象数量众多，且对象状态大部分可以外部化的场景。

在软件设计中，外观模式（Facade Pattern）是一种结构型设计模式。它为子系统中的一组接口提供了一个统一的高层接口。外观模式定义了一个高层接口，这个接口使得这一子系统更加容易使用。通过构建一个与客户端交互的外观接口，隐藏子系统的复杂性，从而使得子系统更易于使用和维护。

在软件设计中，装饰器模式（Decorator Pattern）是一种结构型设计模式。它允许向一个现有对象添加新的功能，同时又不改变其结构。装饰器模式通过创建一个装饰类来包装原始类，从而使得原始类和装饰类可以独立变化。

在软件设计中，组合模式（Composite Pattern）是一种结构型设计模式。它的主要目的是将对象组合成树形结构以表示“部分-整体”的层次结构。组合模式使得用户对单个对象和组合对象的使用具有一致性。这在处理复杂的嵌套结构时尤为有用，例如文件系统、组织架构、图形处理等。

在软件设计中，桥接模式（Bridge Pattern）是一种结构性设计模式。它的主要目的是将抽象部分与实现部分分离，使它们能够独立变化。这种模式通过引入抽象层，减少了抽象与实现之间的耦合，从而实现更灵活的代码设计。

适配器模式（Adapter Pattern）是一种结构性设计模式，通过在目标接口和现有接口之间引入适配器类，将不兼容的接口转换为兼容接口，从而使得原本无法直接协作的类可以一起工作。

在软件设计中，原型模式（Prototype Pattern）是一种创建型设计模式。它的主要思想是通过复制已有的实例来创建新对象，而不是通过类构造器来创建。这种模式特别适用于对象的创建代价较高，或者需要多个几乎相同的对象时。通过原型模式，我们可以高效地创建对象，并且更灵活地管理对象的状态。

单例、工厂、抽象工厂、建造者、原型都被归为创建型模式，但它们解决的并不是同一件事。这篇不复述各自的实现，而是把"创建对象"拆成几种不同的麻烦，给出按麻烦找模式的对照表和两组最容易混的选择，并链接到各自独立成篇的详解。

在软件设计中，建造者模式（Builder Pattern）是一种创建复杂对象的设计模式。它的主要思想是将对象的构造过程分离出来，使得同样的构建过程可以创建不同的表示。

在软件设计中，工厂模式（Factory Pattern）是一种创建对象的设计模式。它的主要思想是定义一个接口或基类，通过该接口或基类让子类决定实例化哪一个具体类。工厂方法使得实例化过程延迟到子类。本文将介绍工厂模式、抽象工厂模式，并探讨它们在前端开发中的应用场景和一些典型案例。

全面解析单例模式的实现原理和应用场景，详细对比饿汉式、懒汉式、双重检查锁等多种实现方式。深入讲解JavaScript中的单例模式最佳实践，包含配置管理器、数据库连接池等实际案例。分析单例模式的优缺点、线程安全问题和现代前端开发中的应用策略。

函数式编程是一个强大且日益流行的编程范式，它将函数作为程序构建的基本单元，并强调使用纯函数和不可变数据来编写代码。在JavaScript中，函数式编程的概念可以帮助开发者编写出更简洁、更可维护的代码。本文将深入探讨函数式编程在JavaScript中的应用，帮助你理解其核心概念，特性，以及如何在日常开发中实践。

深入解析VSCode大型开源项目中依赖注入系统的设计原理和实现细节，详细剖析instantiation模块的核心组件：服务标识符、依赖描述符、实例化服务、依赖关系图等。通过源码分析展示如何在TypeScript项目中构建企业级的依赖注入框架，为大型前端应用的架构设计提供实战参考和最佳实践指导。

深入解析依赖注入设计模式的核心原理和实践应用，详细阐述控制反转（IoC）概念和依赖注入的三种实现方式：构造函数注入、属性注入、接口注入。通过生动的厨师派对比喻和完整的JavaScript/TypeScript代码示例，展示如何构建高内聚、低耦合的代码架构，提升代码的可测试性、可维护性和可扩展性。