架构

关键模块（概念）

通用接口: leafer-interface

负责为其他模块定义简单、稳定的核心接口，方便扩展定制功能，及第三方参与插件开发

树结构: leafer-display

负责提供一个简单的树结构 Tree、Branch、Leaf，作为 UI 的基类，可在此基础上定义自己的 UI 框架

同时定义了性能优化的相关字段，方便根据不同场景做性能加速

渲染画板: leafer-canvas

负责封装与平台无关的画板接口，提供给渲染器、加速器使用，可扩展渲染平台，如小程序、Node.js、canvaskit 等

用户交互: leafer-interaction

负责收集原生界面交互事件，并转换为内部交互事件，达到可以操作界面和内部图形的目的，可扩展不同平台，如小程序、Node.js、canvaskit 等

数据处理器: leafer-data

负责采集通过 UI 组件属性输入的数据并进行处理，可通过扩展处理字符串对象、单位转换、相对单位、百分比的换算

布局器: leafer-layouter

负责页面布局、重绘、回流的高性能算法 （纯算法，与平台无关）

同时提供一个观察者： 负责观察树结构中的每一次变化

渲染器: leafer-renderer

负责按需自动渲染应用画面

通过观察者变化通知进行自动重绘

查找器: leafer-finder

负责通过 id、className、tag 等查找图形对象

可定制的模块

渲染画板: leafer-canvas

用户交互: leafer-interaction

数据处理器: leafer-data

布局器: leafer-layouter

渲染器: leafer-renderer

查找器: leafer-finder

可扩展的上层功能

ui 框架

负责提供用户可见的图形组件

加速器

负责针对不同场景进行性能优化

功能插件

满足个性化需求的插件

interface —— display (树结构) —— ui (图形框架) —— 默认h5，支持node、微信小程序 (官方扩展)
    |          |             |
    |          |             ╚—— 可自定义渲染平台 // 如其他平台小程序、canvaskit等
    |          |
    |          ╚—— 可自定义UI框架
    |
    |
    |——————— canvas (渲染画板) —— 默认h5，支持node、小程序等 (官方扩展)
    |          |
    |          ╚—— 可自定义渲染平台
    |
    |
    |——————— interaction (用户交互) —— 默认h5，支持node、微信小程序 (官方扩展)
    |          |
    |          ╚—— 可自定义交互事件
    |
    |
    |——————— data (数据处理器) —— 默认使用绝对单位 (性能好，占内存小)
    |          |
    |          ╚—— 可扩展相对单位、百分比单位
    |
    |
    |——————— layouter (布局器) —— 默认绝对单位布局 (性能好)
    |    |     |
    |    |     ╚—— 可替换 // 如自动布局、Flex布局
    |    |
    |    |—— renderer (渲染器) —— 可替换 // 支持局部重绘
    |    |
    |    ╚—— finder (查找器) —— 可替换 // 通过id、className、tag(类名) 查找图形
    |
    |
    |——————— event
    |
    |——————— math
    |
    |——————— task
    |
    |——————— runtime
    |
    ╚——————— debug


extends ———— booster (加速器) —— design (支持在线设计、白板、无代码平台等场景)
    |            |
    |            ╚—— 可扩展其他场景 // 如游戏、页面应用、文档类场景
    |
    |——————— 官方插件 —— animate (动画)
    |          |
    |          ╚—— 通用需求制作插件 // 如创建工具、编辑工具
    |
    |——————— 第三方插件
    |
    ╚——————— 可与Vue、React结合