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

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

相关推荐
0思必得05 小时前
[Web自动化] Selenium处理动态网页
前端·爬虫·python·selenium·自动化
东东5166 小时前
智能社区管理系统的设计与实现ssm+vue
前端·javascript·vue.js·毕业设计·毕设
catino6 小时前
图片、文件的预览
前端·javascript
layman05288 小时前
webpack5 css-loader:从基础到原理
前端·css·webpack
半桔8 小时前
【前端小站】CSS 样式美学:从基础语法到界面精筑的实战宝典
前端·css·html
AI老李8 小时前
PostCSS完全指南:功能/配置/插件/SourceMap/AST/插件开发/自定义语法
前端·javascript·postcss
_OP_CHEN8 小时前
【前端开发之CSS】(一)初识 CSS:网页化妆术的终极指南,新手也能轻松拿捏页面美化!
前端·css·html·网页开发·样式表·界面美化
啊哈一半醒8 小时前
CSS 主流布局
前端·css·css布局·标准流 浮动 定位·flex grid 响应式布局
PHP武器库8 小时前
ULUI:不止于按钮和菜单,一个专注于“业务组件”的纯 CSS 框架
前端·css
电商API_180079052478 小时前
第三方淘宝商品详情 API 全维度调用指南:从技术对接到生产落地
java·大数据·前端·数据库·人工智能·网络爬虫