声明:本文为笔者原创,但首发于InfoQ中文站,详见文末声明
随着AJAX和RIA技术的发展,JavaScript被广泛的使用,并在开发中发挥着越来越重要的作用。JavaScript提供了特有的类机制,但是在语法习惯上与传统面向对象的语言有很大的不同,这使得不少的JavaScript开发人员感到比较迷惑,而dojo作为功能强大的JavaScript类库,有功能完整的类机制实现。本文将通过实例介绍dojo的类机制,这是dojo提供的一种强大和灵活的功能,其dijit UI组件框架也是以此为基础实现的。
1.
使用dojo定义类
声明dojo类是通过dojo.declare()方法来实现的,如我们想要定义一个名为com.levinzhang.Person的类,该类有name、age属性和getName、getAge方法:
dojo.declare("com.levinzhang.Person", null,{
name:null,
age:null,
constructor: function(name,age){
this.name = name;
this.age = age;
},
getName:function(){
return this.name;
},
getAge:function(){
return this.age;
}
});
除了前面提到的属性的和方法以外,在代码中我们还定义了一个名为constructor的方法,这个方法在dojo的类机制中至关重要,当我们实例化该类得到对象的时候,该方法将会被调用,从而完成初始化的操作。
dojo的declare接受三个参数,分别为类的名称、要继承的父类以及该类的属性和方法。实例化类的语法也很简洁,与实例化普通的JavaScript类并无分别:
var person = new com.levinzhang.Person("levinzhang",30);
alert(person.getName());//将会提示出levinzhang
2.
实现静态变量
在常见的面向对象语言中,经常会使用到类层次的静态变量,而通过dojo定义的类也能实现静态变量的需求,不过静态变量仅限于数组和对象类型。
staticInfo:{count:0},
constructor: function(name,age){
this.name = name;
this.age = age;
++this.staticInfo.count;
}
如上所示,如果定义了数组和对象,而没有在构造方法中进行修改的话,这个对象将会成为该类的静态属性,测试代码如下:
var person = new com.levinzhang.Person("levinzhang",30);
alert(person.staticInfo.count);//此时将会提示出1
var person2 = new com.levinzhang.Person("levin",30);
alert(person2.staticInfo.count);//此时将会提示出2
需要注意的两点是:1)对于原始类型的变量如数字、布尔值和字符串,dojo的类机制并没有提供实现静态属性的功能;2)如果定义的数组或对象属性在constructor方法中被重新赋值,那么该属性将不再是静态属性,而是每个实例化对象都持有一份属于自己的备份了。
3. 使用dojo实现继承
在JavaScript中没有直接实现继承的关键字,因此关于继承有多种的实现方式,代表性的是类式继承和原型式继承,但是不管哪种继承方式都需要开发人员对JavaScript语言本身有着很深厚的了解。dojo对JavaScript的继承机制进行了很好的封装,可以实现功能强大的类定义,我们将对一些常见的功能进行介绍。
dojo.declare方法中的第二个参数,是指明要继承的父类的,该参数可以为null(要定义的类没有父类)、单个类(要定义的类继承自一个父类)或数组(要定义的类继承自多个父类)。
1) 单继承
我们要定义一个名为com.levinzhang.Employee
的类,继承自com.levinzhang.Person,并要添加名为workExperience的属性、重写getName方法等功能:
dojo.declare("com.levinzhang.Employee", com.levinzhang.Person,{
workExperience:null,
constructor: function(name,age,workExperience){
this.workExperience = workExperience;
},
getWorkExperience:function(){
return this.workExperience;
},
getName:function(){
return "Employee:"+this.name;
},
getInput:function(){
return 5000;
}
});
在以上的代码中,我们定义的com.levinzhang.Employee继承了com.levinzhang.Person并添加了自定义的方法。测试代码如下:
var employee = new com.levinzhang.Employee("levin",30,4);
alert(employee.getName());//将提示出Employee:levin
alert(employee.getWorkExperience());//将提示出4
alert(employee.getAge());//将提示出30
可以看到在Employee的实例中,我们能够调用父类中定义的方法。而在类的constructor初始化方法中,我们并没有调用父类相关的方法,但是我们成功初始化了name和age两个属性,这是因为dojo会自动调用父类的初始化方法,完成继承要求的相关初始化工作。
2)
多继承
dojo支持多继承的功能, dojo实现了被Python和很多支持多继承语言使用的C3算法。使用dojo的多继承功能时,需要注意的是:只有数组中的第一个元素会作为真正的父类,而其它的元素则是通过mixin的方式进行属性添加以构建原型链的。
如我们需要定义一个类来表示公司中的股票持有者(com.levinzhang.Shareholder),而公司中的员工可能也会持有股票,于是我们定义一个名为com.levinzhang.ShareholderEmployee的类继承自com.levinzhang.Shareholder和com.levinzhang.Employee。
dojo.declare("com.levinzhang.Shareholder", com.levinzhang.Person,{
share:null,
constructor: function(args){
this.share = args.share;
},
getShare:function(){
return this.share;
}
});
dojo.declare("com.levinzhang.ShareholderEmployee", [com.levinzhang.Employee,com.levinzhang.Shareholder],{
getInfo:function(){
alert("I'm an Employee with stock.My share is "+this.getShare()+"."+"My name is "+this.getName()+".");
}
});
在以上的代码中,我们调整了原有的初始化传入参数的格式,由传入多个参数改为传入一个简单JavaScript字面量对象的方式(原有的代码也要稍作调整),并通过多继承的方式实现了一个类用来描述持有股票的员工。测试代码如下:
var shareholderEmployee = new com.levinzhang.ShareholderEmployee({name:"levin",age:30,workExperience:4,share:300});
shareholderEmployee.getInfo();
//将会提示出“I'm an Employee with stock.My share is 300. My name is Employee:levin.”
关于dojo多继承的更多话题,请参考dojo的文档资料。
3)
调用父类的方法
在编程中,我们经常会遇到在子类的某个方法中需要调用父类的方法来协作完成功能。如我们定义名为com.levinzhang.Manager的类,该类继承自com.levinzhang.Employee类,并重写getInput方法,Manager的收入分为两部分,一部分是与com.levinzhang.Employee相同的固定收入,另一部分是与管理经验相关的其它收入,这样在定义Manager的时候,就需要调用父类的方法,实现方式如下:
dojo.declare("com.levinzhang.Manager", com.levinzhang.Employee,{
manageExperience:null,
constructor: function(args){
this.manageExperience = args.manageExperience;
},
getInput:function(){
var fromBase = this.inherited(arguments);
return fromBase+1000*this.manageExperience;
}
});
从以上代码可以看到,通过inherited方法的使用,使得Manager可以调用父类的方法。测试代码如下:
var manager = new com.levinzhang.Manager({name:"levin",age:30,workExperience:4,manageExperience:2});
alert(manager.getInput());//7000
在以上的测试代码中,getInput的返回值为7000,说明该值为子类和父类方法共同确定的。
除了使用inherited来调用父类中的方法以外,从dojo的1.4版本开始提供了链式调用父类方法的功能,能够通过设置自动调用父类的方法,并且支持类似于AOP的before或after配置(dojo正在开发中的1.7版本,提供了更为丰富的AOP功能,我们将会持续关注)。
4.
Dojo类机制的其它功能
除了以上介绍的类定义相关功能以外,dojo还提供了许多的便利的工具类供使用。
dojo类所生成对象具有一些特有的属性和方法,常见的如isInstanceOf方法和declaredClass属性,isInstanceOf方法判定对象是否为某个类的实例,而declaredClass属性则能够表明该对象的声明类是什么。如:
var manager = new com.levinzhang.Manager({name:"levin",age:30,workExperience:4,manageExperience:2});
alert(manager.isInstanceOf(com.levinzhang.Employee));//提示为true
alert(manager.isInstanceOf(com.levinzhang.Person));//提示为true
alert(manager.declaredClass);//提示为“com.levinzhang.Manager”
类机制还涉及到的包管理等功能,限于篇幅,不再展开叙述,感兴趣的读者可以参考dojo的在线文档或图书。
5.
小结
JavaScript本身的类机制比较复杂,对开发人员有着较高的要求,而dojo提供了功能强大的类功能,有些降低了开发的难度。本文简单介绍了dojo类机制的基本功能,包括类定义、继承、静态属性等,这是dojo最基础也是最核心的内容之一,dojo的许多高级功能都是基于此来实现的,因此了解这部分功能的使用方式甚至源码实现对于整体把握dojo框架都大有裨益。
参考资料:
《JavaScript权威指南》 David
Flanagan著 张铭泽译
http://docs.dojocampus.org/
http://blog.csdn.net/dojotoolkit/
http://dojotoolkit.org/
声明:
本文已经首发于InfoQ中文站,版权所有,原文为《dojo类机制简介》,如需转载,请务必附带本声明,谢谢。
InfoQ中文站是一个面向中高端技术人员的在线独立社区,为Java、.NET、Ruby、SOA、敏捷、架构等领域提供及时而有深度的资讯、高端技术大会如QCon 、线下技术交流活动QClub、免费迷你书下载如《架构师》等。
分享到:
相关推荐
### Dojo类机制实现原理分析 #### 一、概述 Dojo框架是一个强大的JavaScript库,它不仅提供了丰富的用户界面组件,还内置了一套强大的类机制。本文旨在深入探讨Dojo类机制背后的实现原理,包括其类声明方式、继承...
其中,Dojo的包加载机制是其核心特性之一,它使得在大型应用中组织和管理JavaScript代码变得更为高效。这里我们将深入探讨Dojo的包加载机制,并结合提供的源代码和文档进行分析。 首先,Dojo的包加载机制基于AMD...
Dojo还提供了强大的事件处理机制。dojo.connect允许开发者订阅和发布事件,而dojo.disconnect则可以解除事件监听。这种事件模型使得代码更具响应性和模块化。 在UI组件方面,Dojo Toolkit提供了大量预先封装好的可...
`dojo.event` 用来绑定和解绑事件,`dojo.event.topic` 提供了消息传递机制,而 `dojo.event.browser` 是浏览器特定事件处理的接口。 `dojo.graphics.color` 模块处理颜色相关的操作,如颜色转换、解析和生成。`...
DOJO 1.1引入了Asynchronous Module Definition (AMD)的加载机制,通过require.js实现,使得代码的组织和依赖管理更加高效。AMD允许异步加载模块,提高了页面的加载速度,并且可以更好地控制代码的执行顺序。 3. *...
Dojo的包加载机制允许动态加载所需模块,为用户提供高度的灵活性来扩展和定制工具包。 在技术特性上,Dojo的文件结构包括一个核心代码文件(Dojo.js)和多个JavaScript文件,按照功能不同分为多个版本,如AJAX版、...
dojo入门系列教程,包含入门简介,在javascript基础上介绍dojo的语法特色,ajax的dojo包装---xhr框架的编程要点, Dojo 事件机制.以及对dojo最具特色的web UI设计的全面介绍.
Dojo采用模块化设计,通过AMD(Asynchronous Module Definition)加载机制,可以异步地加载所需模块,提高了页面性能。此外,Dojo还支持模块的依赖管理和命名空间,使得代码组织更加清晰。 5. Dojo MHT 文件: `....
Dojo还引入了Topic机制,它是一个发布/订阅模式的实现。对象可以发布事件到特定的topic,其他对象可以订阅这些topic来接收事件。这对于解耦组件间的通信非常有用。例如: ```javascript var exampleObj = { ...
同时,Dojo的事件处理机制和动画库也是其亮点,能够帮助你创建出交互性强、用户体验良好的Web应用。此外,Dojo还提供了丰富的数据存储解决方案,如dojo.store,支持与服务器的数据交换和本地数据管理。 通过上述...
`dojo/_base/kernel`是Dojo的核心模块,定义了基本的命名空间和加载机制。 2. **加载器(Loader)**:Dojo的加载器`dojo/require`和`dojo/deprecated`等,负责解析模块依赖并按需加载。在1.4.2版本中,`dojo....
此外,还可以探索Dojo的模块化加载机制(AMD,Asynchronous Module Definition)是如何帮助优化页面加载和提高性能的。对于想要深入Dojo开发的开发者来说,这些官方示例是宝贵的资源,能够帮助他们快速掌握Dojo的...
5. **dojo/data**:虽然已被`dojo/store`取代,但在一些较旧的例子中,可能还会看到`dojo/data`,它提供了一种抽象的数据访问机制,可以用于从不同数据源获取和操作数据。 6. **dijit**:Dijit是Dojo的UI组件库,...
9. **工具类和实用函数**:`dojo/_base`模块包含了很多通用的工具函数,如数组操作、字符串处理、定时器等,这些都是开发过程中经常会用到的功能。 10. **Dojo构建系统**:Dojo还提供了一个强大的构建工具,允许...
2. **Dojo模块加载机制**: - AMD(Asynchronous Module Definition)是Dojo引入的一种模块加载方式,它允许异步加载模块,提高页面加载速度。 - `dojo/require` 和 `dojo/ready`:用于在页面加载完成后执行特定...
3. **数据绑定 (Dojo Data)**:Dojo 提供了一种数据绑定机制,允许数据源与用户界面元素之间建立关联,实现数据的自动同步。 4. **AJAX (Asynchronous JavaScript and XML)**:Dojo 提供了简便的AJAX功能,可以轻松...
Dojo的核心特性之一是它的模块系统,称为AMD(Asynchronous Module Definition),这是一种异步模块加载机制,允许开发者按需加载和组织代码,提高页面性能。AMD通过`require`和`define`函数来实现模块的定义和依赖...
【dojo基础知识内容简介】 Dojo是一个强大的JavaScript用户界面开发框架,专为构建富互联网应用程序而设计。它简化了JavaScript编程,使开发者能更高效地创建功能丰富的动态用户界面。Dojo的核心部分是“Dojo Base...
Dojo 1.10.0 使用了Asynchronous Module Definition(AMD)加载机制,这是一种异步加载模块的方式,允许在页面加载时按需加载JavaScript文件,减少了整体的页面加载时间。通过`require`和`define`函数,开发者可以...
1. **模块化**:Dojo采用AMD(Asynchronous Module Definition)模块加载机制,允许开发者按需加载和组织代码,提高了页面加载速度和开发效率。 2. **DOM操作**:Dojo提供了`dojo/dom`和`dojo/query`模块,用于选择...