dojo类机制简介

随着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权威指南》 DavidFlanagan著张铭泽译

http://docs.dojocampus.org/

http://blog.csdn.net/dojotoolkit/

http://dojotoolkit.org/

 

作者信息:张卫滨,关注企业级Java开发和RIA技术,个人博客:http://lengyun3566.iteye.com,微博:http://weibo.com/zhangweibin1981

 

 

声明: 
  本文已经首发于InfoQ中文站,版权所有,原文为《dojo类机制简介》,如需转载,请务必附带本声明,谢谢。 
  InfoQ中文站是一个面向中高端技术人员的在线独立社区,为Java、.NET、Ruby、SOA、敏捷、架构等领域提供及时而有深度的资讯、高端技术大会如QCon 、线下技术交流活动QClub、免费迷你书下载如《架构师》等。 

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分三个包上传时,第三个包好像传不上去,我给整合了一下,打在一个包里上传了! dojo精品中文教程 Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 AJAX架构之Dojo篇 Adding Ajax中文版 (DoJo) DOJO学习笔记(七)-日期控件DropdownDatePicker和DatePicker DOJO常用的验证函数 Dojo with Adobe AIR Dojo 工具包教程 Dojo 快速安装 Dojo和JSON建立无限级AJAX动态加载的功能模块树 Dojo学习笔记( 模块与包) Dojo学习笔记-- djConfig解说 Dojo学习笔记-- dojo.dom Dojo学习笔记-- dojo.event & dojo.event.topic & dojo.event.browser Dojo学习笔记--DateTextbox Dojo学习笔记--Dojo的基础对象和方法 Dojo学习笔记--FisheyeList鱼眼效果 Dojo学习笔记--TabContainer Dojo学习笔记--ValidationTextbox Dojo学习笔记--dijit.Dialog Dojo学习笔记--dijit.Menu Dojo学习笔记--dijit.TitlePane Dojo学习笔记--dijit.Tooltip Dojo学习笔记--dijit.Tree Dojo学习笔记--dojo.graphics.color & dojo.uri.Uri Dojo学习笔记--dojo.string & dojo.lang Dojo学习笔记--动态生成widget Dojo学习笔记--开发自己的TitlePane Dojo学习笔记--页面部分区域遮挡,DialogUnderlay Dojo学习笔记(五)-djConfig详解 dojo data 接口详解 dojo0.9 使用心得 dojo学习笔记(一)-dojo.io.IO & dojo.io.BrowserIO) dojo学习笔记(三) dojo学习笔记(二) dojo.lang.array & dojo.lang.func & dojo.string.extras dojo学习笔记(六)- ContentPane dojo学习笔记(四) dojo的拖拽示例以及疑问! 介绍dojo事件 使用 Dojo 工具包和 JSON-RPC 构建企业 SOA Ajax 客户端 利用Dojo实现拖动(Drag and Drop)效果

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值