核心是将文本片段封装为有身份、有边界的不可变局部实体,携带id、类型、内容等元信息,与样式策略解耦,由注册中心统一管理并按需查表渲染。

核心不是让文本“带着样式走”,而是让每个文本片段成为有身份、有边界、可独立调度的局部实体——用轻量对象封装内容、类型和生命周期状态,再由渲染器按需查表取策,彻底切断硬依赖。
为每个文本片段创建不可变的局部实体对象
不要把字符串直接扔给渲染器。而是将每个到达的文本单元(比如一个加粗词、一行引用、一个内联链接)构造成一个独立的实体对象,例如:
- 包含稳定 ID(如 chunk-4b1e-link-02),基于内容哈希 + 类型 + 序号生成,不依赖全局索引
- 携带语义类型(type: "link")、原始内容(text: "GitHub")、解析标记(isParsed: false)等元信息
- 不含具体 CSS,也不持有渲染器引用,只表达“我是谁”和“我属于哪一类”
样式策略与实体解耦,交由注册中心统一管理
样式规则不再散落在组件或模板里,而是集中注册、按类型匹配:
- 建立一个轻量策略注册中心(非单例,可多实例),维护 type → 样式配置 + 行为逻辑 映射
- 例如:"code-inline" → { bg: "#f9fafb", fontFamily: "monospace", fontSize: "0.9em" }
- 渲染器拿到实体后,仅凭其 type 向注册中心查询当前生效策略,支持夜间模式切换、A/B 测试等运行时变更
渲染器通过 ID 主动查表,而非被动接收混合数据
渲染流程变成“拉取式”而非“推送式”:
- 渲染器遍历实体列表,对每个实体调用 render(entity.id)
- 内部根据 ID 查本地缓存或向注册中心获取对应策略,再组合生成最终 DOM 或 VNode
- 中断恢复时,只需检查哪些 ID 的 isRendered === false,重新触发对应渲染,无需重放整段流
实体支持状态追踪与增量更新
局部实体不只是“快照”,还承载轻量状态,支撑精细化控制:
- 记录 renderProgress: { done: 12, total: 28 },用于流式渲染进度条
- 标记 status: "pending" | "error" | "success",便于统一 fallback 处理
- 允许在不修改原始内容前提下,附加临时上下文(如编辑态高亮、协作光标位置)
不复杂但容易忽略:解耦的关键不在技术多炫,而在是否真正把“文本是什么”和“它该长什么样”分到两个可独立演进的职责里。











