ArcGIS JSAPI 源码解读 之 Accessor元数据

ArcGIS作为一个出色的商业化体系软件,其横跨了多种不同的技术架构和编程语言,而其优秀之处就在于多种不同的产品和SDK之间实现了良好的兼容性。

Accessor作为整套SDK的底层数据结构,包括Webmap、WebScene、各种Renderers、各种Symbols都通过继承Accessor而来。为了让ArcGIS Maps SDK for JavaScript中的多种不同类型的数据与ArcGIS Pro桌面端、Enterprise Apps乃至移动端之间实现良好的交换,Esri通过基于JSON的通用可交换格式设计来提供技术上的支持。

正是因为这些软件体系层面的考虑,JavaScript SDK可能在运行时通过网络加载来自外部的JSON格式数据,并动态的将这些JSON数据转换为SDK内部基于Accessor的对象,从而满足SDK内部运行的需要。Esri官方将这个过程称之为"AutoCast",而基于JSON的对象描述首先会在Accessor内部进行解析,并生成更丰富和规范的内部数据结构,这是作为Accessor的元数据进行存储的。

在Accessor实现中,通过createSubclass继承并构建子类型时即生成了该类型的元数据。

JavaScript 复制代码
class Accessor {
	static createSubclass(args) {
		// 此处省略...
		const AccessorType = this;
		class o extends AccessorType {
			// 此处省略...
		}
		getPropertiesMetadata(o.prototype);
	}
}

getPropertiesMetadata为动态生成的新类型附加元数据存储对象__accessorMetadata__,这里由于逐级继承的缘故,函数检查了__accessorMetadata__是否直接位于当前类型下,避免父类型造成的干扰。同时,为保持与JavaScript语言原型链逻辑的一致性,对于多级继承的类型,同步克隆了上一级类型下的所有元数据属性。

JavaScript 复制代码
function getPropertiesMetadata(proto) {
	// 获取类构造器原型链上的__accessorMetadata__
	let metaStore = proto.constructor.__accessorMetadata__;

	// 判断该__accessorMetadata__对象是否定义在当前类型,false则表示来自父类的定义
	const isMyStore = Object.prototype.hasOwnProperty.call(
		proto.constructor,
		'__accessorMetadata__'
	);

	if (metaStore) {
		if (!isMyStore) {
			metaStore = Object.create(metaStore);
			for (const p in metaStore) {
				metaStore[p] = lang.clone(metaStore[p])
			}
			Object.defineProperty(proto.constructor, '__accessorMetadata__', {
				value: metaStore,
				enumerable: !1,  
				configurable: !0,  
				writable: !0,
			});
		}
	} else {
		metaStore = {}
		Object.defineProperty(proto.constructor, '__accessorMetadata__', {
			value: metaStore,
			enumerable: !1,  
			configurable: !0,  
			writable: !0,
		});
	}
	return proto.constructor.__accessorMetadata__;
}

至此,子类型完成了自身的类型创建并从父类型中继承了已有的属性元数据,下一步将是逐个解析类型构建中传递的properties属性,并构造属于该类型自身的属性元数据。

JavaScript 复制代码
class Accessor {
	static createSubclass(args) {
		// 此处省略...
		const AccessorType = this;
		class o extends AccessorType {
			// 此处省略...
		}

		// 第一步准备元数据对象
		getPropertiesMetadata(o.prototype);

		// 逐个解析传入的其他属性元信息
		// 此处省略


		// 遍历properties对象中的属性声明,并补充到__accessorMetadata__
		for (const p in properties) {
			const typeDesc = predicateType(properties[p])
			property(typeDesc)(o.prototype, p);
		}
	}
}

稍后让我们再详细了解property装饰器是如何对单个的属性进行建模和存储的。

如果你觉得本文对你有些许启发,请持续关注我的公众号"戈伊星球"吧!

相关推荐
Algebraaaaa5 小时前
什么是前端、后端与全栈开发,Qt属于什么?
开发语言·前端·qt
胡斌附体5 小时前
使用Electron创建helloworld程序
前端·javascript·electron·nodejs·pc
toobeloong5 小时前
Electron 从低版本升级到高版本 - webview通信的改造
前端·javascript·electron
im_AMBER5 小时前
React 01
前端·javascript·笔记·react.js·前端框架·web
@大迁世界5 小时前
React 19.2.0 有哪些新变化
前端·javascript·react.js·前端框架·ecmascript
华仔啊6 小时前
用 Vue3 + Canvas 做了个超实用的水印工具,同事都在抢着用
前端·vue.js·canvas
Bacon7 小时前
前端:从0-1实现一个脚手架
前端
Bacon7 小时前
前端项目部署实战 nginx+docker持续集成
前端
beckyye7 小时前
阿里云智能语音简单使用:语音识别
前端·语音识别·录音