dojo类机制简介

随着AJAX和RIA技术的发展,JavaScript被广泛的使用,并在开发中发挥着越来越重要的作用。JavaScript提供了特有的类机制,但是在语法习惯上与传统面向对象的语言有很大的不同,这使得不少的JavaScript开发人员感到比较迷惑,而dojo作为功能强大的JavaScript类库,有功能完整的类机制实现。本文将通过实例介绍dojo的类机制,这是dojo提供的一种强大和灵活的功能,其dijit UI组件框架也是以此为基础实现的。

使用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

实现静态变量

在常见的面向对象语言中,经常会使用到类层次的静态变量,而通过dojo定义的类也能实现静态变量的需求,不过静态变量仅限于数组和对象类型。

staticInfo:{count:0},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方法中被重新赋值,那么该属性将不再是静态属性,而是每个实例化对象都持有一份属于自己的备份了。

使用dojo实现继承

在JavaScript中没有直接实现继承的关键字,因此关于继承有多种的实现方式,代表性的是类式继承原型式继承,但是不管哪种继承方式都需要开发人员对JavaScript语言本身有着很深厚的了解。dojo对JavaScript的继承机制进行了很好的封装,可以实现功能强大的类定义,我们将对一些常见的功能进行介绍。

dojo.declare方法中的第二个参数,是指明要继承的父类的,该参数可以为null(要定义的类没有父类)、单个类(要定义的类继承自一个父类)或数组(要定义的类继承自多个父类)。

单继承

我们要定义一个名为com.levinzhang.Employee 的类,继承自com.levinzhang.Person,并要添加名为workExperience的属性、重写getName方法等功能:

dojo.declare("com.levinzhang.Employee",com.levinzhang.Person,{ 
    workExperience:null,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会自动调用父类的初始化方法,完成继承要求的相关初始化工作。

多继承

dojo支持多继承的功能, dojo实现了被Python和很多支持多继承语言使用的C3算法。使用dojo的多继承功能时,需要注意的是:只有数组中的第一个元素会作为真正的父类,而其它的元素则是通过mixin的方式进行属性添加以构建原型链的。

如我们需要定义一个类来表示公司中的股票持有者(com.levinzhang.Shareholder),而公司中的员工可能也会持有股票,于是我们定义一个名为com.levinzhang.ShareholderEmployee的类继承自com.levinzhang.Shareholder和com.levinzhang.Employee。

dojo.declare("com.levinzhang.Shareholder",{ 
    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的文档资料

调用父类的方法

在编程中,我们经常会遇到在子类的某个方法中需要调用父类的方法来协作完成功能。如我们定义名为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",manageExperience:2}); 
alert(manager.getInput());//7000

在以上的测试代码中,getInput的返回值为7000,说明该值为子类和父类方法共同确定的。

除了使用inherited来调用父类中的方法以外,从dojo的1.4版本开始提供了链式调用父类方法的功能,能够通过设置自动调用父类的方法,并且支持类似于AOP的before或after配置(dojo正在开发中的1.7版本,提供了更为丰富的AOP功能,我们将会持续关注)。

Dojo类机制的其它功能

除了以上介绍的类定义相关功能以外,dojo还提供了许多的便利的工具类供使用。

dojo类所生成对象具有一些特有的属性和方法,常见的如isInstanceOf方法和declaredClass属性,isInstanceOf方法判定对象是否为某个类的实例,而declaredClass属性则能够表明该对象的声明类是什么。如:

var manager = new com.levinzhang.Manager({name:"levin",manageExperience:2}); 
alert(manager.isInstanceOf(com.levinzhang.Employee));//提示为true 
alert(manager.isInstanceOf(com.levinzhang.Person));//提示为true 
alert(manager.declaredClass);//提示为“com.levinzhang.Manager”

类机制还涉及到的包管理等功能,限于篇幅,不再展开叙述,感兴趣的读者可以参考dojo的在线文档或图书。

小结

JavaScript本身的类机制比较复杂,对开发人员有着较高的要求,而dojo提供了功能强大的类功能,有些降低了开发的难度。本文简单介绍了dojo类机制的基本功能,包括类定义、继承、静态属性等,这是dojo最基础也是最核心的内容之一,dojo的许多高级功能都是基于此来实现的,因此了解这部分功能的使用方式甚至源码实现对于整体把握dojo框架都大有裨益。

参考资料:

转载地址:http://www.infoq.com/cn/articles/zwb-dojo-class-mechanism-introduce

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


我有一个网格,可以根据更大的树结构编辑小块数据.为了更容易知道用户保存了什么,我希望当用户第一次看到网格时,网格处于不可编辑状态.当用户准备好后,他们可以单击编辑按钮,这将使网格的某些部分可编辑.然后,有一个保存或取消按钮可以保存更改或还原.在大多数情况下它是有效的.但
我即将开始开发一款教育性的视频游戏.我已经决定以一种我可以轻松打包为Web,Mobiles和可能的Standalone版本的方式来实现这一目标.我不想使用Flash.因此,我确信(无论如何我会听取建议)使用JavaScript和SVG.我正在对这个问题进行大量研究,但我很难把各个部分放在一起.我知道Raphae
我正在使用带有Grails2.3.9的Dojo1.9.DojoNumberTextBox小部件–我在表单中使用–将固定格式(JavaScript基本格式)的实数值(例如:12.56)设置为HTML表单输入字段(但根据浏览器区域设置显示/编辑它们,所以用户总是看到格式正确的数字).另一方面,Grails期望输入字段根据浏览器
1.引言鉴于个人需求的转变,本系列将记录自学arcgisapiforjavaScript的学习历程,本篇将从最开始的arcgisapiforjavaScript部署开始,个人声明:博文不在传道受业解惑,旨在方便日后复习查阅。由于是自学,文章中可能会出现一些纰漏,请留言指出,不必留有情面哦!2.下载ArcGISforDe
我正在阅读使用dojo’sdeclare进行类创建的语法.描述令人困惑:Thedeclarefunctionisdefinedinthedojo/_base/declaremodule.declareacceptsthreearguments:className,superClass,andproperties.ClassNameTheclassNameargumentrepresentsthenameofthec
我的团队由更多的java人员和JavaScript经验丰富组成.我知道这个问题曾多次被问到,但为了弄清楚我的事实,我需要澄清一些事情,因为我在客户端技术方面的经验非常有限.我们决定使用GWT而不是纯JavaScript框架构建我们的解决方案(假设有更多的Java经验).这些是支持我的决定的事实.>
路由dojo/framework/srcouting/README.mdcommitb682b06ace25eea86d190e56dd81042565b35ed1Dojo应用程序的路由路由FeaturesRoute配置路径参数RouterHistoryManagersHashHistoryStateHistoryMemoryHistoryOutletEventRouterContextInjectionOutl
请原谅我的无知,因为我对jquery并不熟悉.是否有dojo.connect()的等价物?我找到了这个解决方案:http:/hink-robot.com/2009/06/hitch-object-oriented-event-handlers-with-jquery/但是没有断开功能!你知道jquery的其他解决方案吗?有jquery.connect但这个插件在我的测试中不起作用.
与java类一样,在dojo里也可以定义constructor 构造函数,在创建一个实例时可以对需要的属性进行初始化。//定义一个类mqsy_yjvar mqsy_yj=declare(null,{     //thedefaultusername    username: "yanjun",          //theconstructor   
我一直在寻找一些最佳实践,并想知道Dojo是否具有框架特定的最佳实践,还是最好只使用通用的Javascript标准?特别是我主要是寻找一些功能和类评论的指导方针?解决方法:对于初学者来说,这是项目的风格指南:DojoStyleGuide
我有’05/17/2010’的价值我想通过使用dojo.date.locale将其作为“2010年5月17日”.我尝试过使用dojo.date.locale.parse,如下所示:x='05/17/2010'varx=dojo.date.locale.parse(x,{datePattern:"MM/dd/yyyy",selector:"date"});alert(x)这并没有给我所需的日期
我正在尝试创建一个包含函数的dojo类,这些函数又调用此类中的其他函数,如下所示:dojo.provide("my.drawing");dojo.declare("my.drawing",null,{constructor:function(/*Object*/args){dojo.safeMixin(this,args);this.container=args[0];
我知道你可以使用jQuery.noConflict为jQuery做这件事.有没有办法与Dojo做类似的事情?解决方法:我相信你可以.有关在页面上运行多个版本的Dojo,请参阅thispage.它很繁琐,但似乎是你正在寻找的东西.一般来说,Dojo和jQuery都非常小心,不会破坏彼此或其他任何人的变量名.
我有一个EnhancedGrid,用户经常使用复杂的过滤器.有没有办法允许用户保存或标记过滤器,以便将来可以轻松地重新应用它?我知道我可以通过编程方式设置过滤器,但我无法预测用户想要的过滤器.谢谢!编辑:自己做了一些进展…使用grid.getFilter()返回过滤器的JSON表示,然后使用json.strin
我有这个代码:dojo.declare("City",null,{constructor:function(cityid,cityinfo){}});dojo.declare("TPolyline",GPolyline,{constructor:function(points,color){},initialize:function(map){});应该是什
我遇到的问题是我的所有javascript错误似乎来自dojo.xd.js或子模块.我正在使用chrome调试器和许多dijit功能,如dijit.declaration和dojo.parser.这有点烦人,因为它很难找到简单的错误或滑倒.我希望我可以添加一个选项,允许我的调试器在我的非dojo代码中显示选项会发生的位置.我是
我正在使用DojoToolkit数字/解析函数来处理格式化和使用ICU模式语法解析字符串.有没有人知道有可能采取任意ICU模式字符串并以某种方式使用Dojo(或其他)库将其分解为它的部分(例如,对于数字模式,它可以被分解为小数位数,数千个分组等…).我希望这样做,而不需要让我的代码密切了
我有两个看似相关的问题,访问在不同的地方定义的javascript函数.我遇到的第一个问题是调用我在firgbug或safari控制台中定义的函数.我定义了一个名为getRed的函数,如下所示:functiongetRed(row,col){//dosomethingstuffandreturntheredvalueasa
我想添加一个在Ajax调用中指定的外部样式表.我已经找到了一种方法来使用jQuery(参见下面的示例),但是我需要使该方法适应dojoJavaScript框架.JQuery示例$('head').append('<linkrel="stylesheet"type="text/css"href="lightbox_stylesheet.css">');谢谢.解决方法:一旦你
我正在尝试使用dojo.connect将onMouseDown事件连接到图像,如:dojo.connect(dojo.byId("workpic"),"onMouseDown",workpicDown);functionworkpicDown(){alert("mousedown");}类似的代码几行后,我将onMouse*事件连接到dojo.body确实完全正常工作.但是当我点击图像时