自定义渲染器

Vitarx 的视图层与平台宿主解耦：框架核心通过 ViewRenderer 接口操作宿主节点，runtime-dom 提供了基于浏览器 DOM 的默认实现 DOMRenderer。通过 setRenderer() 替换渲染器，可以让 Vitarx 渲染到非 DOM 宿主（如 Canvas、WebGL、终端、小程序等自定义平台）。

setRenderer()

设置全局渲染器。必须在挂载任何应用之前调用。

类型定义

declare function setRenderer(renderer: ViewRenderer): void

参数

参数	类型	说明
`renderer`	`ViewRenderer`	平台渲染器实例

示例

import { DOMRenderer, setRenderer } from 'vitarx'

setRenderer(new DOMRenderer())

getRenderer()

获取当前设置的全局渲染器。

类型定义

declare function getRenderer(): ViewRenderer

ViewRenderer 接口

渲染器需要实现的宿主节点操作接口，方法按职责分为五组：

创建

方法	说明
`createElement(tag, parent)`	创建元素，`parent` 用于继承命名空间（SVG/MathML）
`createText(text)`	创建文本节点
`createComment(text)`	创建注释节点，通常用于锚点占位符
`createFragment(view)`	创建片段

类型判断

方法	说明
`isElement(node)`	判断是否为元素（类型守卫）
`isSVGElement(node)`	判断是否为 SVG 元素
`isMathMLElement(node)`	判断是否为 MathML 元素
`isFragment(node)`	判断是否为片段（类型守卫）

结构操作

方法	说明
`append(child, parent)`	添加子节点到父节点
`insert(child, anchor)`	插入节点到锚点之前；锚点不在文档中时不操作
`replace(newNode, oldNode)`	替换节点；旧节点不在文档中时不操作
`remove(node)`	删除节点

内容与属性

方法	说明
`setText(node, text)`	设置文本内容
`setAttribute(el, key, nextValue, prevValue)`	设置属性；`prevValue` 用于兼容卸载旧事件处理器

最小实现示例

以下是一个输出到控制台的极简渲染器骨架，演示接口的最小实现思路：

import type { ViewRenderer } from 'vitarx'

class ConsoleRenderer implements ViewRenderer {
  createElement(tag) {
    return { tag, children: [] }
  }

  createText(text) {
    return { text }
  }

  createComment(text) {
    return { comment: text }
  }

  createFragment() {
    return { children: [] }
  }

  isElement(node) {
    return 'tag' in node
  }

  isSVGElement() {
    return false
  }

  isMathMLElement() {
    return false
  }

  isFragment(node) {
    return 'children' in node
  }

  append(child, parent) {
    parent.children.push(child)
  }

  insert(child, anchor) {
    // 根据 anchor 在父节点中定位后插入
  }

  replace(newNode, oldNode) {
    // 在 oldNode 的父节点中原位替换
  }

  remove(node) {
    // 从父节点中移除
  }

  setText(node, text) {
    node.text = text
  }

  setAttribute(el, key, value) {
    el[key] = value
  }
}

setRenderer(new ConsoleRenderer())

提示：渲染器方法在视图更新路径上会被高频调用，实现时应尽量保持无副作用、无重计算。属性变更通过 setAttribute 统一分发，事件监听等特殊属性需在该方法内自行识别处理（参考 DOMRenderer 的实现）。