Loading...
浏览器在不断迭代新功能的过程中,体积会越来越大。尽管我们想实现一个“小浏览器”,但在体积敏感的场景下,用户仍希望使用最小功能集。这就要求我们对现有功能进行合理拆分,力图实现最小核心 + 渐进式增强的模式。
下图展示了 @antv/g
的 bundle 组成情况。
完整版 @antv/g
由以下几部分组成:
@antv/g-lite
包含 画布,基础图形,事件系统,插件系统 等核心功能@antv/g-camera-api
提供完整相机动作和动画功能@antv/g-web-animations-api
提供兼容 Web Animations API 的动画系统@antv/g-css-typed-om-api
提供 @antv/g-css-layout-api
提供 @antv/g-dom-mutation-observer-api
提供 DOM Mutation Observer API精简版使用方式和完整版在核心功能使用上完全一致,例如创建画布、基础图形、使用渲染器等:
import { Canvas, Circle } from '@antv/g-lite';import { Renderer } from '@antv/g-canvas';
此时调用元素的动画方法将无任何效果:
circle.animate([], {});
需要手动引入 @antv/g-web-animations-api
后方可生效:
import { Canvas, Circle } from '@antv/g-lite';import '@antv/g-web-animations-api';
其他渐进式功能可使用类似方式按需引入。
下面详细介绍下拆分后各部分的功能。
以上功能的使用方式没有变化,示例:
import { Canvas, Circle } from '@antv/g-lite';import { Renderer } from '@antv/g-canvas';const canvas = new Canvas({container: 'container',width: 600,height: 500,renderer: new Renderer(),});const circle = new Circle({style: { r: 100 },});
@antv/g-lite
中包含了一个简单的相机实现,但无法使用相机动作和相机动画:
camera.pan(); // throw new Error('Method not implemented.');camera.createLandmark(); // throw new Error('Method not implemented.');
引入后方可正常使用。
为基础图形提供兼容 Web Animations API 的动画能力。缺少该功能仍可以调用 object.animate()
方法,但无任何效果。
CSS Typed OM API 允许使用 JS 操作解析后的属性值,它也是 CSS Houdini 的基础。以 width: '50%'
为例,字符串形式的属性值会被解析成 CSS.percent(50)
,方便进行下一步的计算。
我们提供了类似能力。
参考 CSS Layout API 提供布局能力。
在 DOM API 中,当我们想感知 DOM 树节点的修改,例如新节点加入、属性值变更,可以使用 MutationObserver。
在 G 中我们同样实现了这个 API,用来监听场景图中的变化。
在基础图形上提供兼容旧版本的方法,大部分在新版中都有兼容 DOM API 的实现。因此不推荐使用这些方法,后续随时可能移除:
this.children[index]