zrender源码分析2--初始化Storage

接上次分析到初始化ZRender的源码，这次关注内容仓库Storage的初始化

入口1：new Storage();

// zrender.js
/**
 * ZRender接口类，对外可用的所有接口都在这里！！
 * storage（M）、painter（V）、handler（C）为内部私有类，外部接口不可见
 * 非get接口统一返回支持链式调用~
 *
 * @param {string} id 唯一标识
 * @param {HTMLElement} dom dom对象，不帮你做document.getElementById
 *
 * @return {ZRender} ZRender实例
 */
function ZRender(id, dom) {
	this.id = id;
	this.env = require('./tool/env');

	this.storage = new Storage();
	this.painter = new Painter(dom, this.storage);
	this.handler = new Handler(dom, this.storage, this.painter);

	// 动画控制
	this.animatingShapes = [];
	this.animation = new Animation({
		stage : {
			update : getAnimationUpdater(this)
		}
	});
	this.animation.start();
}

初始化工作做了如下事情：

• 初始化如下容器：常规形状、zlevel排列的形状、高亮层容器、数据改变的zlevel

• 初始化最大zlevel为0

// Storage.js
/**
 * 内容仓库 (M)
 * 
 */
function Storage() {
	// 所有常规形状，id索引的map
	this._elements = {};

	// 所有形状的z轴方向排列，提高遍历性能，zElements[0]的形状在zElements[1]形状下方
	this._zElements = [];

	// 高亮层形状，不稳定，动态增删，数组位置也是z轴方向，靠前显示在下方
	this._hoverElements = [];

	// 最大zlevel
	this._maxZlevel = 0; 

	// 有数据改变的zlevel
	this._changedZlevel = {};
}

 

入口2：清除图形

// zrender_demo.html
zr.clear();

// zrender.js
/**
 * 清除当前ZRender下所有类图的数据和显示，clear后MVC和已绑定事件均还存在在，ZRender可用
 */
ZRender.prototype.clear = function () {
	this.storage.del();
	this.painter.clear();
	return this;
};

这边的清除操作由于是全局清理，所以代码很简单，将各容器置空，并标记所有图层数据均已修改（Painter会根据这个进行具体的清理操作）。

至于部分清除，我们还是晚点再看吧。

// Storage.js
/**
 * 删除，shapeId不指定则全清空
 * 
 * @param {string= | Array} idx 唯一标识
 */
Storage.prototype.del = function (shapeId) {
	if (typeof shapeId != 'undefined') {
		// ......
	}
	else{
		// 不指定shapeId清空
		this._elements = {};
		this._zElements = [];
		this._hoverElements = [];
		this._maxZlevel = 0;         //最大zlevel
		this._changedZlevel = {      //有数据改变的zlevel
			all : true
		};
	}

	return this;
};

 

入口3：storage中添加图形

// zrender.js
/**
* 添加图形形状
*
* @param {Object} shape 形状对象，可用属性全集，详见各shape
*/
ZRender.prototype.addShape = function (shape) {
this.storage.add(shape);
return this;
};

添加的shape属性如下：

• 调用shape/Base的updateNeedTransform更新transform

• 将shape添加到上面提到的容器中

 // Storage.js
/**
 * 添加
 * 
 * @param {Shape} shape 参数
 */
Storage.prototype.add = function (shape) {
	shape.updateNeedTransform();
	shape.style.__rect = null;
	this._elements[shape.id] = shape;
	this._zElements[shape.zlevel] = this._zElements[shape.zlevel] || [];
	this._zElements[shape.zlevel].push(shape);

	this._maxZlevel = Math.max(this._maxZlevel, shape.zlevel);
	this._changedZlevel[shape.zlevel] = true;

	return this;
};

如上代码，依次更新了所有常规形状容器、根据zlevel排列的容器（二维数组）；更新maxZlevel；标记level： 0需要更新。

最后我们看下添加好图形后的storage对象

显然已成功将circle添加。