dojo中的类

article/2025/9/13 5:22:59

使用arcgis api for js 4.*进行地图的web前端开发,就不得不与dojo打交道。dojo是一个框架,自成体系,比如它对类的支持,有自己的一套。众所周知,js不是面向对象语言,没有类这一说,都是用函数来模拟类。

那么dojo里的类是怎么样的呢?

1、定义(声明)类

用declare。

declare(基类,类定义)

第一个参数是基类,单个基类或多个基类组成的数组,如果没有基类,则以null或空数组“[ ]”代替。比如下面:

var A = declare(null, {constructor: function(name, age, residence){this.name = name;this.age = age;this.residence = residence;}
});var a = new A("孙悟空",48000,"花果山水帘洞");

类定义,总体上看是一个json。构造函数,各种方法,都是json元素。

constructor,顾名思义,是构造函数。注意name、age、residence并没有声明,直接使用,作为实例的属性。这样不管new多少个A实例,实例之间的属性都不会互相影响。

但我之前不懂,将变量声明在declare之外,new出来的实例,变量居然是共用的。看上去,变量放在declare外部,就相当于全局静态变量。
在这里插入图片描述
注:图中的代码,是dojo比较老旧的版本,所以declare有三个参数。

2、继承

//员工类
define(["dojo/_base/declare", "my/Person"], function(declare, Person){return declare(Person, {constructor: function(name, age, residence, salary){// The "constructor" method is special: the parent class (Person)// constructor is called automatically before this one.this.salary = salary;},askForRaise: function(){return this.salary * 0.02;}});
});//领导类
define(["dojo/_base/declare", 'my/Employee'], function(declare, Employee){return declare(Employee, {askForRaise: function(){return this.salary * 0.25;}});
});//使用员工类和领导类
require(["my/Employee", "my/Boss"], function(Employee, Boss){var kathryn = new Boss("Kathryn", 26, "Minnesota", 9000),matt    = new Employee("Matt", 33, "California", 1000);console.log(kathryn.askForRaise(), matt.askForRaise()); // 2250, 20
});

3、类的链式初始化

就是创建dojo的类实例时,初始化默认是从最老的祖宗开始,一代接一代的依次初始化。

require(["dojo/_base/declare"], function(declare){var A = declare(null, {constructor: function(){ console.log("A"); }});var B = declare(A, {constructor: function(){ console.log("B"); }});var C = declare(B, {constructor: function(){ console.log("C"); }});new C();
});// prints:
// A
// B
// C

如果想打断这种链式初始化,如:

require(["dojo/_base/declare"], function(declare){var A = declare(null, {constructor: function(){console.log("A");}});var B = declare(A, {"-chains-": {//声明链式初始化为手动模式,其实就是打断了链式传播。好滑稽的方法constructor: "manual"},constructor: function(){console.log("B");}});var C = declare(B, {constructor: function(){console.log("C - 1");this.inherited(arguments);//显式调用父类初始化,爷爷或更老的祖宗就不必了console.log("C - 2");}});var x = new C();
});// prints:
// C - 1
// B
// C - 2

4、扩展类

如果要扩展一个类,可以用 类.extend(扩展部分定义)。注意扩展部分是扩展,不是完全覆盖。只有重复部分才会被覆盖,原先没有的,则新增到类里。所谓有则改之,无则增加。类修改后,所有的实例都受到影响。

extend返回扩展后的类。

示例如下:

require(["dojo/_base/declare"], function(declare){var A = declare(null, {m1: function(){// ...}});A.extend({m1: function(){// this method will replace the original method// ...},m2: function(){// ...}});var x = new A();a.m1();a.m2();
});

5、派生类

多说无益,直接看代码

require(["dojo/_base/declare"], function(declare){var A = declare(null, {m1: function(){},s1: "bar"});var B = declare(null, {m2: function(){},s2: "foo"});var C = declare(null, {});
});

对于上述代码,下面2种方法的效果是一样的:
1)方式一

var D1 = A.createSubclass([B, C], {m1: function(){},d1: 42
});
var d1 = new D1();

2)方式二

var D1 = declare([A, B, C], {m1: function(){},d1: 42
});
var d1 = new D1();

其中方式一就使用了createSubclass。由A派生,同时继承B和C。等同于同时继承A、B、C。
createSubclass有两个参数,参数一为基类,参数二为注入新类的定义。所谓注入,即有则改之,无则增加,参考 4、扩展类。

createSubclass与extend的区别,在于extend只是对现有类进行扩展,而createSubclass是继承并派生出一个新类。

6、调用父类方法

inherited()

这个方法十分令人费解。它最多有三个参数。

第一个参数是方法名,可选。不指定,调用的是父类的当前方法的同名方法(?)

第二个参数是arguments,是个伪变量,不用声明。据说用于“内省(introspection)”,不知道是什么意思。反正名字不能改把它当作保留字看待。

第三个参数是传递的参数,如果没有指定,第二个参数arguments就发挥作用。但如果为[“true”],则返回父类方法的定义,而不执行。

如果没有父类方法,则返回undefined。

require(["dojo/_base/lang", "dojo/_base/declare"], function(lang, declare){var A = declare(null, {m1: function(){// ...},m2: function(){// ...},m3: function(){// ...},m4: function(){// ...},m5: function(){// ...}});var B = declare(A, {m1: function(){// simple super call with the same argumentsthis.inherited(arguments);// super call with new argumentsthis.inherited(arguments, [1, 2, 3]);}});// extend B using extend()B.extend({m2: function(){// this method is going to be properly annotated =>// we can use the same form of this.inherited() as// normal methods:// simple super call with the same argumentsthis.inherited(arguments);// super call with new argumentsthis.inherited(arguments, ["a"]);}});// extend B using lang.extend()lang.extend(B, {m3: function(){// this method is not annotated =>// we should supply its name when calling// a superclass:// simple super call with the same argumentsthis.inherited("m3", arguments);// super call with new argumentsthis.inherited("m3", arguments, ["a"]);}});// let's create an instancevar x = new B();x.m1();x.m2();x.m3();x.m4(); // A.m4() is calledx.m5(); // A.m5() is called// add a method on the fly using declare.safeMixin()declare.safeMixin(x, {m4: function(){// this method is going to be properly annotated =>// we can use the same form of this.inherited() as// normal methods:// simple super call with the same argumentsthis.inherited(arguments);// super call with new argumentsthis.inherited(arguments, ["a"]);}});// add a method on the flyx.m5 = function(){// this method is not annotated =>// we should supply its name when calling// a superclass:// simple super call with the same argumentsthis.inherited("m5", arguments);// super call with new argumentsthis.inherited("m5", arguments, ["a"]);};x.m4(); // our instance-specific method is calledx.m5(); // our instance-specific method is called
});

7、在arcgis api for js中的应用

示例

define(["dojo/_base/declare","esri/geometry/support/webMercatorUtils","./WebGlLayer",
], function (declare, webMercatorUtils, WebGlLayer) {return declare(null, {constructor: function (mapView) {this.core = new Core(mapView);},draw: function (data, options) {this.core.load(data, options);},clear: function () {this.core.clear();},});function Core(mapView) {。。。}
});

以上仅为dojo类定义及操作的部分内容。dojo只是一个框架,对类的定义和实现自成一家,有些地方十分有趣。因为前端要用到arcgis api for js,依赖dojo,了解即可,不作深究。dojo有关类的完整阐述,见参考文章。

参考文章:
https://dojotoolkit.org/reference-guide/1.9/dojo/_base/declare.html


http://chatgpt.dhexx.cn/article/ioJEQwOB.shtml

相关文章

dojo学习教程

Dojo 作为最著名的 Ajax 开源项目之一,不仅让 Web 程序员可以免费获得和使用其框架进行 Web 应用的开发,更吸引了大量的开发者对其不断的扩充,开发新的组件。DojoX 就是在这样的开发社区中产生的。DojoX 是一组基于 dojo 的开源项目的集合&am…

Dojo与jQuery综合比较分析

最近Dojo和jQuery双双发布了最新的1.8版本,有着相同版本号的两个Javascript库也有许多核心的相同之处:相同的资源加载机制AMD、相同的选择器 引擎Sizzle等。作为业界知名的Javascript库,Dojo和jQuery在各自领域有着为数众多的拥护者。不过正所谓一把钥匙开一把锁,对一个项目…

Dojo简述

Dojo是一个JavaScript实现的开源DHTML工具包。Dojo的最初目标是解决开发DHTML应用程序时遇到的一些长期存在的历史问题。 【注:DHTML是一种使HTML页面具有动态特性的艺术。DHTML是一种创建动态和交互WEB站点的技术集合。对大多数人来说,DHTML意味着HTML…

ibatis简介

背景 介绍ibatis实现之前,先来看一段jdbc代码: Class.forName("com.mysql.jdbc.Driver"); String url "jdbc:mysql://localhost:3306/learnworld"; Connection con DriverManager.getConnection(url, "root","learnwo…

Ibatis使用

部分参考:https://blog.csdn.net/shixiaoguo90/article/details/49949445 Apache iBatis是当前IT项目中使用很广泛的一个半自动ORM框架,区别于Hibernate之类的全自动框架,iBatis对数据库的操作拥有更加灵活的控制,对于那些经常需…

iBatis-iBatis配置环境(eclipse+mysql)

在使用JAVA框架前要配置其环境,比如使用Hibernate、Struts等都需要对其环境进行配置,当然使用iBatis开发之前,也需要配置iBatis环境。 一、iBatis环境的配置只需三步 1.引入jar包 2.配置sqlMapConfig.xml文件 3.配置SqlMap.xml文件 二、概览i…

什么是IBatis

什么是IBatis 我一直想写一篇关于持久化数据访问的文章,可是我不知道怎么开始介绍,前两天晚上睡觉的时候突然有了一些开始写的想法,所以我决定今天动手开始写一点东西。头一次写这样的文章,希望大家不要见怪。 现在网上很多人学习…

ibatis-Spring 整合

这两天一直在研究ibatis与spring的整合 一个小小的demo搞的我头晕目眩的,但程序一旦跑起来了,突然有一种豁然开朗,重见天日,感觉生活很美好的感觉!,也许,这就是那一行行的代码带给我们的不同享受…

ibatis与spring整合

这两天一直在研究ibatis与spring的整合 一个小小的demo搞的我头晕目眩的,但程序一旦跑起来了,突然有一种豁然开朗,重见天日,感觉生活很美好的感觉!,也许,这就是那一行行的代码带给我们的不同享受…

iBatis--iBatis 是什么?

一.为啥使用iBatis? 在 Hibernate、JPA 这样的一站式对象 / 关系映射(O/R Mapping)解决方案盛行之前,iBaits 基本是持久层框架的不二选择。即使在持久层框架层出不穷的今天,iBatis 凭借着易学易用、轻巧灵活等特点&am…

iBatis-iBatis基本操作(增删改查)

在上一篇iBatis博客中已介绍了如何配置iBatis环境,这篇博客主要进行介绍一些iBatis的基本操作实现。iBatis的增删改操作都需要操作SqlMap,DAO层Manger,POJO 这几个类来实现。下面分别介绍一下iBatis基本操作的实现: 一.iBatis的添加数据方式 这里介绍两种iBatis添加…

Ibatis与Mybatis的区别—侧重于Ibatis

目录 一、什么是Ibatis? 1、iBatis是一款轻量级的持久化框架 2、iBatis最大的特点是将SQL语句与Java代码分离 3、iBatis具有以下几个关键组成部分: 二、Ibatis与Mybatis的区别 1、基本信息不同 2、开发时间不同 3、配置方法不同 三、Ibatis与My…

ibatis使用方法

转载。怕原地址丢失,备份。。 http://lyb520320.iteye.com/blog/586628 http://lyb520320.iteye.com/blog/586800 iBATIS3.0学习(一)使用iBATIS3.0完成增删改查 博客分类: iBATIS3 iBATIS Apache Spring SQL JDBC 使用iBATIS3.0完…

IBatis使用浅析

ibatis 历史 Eight years ago in 2002, I created the iBATIS Data Mapper and introduced SQL Mapping as an approach to persistence layer development. Shortly thereafter, I donated the iBATIS name and code to the Apache Software Foundation. The ASF has been th…

IBatis的使用

IBatis的使用 1、IBatis是什么 回顾之前前端访问后端的整个流程: View ------ >Controller --------> Service ---------> DAO ------> 数据库 View :前端jsp/HTML Controller:Servlet/SpringMVC Service :Spring DAO&…

IBatis——初步总结

IBatis是持久层的框架,也就是我们说的Dao层框架,关注数据库操作以及和Java对象之间的关联,我们将这样的框架也称之为ORM(Object/Relaction Mapping)框架.而这里映射的主要是我们的表和实体(bean&#xff09…

XMind导入Markdown(利用Typora导出opml)

安装Xmind XMind 是一款非常实用的商业思维导图软件 首先,安装Xmind并打开。通过"帮助"——>“关于Xmind”,可以获取到当前的版本号为 XMind 8 Update 9 在"文件"——>“导入”,可以看到Xmind支持的导入格式仅有…

推荐一款高效Cpp解析xml工具--RapidXml

解析效率比Xerces DOM 快50-100倍,tinyxml快30-60 ,作者自己牛逼哄哄的说这是他所知道的最快的xml解析库了~~ 作者介绍说:" The table below compares speed of RapidXml to some other parsers, and to strlen() function executed on…

C++中rapidxml用法及例子

rapidxml是一个快速的xml库,比tinyxml快了50-100倍。本文给出创建、读取、写入xml的源码。 由于新浪博客不支持文本文件上传,在使用下面代码需要先下载 rapidxml,关于这个库的下载地址为: 官方网站: http://rapidxml.…

C++ Xml解析的效率比较(Qt/TinyXml2/RapidXml/PugiXml)

C Xml解析的效率比较(Qt/TinyXml2/RapidXml/PugiXml) C Xml解析的效率比较QtTinyXml2RapidXmlPugiXml 问题背景测试环境Qt - QDomDocumentTinyXml-2RapidXmlPugiXml总结 通常我们在一些软件的初始化或者保存配置时都会遇到对XML文件的操作,包…