在 ArcGIS JS 4.16后构造新类（4.16后）

最新推荐文章于 2026-05-17 05:38:05 发布

原创最新推荐文章于 2026-05-17 05:38:05 发布 · 522 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

ArcGIS API For JS

ArcGIS 4.16移除了dojo/declare模块，影响了类的构造和继承。对于无构造器的类，只需删除未使用的declare模块。有构造器的情况，推荐使用Accessor创建子类。存在继承关系时，可以使用mixin方案或直接在新类中实例化基类并扩展。本文提供了示例代码以说明如何在新版本中重构类。

前言

ArcGIS 4.16版本之后正式移除了 dojo 中的declare 模块。这导致了早期版本想要实现类的构造需要使用新的方法。
ArcGIS 中的发布笔记如下
在这里插入图片描述

实现方法

其中包括了几种情况：

无构造器
有构造器
有继承关系

无使用构造器

对于没有使用构造器的新类，不涉及 declare 模块。如果在原先的代码中有引入该模块但没使用的话，只需要将其删除即可
（ps:我在使用编程过程中，即使没用到也会应用 declare 模块，导致运行时提示无法找到模块对应的 declare.js ），可能还有很多人也一样。

有构造器

ArcGIS 建议开发者使用 Accessor 创建类。（在后台，Accessor 其实也是使用了 dojo/_base/declare 来创建类的）。
笔者在本次项目中大部分只需要利用 Accessor 创建子类就可以重新构造新类。

define(["esri/core/Accessor"], //引入 Accessor 模块
function(Accessor) {
	var  newClass = Accessor.createSubclass({
		declaredClass: "js.creater.newClass",// path of class
		properties :{
			// Example：Define a peroperty
			// the property has function like get or set
		}
		Length: null ; //other perporty
		constructor(){
			this.Length = [];		
		},
	});
});

有继承关系

官方案例和方案：建议使用 mixin 方案进行设计

define([], function() {

  /**
   * A mixin is a function that returns a class extending the `Base` superclass
   * with extra functionalities.
   */
  var EventedMixin = function EventedMixin(Base) { //function name with extending the 'Base'

    // Assuming `Base` extends `Accessor` we can use `createSubclass`.
    // For plain ECMAScript classes, see examples https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Mix-ins
    return Base.createSubclass({ //基于 'Base' 创建子类
      declaredClass: "esri.guide.Evented",

      /**
       * A first function defined by the mixin
       */
      emit: function(type, event) {
        // ...
      },

      /**
       * Another function defined by the mixin
       */
      on: function(type, listener) {
        // ...
      }
    });
  }

  return EventedMixin;

});

也可以直接在新类中，实例一个要继承的对象。并在上面的基础上修改

define(["esri/core/Accessor"],
	function (Accessor){
		declaredClass:"  *.*.NewClass", //path of class
		base:null,
		var NewClass = Accessor.createSubclass({
			constructor:function(Base){
					this.base = new Base()
			},
			functionName1 : function(){
				//some-to-do
			}
		})
	}
)