源码解读之zrender-入口(2)

00 小结

入口先分析到这里，还是挺简单的。收获：

• 如何找一个工程的入口文件：browser = browser+mjs > module > browser+cjs > main
• zrender 初始化做了 registerPainter 操作，后续看看到底注册了什么
• zrender init() 除了初始化实例，还将实例保存在全局变量 instances 中。获取 zr 实例getInstance(id)，销毁实例 dispose()，销毁所有实例 disposeAll()。后续看 init 方法中调用的 Zrender 类做了什么操作。

01 工程目录

该如何找一个工程的入口文件呢，参考[[狀 package.json 正确配置入口文件]]文章可知，这里的入口是工程中的index.js，它的主入口就是 all.js 文件。

export * from './lib/all.js'

src 源码目录如下，留到后面补文件注释。

├── Element.ts
├── Handler.ts
├── PainterBase.ts
├── Storage.ts
├── all.ts
├── animation
├── canvas
├── config.ts
├── contain
├── core
├── debug
├── dom
├── export.ts
├── global.d.ts
├── graphic
├── mixin
├── svg
├── svg-legacy
├── tool
└── zrender.ts

02 程序主入口

根据以上分析找到 all.ts 文件，这里做了一些初始化的事情：registerPainter，注册绘图工具，默认注册了 canvas 和 svg。

// src/all.ts
export * from './zrender';
export * from './export';

import {registerPainter} from './zrender';
import CanvasPainter from './canvas/Painter';
import SVGPainter from './svg/Painter';
registerPainter('canvas', CanvasPainter);
registerPainter('svg', SVGPainter);

从使用方式来看，zrender 导出了一个对象，这个对象上面有一个init的方法，接收一个DOM对象，所以让我们看看 init 方法做了什么吧。

zrender.init(document.getElementById("canvas"))

03 初始化 init()

init 方法接受一个 dom 元素和一些 options，调用 init 方法会 return 一个实例化对象，内部将实例保存到全局变量 intstances 中。

// src/zrender.ts
export function init(dom?: HTMLElement | null, opts?: ZRenderInitOpt) {
    const zr = new ZRender(zrUtil.guid(), dom, opts);
    instances[zr.id] = zr;
    return zr;
}

04 获取 zr 实例 getInstance(id)

需要传入实例 id

export function getInstance(id: number): ZRender {
    return instances[id];
}

05 销毁 dispose()

/** Dispose self. */
dispose() {
	this.animation.stop();

	this.clear();
	this.storage.dispose();
	this.painter.dispose();
	this.handler.dispose();

	this.animation =
	this.storage =
	this.painter =
	this.handler = null;

	delInstance(this.id);
}

function delInstance(id: number) {
    delete instances[id];
}

export function disposeAll() {
    for (let key in instances) {
        if (instances.hasOwnProperty(key)) {
            instances[key].dispose();
        }
    }
    instances = {};
}