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

最新推荐文章于 2025-08-05 06:30:00 发布

原创

最新推荐文章于 2025-08-05 06:30:00 发布 · 448 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json #前端 #javascript

本文主要解析zrender的入口文件all.ts，包括工程目录、程序主入口、初始化init()、获取zr实例getInstance(id)以及销毁dispose()。通过分析，了解到zrender在初始化时注册了绘图工具，并将实例保存在全球变量中，便于后续操作。

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

最低0.47元/天解锁文章