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装饰器是如何对单个的属性进行建模和存储的。

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

相关推荐
Amd7943 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You12 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生23 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap37 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun1 小时前
空间数据存储格式GeoJSON
前端
zhang-zan2 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium